WordPress Themes

WordPress users can take advantage of an almost infinate variety of free theme designs or can choose amoung and equal number of professional designs. Any one of these can be easily installed by downloading the theme, uploading it’s folder to the theme directory and using the theme administration page to activate it. For those with sufficient knowledge of web design you may be able to create or alter an existing theme that would enable you to integrate a WordPress blog into an exiting site. With that in mind we will try to explain some of the basic elements that make up a WordPress theme.

A basic understanding of XHTML, CSS and PHP is essential to this undertaking. If you need to brush up on this knowledge you can do so at the W3 Schools site: http://w3schools.com. If not you should be satisfied to make to with the free themes you can find at WordPress Themes Directory. Editing existing themes, to a lesser extent, will still require this knowledge. Should you do so you will want to document your changes as you may have to undue them when updating your WordPress installation.

WordPress Theme Editor

Here you have an excellent interface to edit an existing theme. Here you can edit the templates for the main index, sidebar, header, footer, theme functions, CSS and other elements for the theme. What you have to work with will depend on the complexity of the theme you have selected. Nearly all will contain those files mentioned above but this is something you should examine before selecting a theme to use as your base. Be sure do document your change in case they need to be undone.

As an example we wanted to change an “Almost Spring” theme to accommodate a page wide AdSense space across each single page with an addition that looked as follows:

/* google ad attop each single post template */
<script type=”text/javascript”><!–
google_ad_client = “pub-xxxxxxxxxxxxxxxx”;
/* 728×90, created 12/7/07 */
google_ad_slot = “xxxxxxxxxx”;
google_ad_width = 728;
google_ad_height = 90;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Problem with that is the search box in our sidebar covered the ad at the top of the page. To remedy that we increased the margin at the top of the side bar specified in the site CSS. That edit required one simple change from 0 to 65 as follows:

/* sidebar top margin changed to 65px in sidebar css */
#sidebar {
float: left;
margin: 65px 20px 0 20px;
padding: 1.8em 0 0 0;
width: 190px;
font-size: 0.9em;
display: inline; /* IE double margin bug fix */
}

Not rocket science at all but you may think so if you don’t properly document you edits and find it necessary to undo them. You might want to keep a list of changes made and the modules involved and save them in a text file on you site. At some point you’ll be glad you did.

WordPress Theme Construction

Creating an original theme requires a greater knowledge of WordPress structure that forms the basis for your WordPress installation. With the default theme you have about 20 files. If you have sufficient knowledge of XHTML, PHP and CSS you can gain a great deal of knowledge about how WordPress generates and formats output that will enable you to create your custom theme. The “index.php” page in your root directory will read that themes have been set and require the “wp-blog-header.php” file in the same directory. From there your going to show whatever is set as your theme. The files used for your default theme are located at the “/wp-content/themes/default/” sub-directory. The new theme you create should be placed at “/wp-content/themes/yourtheme/” to be selectable within WordPress.

Leave a Comment

You must be logged in to post a comment.