De-mystifying WordPress

Even if you buy a WordPress theme, chances are that pretty soon you will want to change, add or delete something. You can dip into your wallet every time, or you can get your head around how the scripts work. At first glance, the code may seem different and confusing, but look more closely and you will begin to see just how easily adaptable WordPress is.

After you unzip your WordPress download on your PC, you will see a file structure like the one above. When you have done the Famous 5-Minute Install chmod 666 all the PHP files and the css file in the default directory, so that they can be edited. Inside your WordPress admin area, select the WordPress Default theme for editing.

I do not recommend that you attempt to do more than minor editing directly into WordPress. This is an entirely personal preference, but I work from a set of files on my PC, using my regular HTML editor and after each change, copy and paste the code into WordPress. It’s more convenient than non-stop FTP’ing; I can look at the results as soon as I have saved the new code (to open your site in a new window, right-click on the “View Site” link at the top of your WordPress screen); and if I don’t like what I see, I can easily undo the changes or make more. Most importantly, at some point you will surely paste over the wrong file. Local copies make that an inconvenience and not a disaster.

Down the right side of the screen is a list of file names: Stylesheet, 404 Template, Archives and so on. Click on the “Main Index Template” link to pull it into the editing area and (if you are working the way I do, open it in your HTML editor too). This is what you will see and it’s okay to say “Huh?”.

The good news is that although WordPress blogs are driven by PHP, you do not need to understand any PHP at all. All you must know is that <? marks the beginning of a placeholder and ?>, the end of one. In between, is the code WordPress needs to work its magic.

Take a look at the areas I have highlighted in color. They are all get commands, which tells WordPress to process and then insert a template into that spot. Right now the templates are header, sidebar and footer. Look at that list on the right of your WordPress screen and there they are, templates for the top, side and bottom of all your pages. There is also searchform in that list, look down near the bottom of the code you have open in your editor, and find include blah blah… searchform.php. This is the regular PHP command with which you may already be familiar and WordPress also uses it to pull in templates.

Look at the code again, focusing on the styles identifiers used by the divisions. As they should, they should give you heavy clues as to what they contain: content; post; postentry; postmetadata; and navigation. Now look inside the divisions for more giveaways like the_title, the_time, the_content. After that, there isn’t much left on the page. Some conditional statements (while and if) wrapped around a few sections and that’s about it.

Take a look at your new blog and note that information about the category to which the post belongs appears below the post. Now cut the paragraph that I have highlighted above and paste it back, above div class=”entry”. Paste the whole page of code over the code in your WordPress editor and save. Look at your site again. That’s how easy it is to make changes to the “running order” of your pages.

The Loop

Look again at the last illustration, it begins with if (have_posts()). The section illustrated here is what WordPress calls The Loop and it is exactly that: a loop within which a list of commands are repeated so that several posts can be displayed at one time. It checks whether any posts exist and if so, displays them. If not, an apology and search form are displayed. The important thing to remember about The Loop is that although you can move things around as easily as I just indicated, you must keep items which you want to display for every post inside The Loop. By extension, if you only want to show something once on a page, it must be placed outside The Loop, above the while statement or below the endwhile.

Examine the other templates in the same light, experiment with them if you wish. All we are doing at this point is de-mystifying the way that WordPress builds a site. WordPress is not without flaws, but it does illustrate very well how big, apparently complex sites can be made from just a few simple components. It also throughly applies the principle of separating content from design. You will not find a dimension or color anywhere in the templates: they are all contained within the single Stylesheet which shows at the top of that list of files and to which I shall return in another article.

HINT: Some good-looking adult blog themes are on sale, but take a look at the way they are coded before you buy. Most use tables, producing a horrible porridge of old-style coding mixed with the modern (X)HTML/CSS which WordPress uses. I’m not someone from Planet Geek trying to spread the good word. This sloppy coding not only slows sites down and makes them less search-engine friendly, but should you want to change anything later, you are likely to find the job much harder. If your designer of choice is unable to use CSS, have him do your design and then either convert it to a WordPress template yourself or have someone do that for you.

Leave a Comment

Tags: , ,

Related Posts