MetaToast.com

The availability of thousands of free themes is one of the most beautiful things about using WordPress as your Content Management System. Incredible as it may seem, you will probably never find a theme that is exactly what you want. Not to worry though, personalizing a theme to look and behave like you want is pretty easy to do.

Some reasons why you might want to hack your theme:

• Remove the developers Adsense code (that’s right, they do that sometimes)
• Include your Adsense code just where you want it
• Insert Google analytics code
• Remove unwanted items from your sidebar
• Add items to your sidebar (an RSS feed chicklet for example)
• Change font sizes, styles, or colors
• SEO – you might need to change your page title tags to h1 for example
• To include next post/last post links
• Change the 404 page to something more helpful than “page not found”
• Some plugins require you to insert code snippets

TIP
To be quite honest this floating comment box stretches my competency at CSS, but adding a feature like this doesn’t really require you to understand much of the underlying mechanism. Just use your browser to view the page source and search for a more or less unique phrase like “TIP” for example. Once you know that HTML uses opening - <tag> and closing - </tag> tags it’s pretty easy to swipe a code snippet and repurpose it.

The first thing that you should do before you start hacking on a theme is to find one that is already as close as possible to what you want. The easiest things to change are colors and images, so when you’re choosing a theme pay more attention to the structural layout and behaviors – number of columns, number and location of sidebars, fluid or fixed widths, etc.

When you find a theme that is as close as possible to what you want, upload and install it on your site and give it a thorough test drive before you start your modifications. Once you modify your theme the mods become a part of it, if you switch to a different theme you lose all of your changes.

Next, back up your working theme early and often. You can do this any number of ways, from copying the code and pasting it into a local file, to FTPing a copy of the entire theme directory - pretty slow and cumbersome. However you do it, just do it.

Disable any caching plugin that you have installed – such as the highly recommended WP Cache. If you don’t do this your changes won’t take effect until the cache expires minutes or hours later. I did considerable head scratching until I figured this out.

Now open your WordPress administrative interface and on the top menu click Presentation>Theme Editor (you should have already activated the theme that you want to hack on). You will see a code window on the left and a list of the links to the theme files on the right. Even if you don’t know anything at all about HTML, CSS, or PHP or any other code it isn’t too hard to figure out what is going on. The file link names are fairly self explanatory, but FYI here is a list of the files that you might find in the Theme Editor:

• ie6.css – Augments the main stylesheet when the browser is IE 6
• ie7.css – Augments the main stylesheet when the browser is IE 7
• Stylesheet - The main style sheet - controls appearances and behaviors of elements on all visible pages. This is where you go to change font styles, sizes and colors, as well as most stylistic elements like bullets or page layouts.
• Header – Configuration for header elements on all visible pages/posts
• Comments - configures the appearance of comments
• Search Results - configures the appearance of search results
• 404 Template - configures the appearance of the 404 page that displays when a page is not found.
• navigation.php - on this particular theme this only has the code for the next post / previous post links
• Page Template - configures the appearance of “static” pages (FE - about, contact, sitemap)
• Archives - configures the appearance of the main archive pages
• r_sidebar.php - the right sidebar of course
• Archives - configures the appearance of monthly archive pages
• Main Index Template
• functions.php – I don’t know. Looks technical.
• Single Post - configures the appearance of single post pages
• searchform.php - configures the appearance of the search form
• l_sidebar.php - configures the appearance and contents of the left sidebar
• Footer - configures the appearance and contents of the page footer
• Sitemap - configures the appearance of the user sitemap

Some themes will have extras, or be missing files that I’ve listed, but typically they will be just as easy to figure out.

Now, lets say for example that you want to change post title headings from h2 to h1 for on page SEO purposes. Select the “Single Post” file from the list of theme files on the right. Now, look through the code for the title heading. Make the changes and then click on the Update File button. Now view the site in another tab and check out what your change has done. If you like it - great, if not - try again. If you make a horrendous mistake, then restore from your backup.

That’s right, at this level it’s trial and error, but luckily WordPress code is usually very well organized, and commented, and not at all hard to figure out. All of the things on the list above can be accomplished with a little bit of effort even if you don’t know a single line of code.

Tags: Setting up Shop //