Monthly Archives: June 2013

The Plan

My most recent surge into web development was inspired by a post over on LifeHacker: How I Taught Myself to Code in Eight Weeks

Just to avoid confusion, I can code, I have been coding as a career for six years now. My issue is that I only know the absolute basics about web development. I knew so little about web development that this was actually quite informative to me. I have been poking and prodding at different portions of web development for a couple of years now. I ran into some HTML/CSS/JS at work for a few weeks, I created version 0.1 of this website about a year ago at the time of this writing, I did some Rails tutorials, I created an Android app that ran off of Parse, etc…

There isn’t anything particularly interesting about the article. It is a hit-list of tutorials and actually includes a prologue that basically says “learn enough to get to the point where you can hire a professional to code a good web experience.” But the takeaways I had from it were 1) to come up with a concrete plan to learn a skill and 2) Django looks pretty useful.

I’m in the throws of 1) now, I walked through some Python tutorials to sharpen my basic working knowledge of the language and I started learning Django. The second half of my plan is to spend some time learning Javascript. Another language I have a working knowledge of the basics but would be hard pressed to put together something unique and useful in short order. So that’s my plan, learn more of the stack by diving into Django (learning more Python along the way is an added bonus) and then learn to make it look pretty by diving deeper into Javascript (and eventually JQuery).

It is a plan with somewhat defined steps:

  • Step through Python tutorials
  • Learn Django through tutorials and Django By Example
  • Present Django-served data into a basic HTML/CSS driven website
  • Research and complete Javascript tutorial(s)
  • Liven up website with Javascript
  • Research and complete JQuery tutorial(s)

None of these steps individually seem difficult. Each one results in me either learning a new skill or applying the results of a recently learned skill. Seems downright logical to me.

I also wanted to put a non-arbitrary timeline on this project. I assumed I would get through the Python tutorials relatively quickly since I knew a fair amount about it going in, so that got chalked up as a few days. Django was a complete unknown going in so I allocated two weeks for tutorials and then the Examples reference. I had a feeling Javascript would be the big one. I had exposure to it which only served to convince me that it would take a substantial effort to learn. I gave it a full month. JQuery being a JS library I figured it would come a little easier, how about two weeks?

Add it all up and my somewhat non-arbitrary timeline for the launch of a halfway decent Django-serving website was about two months.

This is well and good, but will I stick with it? Going back over my previous good-intention/half-finished forays into various types of development, I found the common thread among the failures/incomplete tasks was that I didn’t have a well defined end product that I was motivated enough to see through to the finish line.

I started learning Android apps because I thought that would be fun. I started writing a few different golf-related apps since I like golf. None of them were terribly interesting or at all unique so I learned the skill I wanted to learn (whether it be basic Android dev. or JSON calls or geolocation options or whatever) and stopped developing the app. Basically, I got the point where it was functional but I gave up when it was time to make it publishable. That means ironing out functionality, optimizing and making it look presentable. The one Android app I have published at this point was a completely unique app for a very small, specific audience. I saw it through, learned a lot and produced a reasonable looking product at the end of the day. Perfect? Far from it, but I relative proud of it as “My First App.” There are dozens of tweaks I want to make but I don’t have motivation given the 10 person audience.

So, I know my blocking points, do I have a plan to hurdle that for this Great Plan? Not really. I sit here having gone through most of the django tutorials and probably a couple of good days away from planning and attacking my first unique django web app. But I don’t know what the app will be. I have a few ideas but I have to better understand what, exactly, django provides and fit my idea into that framework.

If you’ve made it this far, thanks. I think the point to all of this is that if you want to get something done, identify concrete steps you can work on to achieve the goal. Also recognize what has held you back in the past and be prepared to push through that stage this time to see something through to completion.

Adding WordPress Into Existing Webpage

I wanted to slap a WordPress blog into my existing website.  I wanted it to get the full WordPress functionality and still have the same styles as the other pages on the site and use the same headers and footers.  Basically, I wanted it to look like you were still on the same website whether you clicked on “Blog” or “Projects” or “Home.”

Below is how I came to the solution I am using.  They are labeled loosely as “steps” but they are not exactly concrete “Do A then B then C then D then you’re done” steps and more of a recording of what I went through to solve the problem.  I will provide concrete actions within the steps if that is what you are after, but you might have to dig a little.

Step 1: Learning What Question To Ask

As is almost always the case, the first important hurdle to solving a problem is knowing what problem you want to solve.

I thought I wanted to “embed a WordPress blog into an existing website” so that’s what I typed into Google.  That led to a very official looking post on WordPress’s site telling me that with two short code snippets I would be displaying WordPress entries into my webpage in no time at all!  Until I tried it, it failed miserably and I re-read the post.  It was instructions for embedding WordPress into an existing PHP page.  Do people really hand-gen PHP pages all that often?  Maybe they do, I’m not web developer so I don’t know, but I didn’t/don’t/won’t.

