Customizing Your First WordPress Theme

For those who wants to customize a WordPress Theme for themselves, the best place to start your experiments is the default theme that comes with your WoprdPress Installation. The default WordPress Theme has all the requirements for the latest version of WordPress and it is always updated in tandem. So you can rest assured that any Themes modified using the default theme as the base will be compatible with the latest version of WordPress.

There are, however a few shortcomings in the default theme which I think is left out on purpose so that users have a chance to customize the Theme to their preference. This makes it a perfect practice ground for anyone who wants to learn how to customize a WordPress Theme without having to learn the codes from scratch.

Adding Sidebar To The Single Post Page In The WordPress Default Theme.

The most obvious thing missing in the default theme is of course the sidebar in the Single Post page. To make the Single post page exactly the same as the Home page with a left sidebar takes only 2 copy and paste steps. To better understand the structure of the default Theme, you first have to look at the Stylesheet.

Inside the stylesheet php you will find these 2 declarations. “narrowcolumn” and “widecolumn” . Both this column has the same width except they are aligned differently. Not going into too much details, the narrowcolumn attributes are used for the Home page with a sidebar and the widecolumn attributes are used in the Singles post page without the sidebar. They both are actually the same thing and the only difference is the columns, which in this case is the content area, are made to stay on the extreme left in the Home page to accommodate the sidebar, while the same column is made to stay at the center in the Singles Page becuase there is no sidebar.

To bring the sidebar into the single post page will naturally mean we have to make the column go to the extreme left. No worries though. We do not have to add any extra codes. All we have to do is to use the same layout attributes used in the Home page for the Singles page. To do that all you have to do is to copy and paste the functions from the main Index php to the Single php.

Open the Main Index php and look for this line of codes located at the top of the file. Copy this piece of codes.

<div id="content" class="narrowcolumn" role="main">

Next, open your Single php. Look for this line of codes, also at thetop of the page

<div id="content" class="widecolumn" role="main">

Simply highlight and paste the codes from the main Index php over this line. The codes will now be replaced by the same codes in the main Index php.

Next you will need to “call” the sidebar into the Single post. Again open your Main Index php, scroll down until you find this line:

<?php get_sidebar(); ?>

Highlight and copy.

Go back to your Single php file. Scroll down until you see this line at the bottom most of the file:

<?php get_footer(); ?>

Immediately BEFORE that line, paste in the codes you copied just now.

Update File, refresh your Single page and you now have a Single Post page that looks exactly like the Home page.

You have now successfully done a small and simple customization on a WordPress Theme. It will give you a nice sense of satisfaction and boost your confidence of doing bigger things.