How to Create a WordPress Theme – Part 3

Before reading this article, make sure to check out part 1 and part 2! Now that we’ve got our design and a copy of WordPress ready to go, it’s time to open up the “default” theme, clean things out a bit, and start making our new theme. Let’s get started:

  1. First, we open up header.php. You should see something that looks very much like this:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.tjmarsh.com/TR/xhtml1/DTD/xhtml1-transitional.dtd”>       <html xmlns=”http://www.tjmarsh.com/2013/xhtml” <?php language_attributes(); ?>>

    <head profile=”http://tjmarsh.com/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=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />       <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

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

    <?php       // Checks to see whether it needs a sidebar or not       if ( !$withcomments && !is_single() ) {       ?>       #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/adfrdgsdfh.jpg”) repeat-y top; border: none; } < ?php } else { // No sidebar ?> #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/fdhghgfd.jpg”) repeat-y top; border: none; } < ?php } ?>

    </style>

    <?php wp_head(); ?>       </head>       <body> <div id=”page”>

    <div id=”header”> < div id=”headerimg”> < h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1> < div><?php bloginfo(‘description’); ?></div> < /div> < /div> < hr />

  2. Remove the sections of code marked above in bold. Excellent! Save your work.
  3. Now, open up the HTML file that contains your layout. Here’s the full mark up for my layout:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.tjmarsh.com/TR/xhtml1/DTD/xhtml1-strict.dtd”> < html><head> < meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> < title>Tj’s World</title> < link href=”style.css” rel=”stylesheet” type=”text/css” /></head> < body>

    <div id=”mainContainer”>

    <div id=”header”></div>
    <div id=”notice”><p>Important Notice Goes Here</p></div>
    < div id=”contentContainer”> < div id=”content”>

    <div id=”contentHeader”><h1>Content Title Goes Here</h1></div>
    < p>Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi  ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat.</p> < p>Ut wisi enin ad minim. Quis nostrud ad nostris pro amat. Sed aliquo ut  nisi alter ego qid propter anno et cetera. Ullam venit cum permissio, alter  ego cum frater et patris et mater inter familias. Vel illum dolore eu feugiat nulla facilitis ad vero eros et accususam et lustro odio dignissim qui blandit praeset lupatum auge duis aplore. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi.</p>
    < span>Continue Reading</span>
    < div id=”contentFooter”> < p>Published jan 25 2013 - Comments? None yet </p> < /div>
    < /div> <!– Content Ends –> < /div> <!– Content Container Ends –>

    <div> < div>
    < h2>The Author</h2> < p>TJ Marsh, just a local man.</p>
    < h2>Categories</h2> < ul> < li>Niche Marketing (15)</li> < li>Faith I Live By (12)</li> < li>Web Design (5)</li> < li>Life Updates (9)</li> < li>Wordpress (15)</li> < /ul>
    < h2>Blog Pages</h2> < ul> < li>Excellent Blogs</li> < li>Excellent Websites</li> < li>Excellent Books</li> < li>Active Projects</li> < /ul>
    < /div> <!– First “box” of content ends here, second box begin below –>

    <div>
    < h2>Sponsors</h2> < p>Sponsor This Site</p>
    < /div> <!– 2nd box of content ends here –>
    < /div> <!– Right Column Container Ends –>

    <div id=”clear”></div>

    <div id=”footer”> < p>You’re welcome to share what you find here with whomever you’d like in whatever way you’d like to. If you have questions, comments, or suggestions, contact me :).</p> < p>Virtual Empire (What is this?): <a href=”#”>Links to Various Sites </a></p> < /div>

    </div> <!– Main Container Ends –>

    </body> < /html>

    Note: For the sake of easy reference in the above layout, I have bolded my code to my theme to match the appropriate WordPress theme files.

  4. Now, take the “header” section from your layout and place it, as appropriate, into the WordPress header template, replacing the relevant pieces of existing code with your own. Keep in mind that this header.php file represents what will be at the top of every page of your new WordPress theme (unless you specify otherwise). Here’s my finished header template with my changes marked in bold:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.tjmarsh.com/xhtml1/DTD/xhtml1-strict.dtd”>

    <html xmlns=”http://www.tjmarsh.com/2013/xhtml” <?php language_attributes(); ?>>

    <head profile=”http://tjmarsh.com/xfn/11″>       <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title> <?php simple_title(‘-’); ?> <?php bloginfo(‘name’); ?> </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=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />       <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

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

    <div id=”mainContainer”>

    <div id=”header”></div>

    You’ll notice that I replaced the default way of displaying the page title. I wanted a title that read like “Page Name – Website Name”, rather than the WordPress default.

More to come later! Please keep a lookout to see the final steps :)

Looking for quality WordPress Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , | Posted under WordPress | RSS 2.0

Author Spotlight

TJ Marsh

TJ Marsh

My names Tj Marsh. I spend about 16 hours a day on the internet. Running my company and helping out others. I live in the good ole Arizona where it gets ridiculously hot. I love WordPress and a lot of other open source software along with coding.

2 Comments on How to Create a WordPress Theme – Part 3

  1. Matt says:

    Hey TJ,

    do you have any idea why even tho bloginfo(‘charset’) is setting my meta to utf8, when I load my site all the “foreign” chars are displaying as: �

    by foreign I mean french language accents.. which should still be part of the utf8 encoding.

Leave a Reply

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


4 × = 20

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>