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

  1. Ugh…think I’m kinda/sorta getting through the first section of the tutorial. Then I’ve followed the directions for adding #wrapper to the style sheet. When I’ve checked the results, the footer moved to the right of the sidebar. If I reduce the browser window size, it kinda/sorta shifts most of the footer back to the bottom…but for the most part, the footer is to the right of the sidebar.

    What am I’m doing wrong?? Did this three times in a row, and I’m a bit paralyzed until I know how to fix this. Thanks!

    Reply

  2. One more thing…the footer’s yellow rectangle box is just below the header…far away from the footer, and no contents except for it interfering with the posts and sidebar texts. Clues??

    Reply

  3. Julie: I haven’t updated the guide for WP 2 yet, but it won’t make a lot of difference when it comes to themes as they have not changed much. I do intend to cover the new stuff in the future, and it will be based upon what’s already here (they haven’t changed things that much!)

    Velanche: Make sure the quotes in your HTML are the correct ones – they need to be straight ” and not ‘fancy’ ones. There’s a previous comment about this with more information.

    Reply

  4. THANKYOU! I’ve been looking forever for something like this, and your tutorial made customizing my wordpress theme so simple… I’m working on changing my entire site over to wordpress and you’ve saved me hours of bashing my computer trying to get things done.

    thanks again. =)

    Reply

  6. […] UrbanGiraffe » Dissection of a WordPress theme: Part 1 UrbanGiraffe » Dissection of a WordPress theme: Part 2 : 2005. 4. 22 추가. (따라해 ë³´ê³  있다. 훌륭한 선생님이다.) UrbanGiraffe » Dissection of a WordPress theme: Part 3 : 2005. 4. 30 추가. (이 강좌를 따라 테마를 만들어 ë³´ê³  있다. 사이드바 ì € 아래쪽에 theme switcherê°€ 있는데 xxiaa_testê°€ 바로 ê·¸ 결과물. 강좌가 진행중이라 테마 ì—­ì‹œ 미완성이다.) UrbanGiraffe » Dissection of a WordPress theme: Part 4 : 2005. 5. 20 추가. […]

    Reply
  7. Pingback: I am official station » I am station, I am official station…

  9. If it wasn’t for your tutorial(s), I would have given up on WordPress. I used all of them, the Blank Template, and the Codex to create my own weblog template. There’s still quite a bit of bugs, and it doesn’t quite work well in Internet Explorer, but I’m happy with the outcome.

    I’ve been trying to breakdown your Giraffe2 theme, but I’m afraid it far beyond me at this point. I was, however, able to figure out how to make two loops and create that “featured” post effect you have–the part caught my eye more than anything.

    I’m not sure how many times you check your weblog, but if you could take a look at mine and suggest some improvement methods, I would be eternally grateful.

    Amazing and helpful work here.

    Reply

  10. Trish: Thanks! A missing quote caught me out

    Matthew: From your website I can just see the result of your theme (as opposed to the theme code), so can only really judge the design and layout. It’s looking very clean and readable and and the only thing I can suggest is that the bottom posts have more left padding!

    Reply

  11. […] * Template Files * Stepping Into Templates * Stepping Into Template Tags * Template Tags * Developing WordPress Themes * The Loop in Action * Template Tag Layout in simple to read form (http://guff.szub.net/wordpress/template-tags/) * Anatomy of a WordPress Theme (http://boren.nu/archives/2004/11/10/anatomy-of-a-wordpress-theme/) * Templates and the is functions (http://boren.nu/archives/2004/10/16/templates-and-the-is-functions/) * Dissection of a WordPress Theme (http://www.urbangiraffe.com/2005/04/12/themeguide1/1/) […]

    Reply

  15. […] Questo documento è la traduzione della guida originale Dissection of a WordPress Theme realizzata da John Godley che ne è anche il detentore del copyright. Ogni riproduzione della pagina originale e/o di questa traduzione è subordinata al preventivo assenso dell’autore. – This guide is the translation of the guide Dissection of a WordPress Theme by John Godley who is the owners of the copyright. Any reproduction of the original page and/or the translated page is allowed only with the permission of the author. […]

    Reply

  17. Loving the guide, but am momentarily frustrated as my layout is totally wonky at the moment, and I’m not sure how to fix it (due to the code missing on page 6). Is there something temporay until server issues are resolvd?

    Reply

  20. […] Nu har jag bestämt mig…. Jag ska försöka göra ett eget tema..med tips frÃ¥n UrbanGiraffe. SÃ¥ nu har jag fixat en till wordpress-blogg. Det är lika bra att ha tvÃ¥, ifall jag sabbar nÃ¥gonting i mina tappra försök att fÃ¥ till koder och annat. DÃ¥ gör det inget att det blir fel, den här är ju intakt iallafall. I den andra kan jag dona bäst jag vill, för att fÃ¥ till layouten som jag vill ha det. SÃ¥ nu ska här css:as och testas och “ritas” i Photoshop och PSP. […]

    Reply
  23. Pingback: Avinash Meetoo: Blog » Blog Archive » Using my own simple Wordpress theme

  24. […] I’m feeling pretty proud of myself right now. After a couple of days of reading, pulling of hair and gnashing of teeth, I have finally gotten the basic layout I am looking for. By this time I almost have the information at Urban Giraffe memorized. I designed the graphics and worked up the style sheet with a few tweaks of my own based on what I learned in his Dissection of a WordPress theme. Oh, having the local server on my computer saved me a load of time and bandwidth. I also did a fair share of reading at the WordPressMU forums and Google also got a bit of a workout. […]

    Reply

  25. […] Seems it has been awhile since my last post, but I think you can see the progress I have made. Thanks to the wonderful information I found at Urban Giraffe and on the Word Press forums I have been able to design a new look for the site. I must say that up to this point I am pretty proud of myself. To be totally honest, I have only touched the tip of the iceburg on what can be done using Word Press. Over the next few weeks I hope to dig a bit deeper into the Codex and continue learning how to use this powerful software. […]

    Reply

  26. John:

    Outstanding! Very well written and precise. One question: what HTML / PHP IDE or editor do you use — see header.php screenshot in Removing Kubrick section (above).

    Reply

  30. Indespensable startup guide to custom theme design. Nice work. Spent 2 hours on the WP codex site trying to feel out a strategy for custom design, and 20 minutes here. Thanks for the article!

    Reply
  31. Pingback: DeStructUred Blog » Blog Archive » links for 2006-08-25
  36. Pingback: Wordpressing « Katherine Misegades

  38. […] want to learn modify your theme? you have to learn the structure of wordpress first. here(http://codex.wordpress.org/WordPress_Lessons) and also you can read those: 1)http://performancing.com/node/407 2)http://www.urbangiraffe.com/2005/04/12/themeguide1/ 3)http://punkprojekt.com/2006/02/21/wp-design-guide-part-one/ 4)http://paulstamatiou.com/2005/12/31/customizing-k2-part-2/ still more? go to google. […]

    Reply

  40. […] Remember when I said I was going to mosey over to the WordPress forums to look for help on creating themes and templates? Well, I did, and I was referred to this great site called Urban Giraffe. The author created a WordPress theme tutorial which I’ve been following. Although I’m not done with the tutorial (each lesson has mysteriously gotten more and more difficult & time-consuming for me), I’m learning a lot about how to handle some of the idiosyncracies of CSS that I’ve had trouble with, and of course, about the structure of the WordPress themes and templates. […]

    Reply

  45. I’m using this guide again to create another completly custom wordpress theme. I have had good success simply changing over similiar templates, but sometimes you have to think “outside the box” and use a non-convential structure. Modifying the default and very well built Kubrick theme has worked well for me in the past and I’ll be using this excellent guide to do it again. Thanks for writing it.

    Reply
  46. Pingback: The Toolbox - Wordpress Theme from Scratch
  47. Pingback: kbps » Blog Archive » Ta-Da
  48. Pingback: 冰古Blog » 解剖wpçš„theme－第一节

  49. Just wanted to thank you for putting in some time on this and doing an excellent job explaining it for us who are new to web coding and WordPress.

    Reply
  51. Pingback: What Katie Scrapped » Blog Archive » Lookie, lookie - a new blog!
  52. Pingback: Technical Related Notes » Blog Archive » links for 2006-10-30
  56. Pingback: After the Net » Blog Archive » links for 2006-12-05
  57. Pingback: wordpress模版设计指南 - 博客联盟

  58. […] My original theme was Green Marinée template, with a little of experience (from reading the preceding resources) I modify it and added a new features, you`ll know about them when I release the theme for public(very soon)!Oh! I forgot a great resource!!John (the guy who learn you how to run WordPress on Computer) also posted a fantastic guide about how to build a theme from scratch with title “Dissection of a WordPress Theme” which also can be downloaded as PDF file from here! […]

    Reply

  59. […] My original theme was Green Marinée template, with a little of experience (from reading the preceding resources) I modify it and added a new features, you`ll know about them when I release the theme for public(very soon)! Oh! I forgot a great resource!! John (the guy who learn you how to run WordPress on Computer) also posted a fantastic guide about how to build a theme from scratch with title “Dissection of a WordPress Theme” which also can be downloaded as PDF file from here! […]

    Reply
  60. Pingback: GfxDizayn » WordPress temaları nasıl yapılır?

  62. […] WordPress temaları nasıl yapılır? Ocak 5, 2007 Etiketler:Wordpress temaları hakkında ne zaman araÅŸtırma yaparsam, ya firefox favori linklerim uçuyor, yada sakladığım dosyaların yerini unutuyorum. Bunun için bir baÅŸlık altında linkleri toplamaya karar verdim. HTML ve CSS ileri düzey bilgi sahibi olduÄŸumuzu varsayarak yola çıkalım:UrbanGiraffe Detaylı anlatımChrisJDavisTextoBir link daha […]

    Reply
  64. Pingback: tildeChris » Templating in Joomla and Wordpress

  66. […] 「Dissection of a WordPress theme: Part 1」を著者の John Godley から許可をもらって翻訳しました。 WordPress のテーマについての初心者向けの解説です。オリジナル版は現在第三章（パート３）まで出ています。 […]

    Reply

  67. quite like the tutorial, it’s a great way to get up to speed on things. The one suggestion I would make is to add links to parts two, three and four from within the Conclusion section.

    Reply
  68. Pingback: Web design to increase back links | Increseo Search Marketing

  69. I’ve been looking forever for something like this, and your tutorial made customizing my wordpress theme so simple… I’m working on changing my entire site over to wordpress and you’ve saved me hours of bashing my computer trying to get things done.

    thanks again. =)

    Reply

  70. I think i messed up. Everytime I go to the dashboard to test the style, it doesn’t show and at the bottom it says that the stylesheet is missing for MonkeyMagic. HELP!! What did I do wrong and how can I fix it.

    Reply

  71. Thank you so much for this site! I have completed all of the steps (that worked without pulling my hair out) up to the Sidebar an dmy questions are this: (I hope I don’t sound like a dummy :O) I will WRITE IN CAPS THAT WHICH I DON’T UNDERSTAND ok?

    The sidebar is contained within the file sidebar.php. If we take a look here we find a lot of code, and we can ignore all but this summary:

    … sidebar code …

    I’M ASSUMING WE DON’T ERASE EVERYTHING BETWEEN (I DIDN’T)

    Everything is cleanly wrapped inside an HTML div section with an ID of ‘sidebar’. This is just what we need, as it means we can change the appearance of the sidebar by simply adding appropriate styles in the CSS file, and without touching a single line of code in sidebar.php.

    So, edit style.css and add the following style after the header:

    SO DOES THIS MEAN WE GET OUT OF THE SIDEBAR EDIT AND GO TO: STYLE.CSS? mINE DOESN’T HAVE ONE THAT SAYS STYLE. HOWEVER THEIR IS ONE AT THE TOP OF THE LIST THAT SAYS STYLESHEET, iS THIS THE SAME AS “sTYLE” AND WHEN I GO IN THERE I DON’T SEE WHAT YOU MEAN “AFTER THE HEADER” COULD YOU PLEASE ELABORATE? I TRIED PUTTING THE STYLE IN BOTH THE SIDEBAR AS WELL AS THE STYLESHEET, HOWEVER I DIDN’T SEE “THE HEADER PART”

    pLEASE DON’T LAUGH AT ME LOL THANK YOU FOR ANY HELP YOU CAN GIVE ME

    Reply

  74. […] Also Check out the following links which can help you in Designing your own WordPress themes. http://codex.wordpress.org/Theme_Development http://www.cypherhackz.net/archives/2006/12/13/make-your-own-wordpress-theme-part-1/ http://lorelle.wordpress.com/2006/05/25/canvas-wordpress-plugin-build-your-own-wordpress-theme/ http://www.urbangiraffe.com/2005/04/12/themeguide1/ http://www.jeffhendricksondesign.com/create-your-own-wordpress-theme-from-any-css-design-layout/ […]

    Reply
  75. Pingback: My Empty Mind » Blog Archive » Creating Your First WordPress Theme
  78. Pingback: The Official WordPress Thread - WickedFire - Internet Marketing Affiliate Webmaster Forum
  79. Pingback: Articles: How To Create a Wordpress Theme at WPThemesPlugin.com - Wordpress Themes | Plugins | Blogs
  80. Pingback: Ruth Stalker-Firth » Blog Archive » WordPress groupie: blogging, fiddling, loving it
  83. Pingback: sá»­a code theme « haodalat

  84. craftsman: Did you put the special header at the start of style.css?

    Sandy: Yes, edit style.css and leave the sidebar. The header is the bit of writing at the top of the file telling you about the theme. The style shouldn’t go in the sidebar, just style.css

    Reply

  85. hello. I use wp and I want to make my theme so I read this article.
    I think it’s very good article for wp beginner. so I want to translate this lesson for korean wp user. could you agred it? Thanks

    Reply
  86. Pingback: Create a wordpress theme from scratch « Fighting with CSS questions - a way from newbie to master CSS

  88. Hi,

    In the step where we edited the styles.css (in the new folder i.e.monkeymagic) I was just left with
    /*
    Theme Name: SuccessDating
    Theme URI: SuccessDatingTips.com/
    Description: Theme dissection example
    Version: 1.0
    Author: David Tupes
    Author URI: SuccessDatingTips.com/
    */
    ....
    so where do I put the

    #sidebar
    {
    float: right;
    width: 190px;
    }

    ???

    thanks,

    David

    The instructions say ‘after the header ‘

    But the header was cut out of style.css in an earlier step?

    thanks,

    Reply

  90. Is it possible to edit the PHP so that the most recent comment is at the top of the list rather than the bottom>

    Thanks,

    Allen

    Reply

  91. Heyjin, sure go ahead and translate this into Korean. If you notify me when you’ve finished I’ll make sure to provide a link from here to the translation.

    David, put the #sidebar code in that file. Location isn’t important, provided the head section always comes first.

    Reply

  93. Hi,
    First of all, I have to say that this is a great turorial. 🙂 But I think there is some mistake. In deleting the code, don’t you also have to delete this line too –
    " type="text/css" media="screen" />

    ?
    I didn’t get it the first time, but when I deleted this it became OK.

    Thanks anyway!

    Sarat

    Reply

  95. John, You have written undoubtfully the best wordpress template tutorial. I wish there were similar tutorials on the web for different apps.

    Thank You

    Reply
  97. Pingback: The Adventures of Slightly Taller Than Average Man » Links for May 21st
  98. Pingback: Happy Hour with Mark McKay » Blog Archive » Blog Don’t Like Ugly | 3

Leave a comment

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