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).

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head profile="http://gmpg.org/xfn/11">
  5.     <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  6.  
  7.     <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
  8.  
  9.     <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
  10.  
  11.     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
  12.     <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
  13.     <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
  14.     <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
  15.     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  16.  
  17.     <style type="text/css" media="screen">
  18.  
  19.         /* BEGIN IMAGE CSS */
  20.             /*  To accomodate differing install paths of WordPress, images are referred only here,
  21.                 and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
  22.                 not, then go right ahead and delete the following lines, and the image files. */
  23.  
  24.         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())) { ?>
  25.             #page       { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; } <?php } else { // No sidebar ?>
  26.             #page       { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } <?php } ?>
  27.             #header     { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
  28.             #footer     { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
  29.  
  30.  
  31.             /*  Because the template is slightly different, size-wise, with images, this needs to be set here
  32.                 If you don't want to use the template's images, you can also delete the following two lines. */
  33.  
  34.             #header     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
  35.             #headerimg  { margin: 7px 9px 0; height: 192px; width: 740px; }
  36.         /* END IMAGE CSS */
  37.  
  38.  
  39.         /*  To ease the insertion of a personal header image, I have done it in such a way,
  40.             that you simply drop in an image called 'personalheader.jpg' into your /images/
  41.             directory. Dimensions should be at least 760px x 200px. Anything above that will
  42.             get cropped off of the image. */
  43.  
  44.         /*
  45.         #headerimg  { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}
  46.         */
  47.  
  48.     </style>
  49.  
  50.     <?php wp_get_archives('type=monthly&format=link'); ?>
  51.  
  52.     <?php wp_head(); ?>
  53. </head>
  54. <body>
  55.  
  56. <div id="page">
  57.  
  58.  
  59. <div id="header">
  60.     <div id="headerimg">
  61.         <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
  62.         <div class="description"><?php bloginfo('description'); ?></div>
  63.     </div>
  64. </div>
  65. <hr />

Help me to save time by reading these instructions!

If you are asking a question please read the FAQ to see if it has already been answered. All support questions should be directed to the support forum. Thanks!

1 2 3 4 5 6Next page »
Reply now | Feed

Comments (page 5 of 5)

Page: 1 2 3 4 5
  1. #28526
    heyjin :

    Apr 27, 2007 2:45 am | Reply

    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

  2. #28647
    JoshStauffer :

    Apr 29, 2007 5:48 pm | Reply

    Very simple to follow. Great work & thank you!

  3. #28845
    David :

    May 1, 2007 7:31 pm | Reply

    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,

  4. #28999
    Allen :

    May 2, 2007 11:56 pm | Reply

    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

  5. #29012
    John( author ) :

    May 3, 2007 4:13 am | Reply

    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.

  6. #29617
    Sarat :

    May 14, 2007 11:50 am | Reply

    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

  7. #29778
    Shinobi :

    May 18, 2007 7:18 am | Reply

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

    Thank You

  8. #29899
    John( author ) :

    May 21, 2007 12:20 am | Reply

    Sarat: I'm not sure which part you are referring to

    Thanks Shinobi!

  9. #30037
    radyo :

    May 23, 2007 5:19 pm | Reply

    It worked for me. You have to delete everything between the tags, then, don’t forget to update.

  10. #30088
    Carol :

    May 25, 2007 6:06 am | Reply

    Very useful. Thank you for the guide. I've been looking for a simple guide to tweak my WP theme and now I found it.

  11. #30166
    Donna :

    May 26, 2007 4:02 pm | Reply

    I have been studying different themes for days now, and I notice that many WordPress pages take a really long time to load, including this one. Is that because of the comments on each page, or is WP really such an annoying beast? Thanks!

  12. #30240
    diogenes_beta :

    May 27, 2007 11:58 pm | Reply

    so I've been following along with this guide, and when I implement step six, I followed the instructions exactly. But no changes are made. I then checked the source code for the HTML output and it appears that the sidebar is still at the bottom of the code, as if the get_sidebar() line were never moved. Then I go check out the PHP of index.php in the theme directory, and the function is at the top (and not at the bottom) where it should be. Any ideas as to what I'm doing wrong? It seems to be working pretty well for other people. The site is being hosted by dreamhost, if it matters.

  13. #30246
    John( author ) :

    May 28, 2007 1:31 am | Reply

    Donna: A variety of reasons. The host may be slow, it may be geographically far away from you, your internet may be slow, the page may be big etc

    Diogenes: Check that your browser cache is cleared. Also check that you are changing the correct file. You can both of these by inserting some text (anything) into index.php and verify that it appears in your browser.

  14. #30272
    diogenes_beta :

    May 28, 2007 1:00 pm | Reply

    clearing the browser cache has no effect. also, I'm quite positive I am changing the correct file (index.php in the theme folder, right?)

  15. #30632
    Kayla :

    Jun 5, 2007 2:18 am | Reply

    Thank you so much for this tutorial! I've been searching forever on a good Wordpress tutorial, and they've all confused me. This is the only one where I could understand EVERYTHING. I'm well on my way to making my first Wordpress template with ease. Thank you, John.

  16. #31018
    John( author ) :

    Jun 11, 2007 1:26 am | Reply

    Diogenes: Yes, index.php is the correct file. If you have moved the location of the sidebar in the file and it is not appearing on your site then the only thing it can be is that your site is not using the theme you are editing.

  17. #31419
    Jamessyboy :

    Jun 18, 2007 5:57 pm | Reply

    First class stuff my good man!! Fancy turning your hand to a Joomla tutorial please?!?

  18. #31992
    joel :

    Jun 29, 2007 9:45 am | Reply

    I moved to just under
    and double checked everything, but it still appears the same. Any thoughts. I've changed the index.php file and refreshed, but still looks the same. ??

  19. #31993
    joel :

    Jun 29, 2007 9:48 am | Reply

    Sorry my last comment obviously missed the code I typed in.
    I typed in get sidebar after get header, and it still appears the same in my browser. Not sure why it won't update

  20. #31994
    joel :

    Jun 29, 2007 10:22 am | Reply

    Sorry, I had plugins installed from earlier and it messed it around.
    All figured out. How could I doubt your genius!
    Thanks for this amazing tutorial!

  21. #33150
    Matt Bounds :

    Jul 23, 2007 9:04 am | Reply

    Re problem with sidebar staying at the bottom of the page when moving getsidebar()function up to sit between header and content.

    I had this problem - finally discovered that it was due to the fact that I had a static front page rather than the regular posts page as my home page. Wordpress appears to make a copy of the normally used index.php which sits in the current theme directory and work from that. So no matter of modification of index.php in monkeymadness will alter the layout until you switch from using a static front page back to normal blog mode. Couldnt fully understand the code - but making the switch worked.

    Sorry if this question has already been answered. Too many posts to read through.

    I guess, as this article is all about modifying wordpress themes, it figures that there would be more than the normal number of users who have experienced the same problem.

    Many thanks to the Dude who created this article. It's very useful.

    Matt, Melbourne Australia.

  22. #33690
    Dee :

    Jul 30, 2007 1:04 pm | Reply

    Hi, does anyone have a problem with the style.css not affecting the theme? I say this because I updated the various files accordingly: index.php, header.php, sidebar.php, etc. . However, the sidebar gets stuck at the top left of the page and any modifications to style.css are not reflected within the theme itself. For example: setting the sidebar with a red background in style.css doesn't work. Nor does changing its' position.

    But I can see the changes I made in the css file when I look at style.css with the inbuilt WordPress file modifier. And I've tested the site with both Firefox and Internet Explorer and even emptied the cache various times.

  23. #33724
    John( author ) :

    Jul 30, 2007 10:22 pm | Reply

    Dee, does this help at all?

  24. #34168
    Marc B :

    Aug 12, 2007 7:25 pm | Reply

    Hey,
    When was the published pdf/print guide last updated?

  25. #49054
    Patrick :

    Jan 10, 2008 12:05 am | Reply

    I'm having trouble getting my categories to display in an order other than alphabetically. I read the documentation where it states the categories will be ordered in the order I put them in .... not true. They're showing up alphabetically, and I can't find a way in Manage>Categories to change this. Any ideas? Where in Manage>Categories is this function? Thanks.

  26. #49058
    John( author ) :

    Jan 10, 2008 12:27 am | Reply

    Patrick, you can display a list of categories using the function wp_list_categories. This function allows you to change the order in which they are displayed.

  27. #49062
    Patrick :

    Jan 10, 2008 12:45 am | Reply

    Thanks, John. So what do I change the 'title_li=Categories' to? Would it be 'id_li=Categories' ?

  28. #49063
    John( author ) :

    Jan 10, 2008 12:50 am | Reply

    You would need to change orderby to ID, name, or count.

  29. #49089
    Patrick :

    Jan 10, 2008 3:34 am | Reply

    Gotcha. Thanks again!

  30. #49289
    Patrick :

    Jan 11, 2008 4:40 pm | Reply

    This is a complete "newbie" question: I want to show my posts on search.php and archive.php in alphabetical order, and I've found the following code to help me do that:

    <?php
    if (is_category('all listings'))
    {
    $posts = query_posts($query_string .
    '&orderby=title&order=asc&posts_per_page=-1');
    } ?>

    How would I add all of the other categories (besides that one)? In other words, what is the syntax? Would it be ('all listings, retail listings, office listings') ? I'm not confident enough to guess. Thanks again.

  31. #49312
    John( author ) :

    Jan 11, 2008 8:12 pm | Reply

    I'm not sure why you'd want search.php to show posts in alphabetical order (surely you want them in search order?), but query_post will return all posts unless you restrict it:

    query_post ('orderby=title&order=asc');

  32. #56506
    Technology Rules :

    Feb 15, 2008 3:38 am | Reply

    Nice article....thq

  33. #59277
    Atof :

    Mar 7, 2008 5:19 am | Reply

    Thax a bundle for the gr8 article :D

  36. #92286
    kampery :

    Oct 22, 2008 9:43 am | Reply

    back that ass up teen masturbating techniques association island henderson harbor new york looking for mature bushes cockatoo adoption and rescues

  37. #104067
    sendhil :

    Jun 22, 2009 11:51 am | Reply

    Awesome resource! Just invaluable! Thanks so much for sharing it!

  38. #104593
    Andrew :

    Jul 14, 2009 8:25 pm | Reply

    Not sure if anybody else had to do this, but to clear the style completely, I had to remove the at the end of the header.php file otherwise you would get rendered borders. this happened in safari 4.0.1 and firefox... whatever version I have installed. I don't know, I never use it.

  39. #104594
    Andrew :

    Jul 14, 2009 9:54 pm | Reply

    putting it back in, the break comes back but without the strange borders on either side. Don't know why it was happening in the first place. Thanks a bunch for such a great tutorial.

  40. #108698
    carlo :

    Dec 4, 2009 7:57 pm | Reply

    Hi jonh,
    i tried to do part 1 but if i notice a fault that i'm gonna to talking about.
    In Italian version of this guide at the bottom of each page , there is your two MonkeyMoney : one with style and other without.
    So i uploaded your themes and i turn one with no-style, i clear style.css leaving only "header" you suggest to add to style.css( not style at all... ), and i copy header of theme from these page where i'm posting and i add it to MonkeyMoney witout style.
    So, even i clear-up every style from header.php, if i mantein header.php in the theme, layout is not the same displayed here : stage1finalthumb.png; but eliminating header.php layout is displayd in a right way...
    In my opinion this is not explain clearly.

    Regards

Page: 1 2

Pings & Trackbacks

radioball.net, pierce.ctc.edu, mandrake.liquidblade.com, inforedesign.com, rockersworld.com, clydeshome.net, sampletheweb.com, kyid.net, blogging.typepad.com, summerstorm.ca, wordpress-it.it, wordpress-it.it, lavelleweb.com, bingu.net, qbicweb.net, photomatt.net, escdotdot.com, summerstorm.ca, literalbarrage.org, jou.ufl.edu, theselfstarters.com, shsh.ylc.edu.tw, workingblogger.com, cyxxon.com, blog.jackpate.com, okanogan1.com, grantpalin.com, andresperales.com, tuning.co.in, akkamsrazor.com, blogofstupidity.com, visualfuture.com, workingblogger.com, blog.tinyau.net, nathanwaters.com, blog.benjolo.com, carloadi.wordpress.com, cre8d-design.com, law.marquette.edu, emilyrobbins.com, gazette.computersandthings.com, officialstation.com, noulakaz.net, joselise.com, katherinemisegades.wordpress.com, jdsblog.com, kbps.resounder.org, bingu.net, digiscrappingqueen.com, technote.thedeveloperside.com, afterthe.net, blogunion.org, gfxdizayn.com, myblog.vindaloo.com, increseo.com, myemptymind.com, wickedfire.com, wpthemesplugin.com, ruthstalkerfirth.com, dalat.wordpress.com, cssquestions.wordpress.com, slightlytallerthanaverageman.com, markmckay.ca, tri-omni.com, dailyblogtips.com, napolux.com, autho-rity.info, lorelle.wordpress.com, samdevol.com, bentrem.wordpress.com, pg4me.de, tjeerdoo.com, ivonson.com, tjeerdoo.com, cottonrohrscheib.com, infotank.jp, smashingmagazine.com, smashingmagazine.com, smashingmagazine.com, parandroid.com, designvitality.com, vandelaydesign.com, blogmaster.it, vadiandonarede.wordpress.com, 97box.cn, icerainbow.cn, pucool.net, gress.cn, mixlogo.com, itnewsrss.com, yeepal.com, alibuybuy.com, wp.org.cn, android4.us, daxigua.com, lidecheng.com, webitect.net, michaelsnet.us, joolang.com, inetis.cn, wpdigger.com, fusuy.com, cssframework.cn, llobster.slojin.com, wastedcontinuum.com, blog37.net, x106.net, evia-complex.de, instantshift.com, iwanna.cn, bloghack.cn, maistrafego.pt, whippleworld.com, moviepals.org, pocascosas.com, samsubhash.wordpress.com, fordrayton.com, chris.bugert.com, webitect.net, webitect.net, designstrike.net, blog-graphicdesign.com, seo.portua.net, wordpress.ro.im, armadillo-creative.com, cxt5.cn, norbs.com, learningism.com, blog.velagapati.com, leandrolacerda.wordpress.com, the-designers-block.co.uk, drssay.com,

Leave a Reply


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Help me to save time by reading these instructions!

If you are asking a question please read the FAQ to see if it has already been answered. All support questions should be directed to the support forum. Thanks!

Wp Logo Theme: Guangzhou
Home | Main content | Software | Terms & Conditions | Sitemap | John Godley © 2010