So, what did I actually want to do?  I came up with “embed a WordPress blog into an existing HTML page.”  HTML being the important distinction here.  It turns out that this wasn’t exactly the right question to ask either, but it did get me pointed in the right direction.

Step 2: WordPress and the Actual Task at Hand

Backing up a bit, you have to install WordPress to use WordPress.  So do that.  I use DreamHost and they have an easy install for WordPress, it takes a few minutes total, most of that time is waiting for your database to come online.  I imagine most other web servers have the same option, if not a full WordPress install isn’t too difficult.  Come back when you have this done.

I installed mine at If I loaded that exact URL I would see the default WordPress layout with the “Hello World” post.  I didn’t want that, I wanted to have it’s content be WordPress blog postings but otherwise look like it the rest of my site.

It turns out, the way to do this (at least the way I found to do this) isn’t to adjust your existing HTML to reference WordPress posts, but rather to adjust WordPress to look like the rest of your site.  It seems like a mostly semantic difference, but it does fundamentally change the way you approach this task.

Step 3: WordPress Themes

WordPress separates the core WordPress-y stuff and the visual look into separate entities.  Most users won’t care about this distinction, but if you are diving into WordPress to try to change the way it looks at the HTML level, you will find this was an excellent choice by WordPress as you can tinker away with HTML, CSS, and JS while (mostly) ignoring the actual content of a WordPress blog.

WordPress uses themes to define the look portion of things.  Depending on whether or not you click a checkbox during installation, your WordPress blog might come with a dozen themes pre-installed.  Hundreds or thousands more are available with a few clicks.  Themes define everything about how a WordPress blog looks.

You can probably see where I’m going with this…wouldn’t it be great if there was a WordPress theme which looked exactly like the rest of your website so your WordPress blog fit in seamlessly?!?

Step A:  Reference Aside

I want to point out that I used Embedding WordPress into an existing website post to guide me through the process.  I got tripped up a little near the end but I eventually worked through it.  All following steps are my interpretation of that post, it is a very detailed post and you might want to try it out before reading the rest here.  If you run into issues maybe come back here to see if they were the same I was having.

Step 4:  My Very Own WordPress Theme!

So WordPress has themes which define everything about how the page looks.  And, unfortunately, nobody has made a theme which exactly matches the layout of the rest of my site, bummer.  The natural solution is to make your very own WordPress theme.

This is much less involved than it sounds because we are going to cheat.  FTP into your website, find the “themes” folder under your WordPress installation and pick one(from your WP install directory it is: ./wp-content/themes/).  It isn’t completely arbitrary which you choose because I won’t explain how to change every single look-and-feel value in this theme.  I wanted to keep my white background without having to think about it so I went with the default (“twentytwelve” when I did this) which is at least in the same vein as my website, making the process of adapting it to fit in a little smoother.  If I had chosen a dark theme with colorful background images I would have had more work to do to hack it down to my minimal website look.

Okay, you’ve chosen a base theme to start from.  Copy the contents of this theme into a new folder in the themes directory.  Say you put them into “mywebtheme.”  You need to now go into “mywebtheme” and change the theme to have a unique name so you can use the WordPress control panel to start using your new theme.

To change the name open the file:

At the top of this file will be some commented header information, change the Name to whatever you want it to be called and also add your own description.

Now your theme has its own name so you can tell WordPress to use this new theme by going into the WordPress control panel of your blog.

In WordPress control panel to to Appearance–>Themes.  You may have a long list of themes or a short list, depending on if you installed a bunch of defaults during installation.  Either way, find your new theme and make it the active theme for your blog.

Now go reload your blog.  It looks….exactly the same!  (If you copied the theme your blog was already using, if not it will at least look exactly the same as whichever theme you copied)  This might be true, but the important thing here is that it is your very own copy of another theme, progress!

Step 5:  Enough Already, Make It Look Like Mine

Alright, so what have we done so far.  We have installed WordPress onto your website, copied an existing theme and are now using that “new” theme.  Installing WordPress is obvious, but why did we copy a theme?  Because we now get to use that copy as a sandbox to try to make our WordPress page look like the rest of our website.  Fun!

Head into the bowels of WordPress themes by navigating in your website FTP to (from your WP install direction): ./wp-content/themes/mywebtheme/

For the most basic purposes you will only care about two files:  header.php and footer.php.

header.php defines the nice banner at the top of the page, with the title/subtitle, maybe an image and whatever else the theme has.
footer.php defines the footer, if any exists, for the theme.

I’m interested in these two pages because my website has a basic header (the page title on the left-ish side and then my Twitter link in the top right) and a basic footer (the intra-site links on the bottom).

