Dissection of a WordPress theme: Part 1

Translation:

Resources:

Life as a WordPress blogger has become remarkably easy. If you can hold a mouse and follow instructions then you’re most of the way towards carving out your own niche on the internet. A fresh installation gives you a powerful and attractive system with minimal effort, and with a little luck you can be blogging in under half an hour.

Despite the availability of hundreds of themes, and the general goodness of the default Kubrick theme, sometimes you just want to give your blog that personal touch, and the only way to do this is by going under the hood and having a look around.

A month in to running a WordPress-based website and I find myself doing the very same thing. None of the themes were exactly what I was looking for, and after investigating the internals of WordPress I realised it was a lot more involved than it initially appeared. I could certainly imagine a beginner being overwhelmed by the mass of acronyms and incongruent technologies.

With this in mind I decided to write a guide that would help not only myself, but might also help others who have been put off trying to experiment with WordPress. I make no claims of being a style guru and will rely on common sense and basic design principles.

In writing this I will assume a rudimentary knowledge of HTML and CSS. I will attempt to annotate all the important parts. The guide will begin slowly, but should speed up once a level of comfort has been reached.

Rather than starting a theme from scratch, and having to explain everything, I will instead focus on dissecting an existing theme and explaining parts as they are required. From a personal point of view, I find it easier to learn things by focussing on the small details, and ignoring everything else. In this instance I will be using the default WordPress 1.5 theme Kubrick.

Diagrams will be used where necessary, and annotated code will be available. The different stages will be available to download using the links in the menu on the right of each page.

The first part of this guide is split into two steps, and will result in a basic site with a minimum of style – it will be fully usable, if not particularly attractive. Future guides will dissect the theme further, and make it look more attractive.

Step 1: Pulling it apart

The first step is to make a copy of the default theme. All themes are found in the wp-content/themes directory. Here Ive simply copied the default theme and renamed it to MonkeyMagic:

copying

Cleaning the theme

Now we need to clean the theme in order to make it our own. Every theme has a piece of information that tells WordPress what the theme is called, who wrote it, as well as containing other details such as version and description. This information is displayed by WordPress in the administration presentation section, and a theme will not work without it. The information is defined at the start of the file style.css. Its important that we dont get confused with the existing Kubrick style, so the best thing is to delete the style.css, and create a new one:

/*
Theme Name: MonkeyMagic
Theme URI: http://urbangiraffe.com/
Description: Theme dissection example
Version: 1.0
Author: John Godley
Author URI: http://urbangiraffe.com/
*/

Make sure you save this in the MonkeyMagic theme directory, and not the default one!

Removing Kubrick

Next we need to remove some Kubrick specific styles in the file header.php. Dont worry about the details here, its just necessary we lose all styles.

Delete from line 17 to 48 (inclusive).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <style type="text/css" media="screen">

        /* BEGIN IMAGE CSS */
            /*  To accomodate differing install paths of WordPress, images are referred only here,
                and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
                not, then go right ahead and delete the following lines, and the image files. */

        body        { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); }    <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
            #page       { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; } <?php } else { // No sidebar ?>
            #page       { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } <?php } ?>
            #header     { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
            #footer     { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}


            /*  Because the template is slightly different, size-wise, with images, this needs to be set here
                If you don't want to use the template's images, you can also delete the following two lines. */

            #header     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
            #headerimg  { margin: 7px 9px 0; height: 192px; width: 740px; }
        /* END IMAGE CSS */


        /*  To ease the insertion of a personal header image, I have done it in such a way,
            that you simply drop in an image called 'personalheader.jpg' into your /images/
            directory. Dimensions should be at least 760px x 200px. Anything above that will
            get cropped off of the image. */

        /*
        #headerimg  { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}
        */

    </style>

    <?php wp_get_archives('type=monthly&format=link'); ?>

    <?php wp_head(); ?>
</head>
<body>

<div id="page">


<div id="header">
    <div id="headerimg">
        <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
    </div>
</div>
<hr />