I want to make the WordPress header and footer look like the header and footer on the rest of my site.

First, open header.php.  Import your CSS files so that when you add your HTML it knows where to look to define the style.  You can do this anywhere in between the <head> open and close tags in header.php.  I added him below an existing <link> tag.

Import your CSS by adding the line:

<link rel="stylesheet" type="text/css" href="../../../../../PATH/TO/YOUR/CSS/FILE.css" />

My exact entry, for example, is:

<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/main.css" />

You can add multiple CSS files (I had three I needed to add) and also reference any Javascript, images, icons, etc…you may need for your customization.  At the time of writing the only references I had were my CSS files.

Step B: Another Aside

Now is when I encourage you to experiment.  You now are deep in the throws of your WordPress header file with complete access to the CSS which defines all of the pages on your website.  Start adding some of your HTML from that old blog.html page and see what happens.  How does it interact with the existing HTML in header.php?  Which parts of the existing header do I need to keep around?  Being new to HTML/CSS when I was going through this, this is the stuff that interested me.  If experimenting is not your thing, I’ll cut to the chase now.

Step 6: The Chase

Start looking at the HTML inside of header.php, specifically what happens after the </head> tag. Ignoring the content for a second, it appears as though some of the tags don’t actually get closed in this file.  Where is </body&gt; and the </div> for the id=”page” tag?  It turns out, the way WordPress uses this file is actually to combine it with footer.php to create the page.  So if you open footer.php you see the </body> and the </div> <!-- #page --> lines.  Sneaky WordPress.

You don’t need any of the HTML inside of the <body> tag in header.php except for the <div id="main" class="wrapper"> tag. This tag, and the corresponding closing of it in the footer.php file, help define where the blog content/menus go so they must be left in so that your newly added HTML shows up properly.

So I removed everything else in the <body> section of header.php and copied in my old blog.html header information.  Since header.php is already loading in my CSS files, I don’t need to do anything else.  I reload and I see a header that is consistent with the rest of my website followed by the “Hello World” default blog entry.

The footer is a bit different because it doesn’t have all of the <head> information header.php does, it has some comments and then jumps right in to closing some of the tags from header.php.  I emptied out everything between the </div> for #main.wrapper and the <?php wp_footer();?> line.  This removes any footer that might have existed.  I copied my few lines of HTML in that place and  my WordPress theme now contained both my header and footer to match the rest of my site:  victory!

My complete header and footer PHP files when I was finished:


 * The Header for our theme.
 * Displays all of the <head> section and everything up till <div id="main">
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/main.css" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/blog.css" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/grid.css" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<?php wp_head(); ?>
<link rel="icon" type="image/png" href="../../../../../images/favicon.png">
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
 <div id="intro">
 <ul id="corner">
 <li><a href="!/chrisrmack">Follow Me!</a></li>
 <div class="row">
 <div id="title">Blog</div>
 <div id="main" class="wrapper">


 * The template for displaying the footer.
 * Contains footer content and the closing of the
 * #main and #page div elements.
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 </div><!-- #main .wrapper -->
 <div id="footer">
 <div class="row">
 <ul id="links">
 <li><a href="">Home</a></li>
 <li><a href="">Blog</a></li>
 <li><a href="">Projects</a></li>
 <li><a href="">Skills</a></li>
 <div id="text">Christopher R. Mack</div>
</div><!-- #page -->
<?php wp_footer(); ?>

And the look they produced:

Step 7:  There Is No Step 7

You’re done.  You have created your own custom WordPress theme by copying a reasonable starting point and manually editing the HTML so it fits in with the rest of your website.  In the end you didn’t embed WordPress posts into your existing page, you took the styles of your existing site and embedded them into a WordPress blog

If you want to go more in-depth or have a more complicated site theme, this becomes a bigger project.  But I think at this point it is all down to HTML, CSS, and JS, and if you’ve coded up a slick looking website you are probably very capable of doing the same within the WordPress files.

This was a pretty straightforward issue for my case.  My two main hurdles were knowing what, exactly, I wanted to do (or more precisely, knowing what was possible) and then knowing what HTML to chop out of the existing *.php files to get me where I wanted to be.  It isn’t very exciting that most of my learning here was related to WordPress and its themes, but at least I know.  I doubt I will want to get much more in depth on WordPress php files in the future, but I’m sure I will come back and revisit those header and footers as my site design changes.


The Beginning

This blog is mainly going to be a place for me to chronicle my adventures in web development.  My first post will be up shortly outlining what I had to do to embed this WordPress blog into my own site.       I will post about whatever side project I am working on.  Hopefully something I post will help someone else who ran into the same problems I did, it not at least I’ll have it for reference when I try to do the same thing 3 months from now only to find I’ve forgotten everything.