432 comments

  4. Pingback: radioball dot net » Dissecting WordPress

  7. Customizing WordPress Themes: A Guide

    I often post some of my experiences in dealing with customizing aspects of WordPress and it’s themes. Kubrick generates a lot of interest as it was ported to be the Default Theme for WordPress 1.5…and 1.5 has become wildly popular. When you first …

    Reply
  10. Pingback: WordPress at Pierce College | News Archive | for theme development
  12. Pingback: My Name is Mandrake » Designing your own WP theme
  14. Pingback: inforedesign » Blog Archive » Dissection of a WordPress Theme
  15. Pingback: rockersworld.com » Blog Archive » Wordpress Themes
  17. Pingback: Colorado Contemplations - Journal » Blog Archive » Dissection of a WordPress Theme: Part 1
  19. Pingback: Sample the Web » Dissection of a WordPress Theme: Part 1
  20. Pingback: www.kyid.net » Blog Archive » Dissection of a WordPress Theme: Part 1
  21. Pingback: How To Blog
  22. Pingback: Taking a Different Path » Blog Archive » Dissection of a WordPress Theme
  24. Pingback: WordPress Italy » Archivio Blog » Sezionamento di un tema per WordPress
  25. Pingback: WordPress Italy » Archivio Blog » Sezionamenti italiani

  26. Great! At last someone is explaining in straightforward language how WP is put togther. WP is a great tool but it’s sometimes assumed that all users know more than they do. I’ve spent hours trying to find something like this.

    Very much looking forward to the next sections.

    Reply
  27. Pingback: LaVelleWeb » Blog Archive » How to create a wordpress theme
  30. Pingback: 冰古Blog » 解剖wpçš„theme－第一节
  31. Pingback: :: Qbic ::

  35. You can achieve this using just stylesheets, leaving the template files untouched and keeping the content at the top of the HTML (good for accessibility and Google):

    #content {
    float: left;
    margin-right:195px;
    }
    #sidebar {
    float:left;
    width:190px;
    clear:right;
    }
    #footer, #header {
    clear:both;
    width:100%;
    }

    Of course, you might want to edit out those tags or switch them off in the CSS:

    hr {
    display:none;
    }

    Reply

  36. Excellent disection – this should be added to the WordPress Codex ASAP! Far better than anything in there.

    As for my previous comment – I should have finished reading – you deal with the tag better by moving it.

    Reply

  38. I’ve been digging around for a good guide on changing templates — thank you! I need to modify my WordPress default installation as well as a Mediawiki site I’m in charge of. This will give me a great place to start.

    Reply
  40. Pingback: Photo Matt » WordPress Theme Dissection

  41. Boy, catching this info would have saved me some major headaches- from slamming my head repeatedly against the wall. I can’t help but add that beginners and non-beginners alike would also be helped tremendously if people commented their template code!

    Sorry… just had to get that one off my chest.

    Reply
  47. Pingback: ecto tryout ≈ Blog Archive ≈ i don’t know

  49. Let the Remodeling Begin

    One of the first things I need to do is tweak this site’s theme and today I found just the thing I need, the start of an excellent primer on building WordPress themes….

    Reply
  54. Pingback: Taking a Different Path » Blog Archive » Dissection of a WordPress Theme - Part 2
  59. Pingback: Literal Barrage » WordPress Theming Help

  60. Hi, I`m tai.
    Thank you for the nice guide! I`m not a beginner, but it is still useful for me and actually I`ve enjoyed your article. I think your guide is very useful for other Japanese WordPress users too, so can I translate it to Japanese and put it on my site (or somewhere like Japanese Codex )?

    Reply
  61. Pingback: Craig’s work blog » Blog Archive » Turning a UF Web template into a Wordpress theme
  62. Pingback: TheSelfStarters.com » Blog Archive » Urban Giraffe..no it’s UrbanGiraffe
  63. Pingback: 小隆網管日誌 » Blog Archive » Dissection of a WordPress theme

  64. Ta-Da

    I’d been meaning to teach myself enough css, php, and sql to finally use WordPress, a powerful, flexible blogging utility, certainly moreso than Blogger. The process was faster than I had expected, and I’m really pleased with the results and looking…

    Reply
  71. Pingback: Working Blogger
  80. Pingback: Cyxxon.com » Blog Archive » Styling this blog

  81. Holy cow!! Following your instructions make designing wordpress themes a whole lot easier now!! Thanks soo much for writing this!

    Reply
  82. Pingback: hyperLunk » Blog Archive » Dissection of a WordPress theme
  83. Pingback: civilization at okanogan1.com » Site Mods
  85. Pingback: Grant Palin » Blog Archive » Useful WordPress Resources

  89. hello! thank you for the tutorial, I tried designing my Test wordpress page and there are some lay-out problems. The sidebar is not properly aligned. The footer is not in its proper location as well. And also look at my search at the side bar. thanks, hope you could help me with those small problems. Ü

    Reply

  91. Erick: I had a look at your website and couldn’t see any of the problems you mentioned – did you fix them already?

    sxz: That doesn’t sound good! Everything seems to be fine now, so the server must have been having problems earlier. Hopefully it won’t happen again anytime soon.

    Reply

  94. Hi Fuzzit. Yeah, I think you deleted too much from the stylesheet – there are no styles at all! You’ll need to add a style for the sidebar. If you’re not sure if the style is affecting it then the best technique is to give it a background colour so you can see exactly what is happening:

    #sidebar
    { background-color: red }

    It makes it a lot easier when you can see the dimensions of the box.

    Reply
  96. Pingback: Ramblings @ AndresPerales.com » Blog Archive » The Layout
  100. Pingback: Fine tuning the world :) » Done messing up Wp design. ;-)

Leave a comment

Your email address will not be published. Required fields are marked *