Create a WordPress Theme – Beginner’s Guide 2

Part 2 of How to create a WordPress Theme – Guide for Beginners.

After the <head> codes, the next part is the Header where the site name and site description is to be displayed.

Note that the terms <head> and  Header are different things. The <head> is a part of the html document that is not visible on the browser and handles the site’s Title, Favicon, Metas, Stylesheets, Scripts and a lot more. The Header is the part of a theme that is displayed at the very top where the Name and Description of the website are usually shown. It may also show a custom header image but that’s for another tutorial. For now, we’ll focus on the very basics of creating a WordPress theme.

Continuing on the Header.php

Lets continue with the contents of the header.php. We now add the opening body and container tag. Then we add the header Title and Description.

<body <?php body_class(); ?> >
<div id="container">

    <div id="header">
        <div id="header-info-wrap"> 

            <h1 id="site-title"><?php bloginfo( 'name' ); ?></h1>
            <h4 id="site-description"><?php bloginfo( 'description' ); ?></h4>


Inside the <body> tag you’ll find this <?php body_class(); ?>.

This piece of php code will print the body’s classes depending on what type of page is being displayed. For example if you are viewing:

Homepage  :  <body class="home">        
Posts     :  <body class="single-post"> 
Pages     :  <body class="page">        

Also included on the header.php – The Menu

This code will output the menu set that is assigned for the Primary Menu location. If no menu is assigned for the location then the fallback page menus will be used. Check this post to read on how to create a custom menu for a WordPress Theme.

<nav id="nav">
   <?php wp_nav_menu( array(
	  'theme_location' 	=> 'menu-primary',
	  'container' 		=> false,
	  'fallback_cb'		=> 'wp_page_menu' )


Moving on to the Index.php – The WordPress Loop

This may be the most important part of the theme. The WordPress Loop is responsible for showing the website’s content Posts and Pages. But first we call the header.php that we just created using the get_header() function.

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

     <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

          <?php the_content(); ?>

<?php endwhile; else: ?>

     <h2>Post or Page not Found!</h2>

<?php endif; ?>

Keep in mind that this is a very simplistic version of the Loop. It only outputs the title and the content of the post or if a post is not found, it outputs a “Post or Page not Found” message.

Also on the Index.php – The Post Navigation

Just below the posts, we add the post navigation. This displays the “Older Posts” and “Newer Posts” links.

<div id="bottom-navi">
    <div><?php next_posts_link( '&laquo; Older posts' ); ?></div>
    <div><?php previous_posts_link( 'Newer posts &raquo;' ); ?></div>

So we have a header, menu and the content. The next thing to add is the sidebar that will contain the widgets.

Configuring the Sidebar Widgets

On the Functions.php – Register the Dynamic Sidebar.

        'name' => 'Sidebar',
        'id' => 'sidebar_widgets',
        'before_widget' => '<div id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4>',
        'after_title' => '</h4>',) 

The code above registers a dynamic sidebar with the name of Sidebar. This code should be placed in the functions.php file.

Back on the Index.php – Display the Widgets in the Sidebar.

Now that the dynamic sidebar is registered, we will add the code to display the actual widgets that are selected by the user. In our sample theme, we add this code on the index.php but on most themes this is added on a separate sidebar.php template.

<div id="sidebar" >
      <?php if ( is_active_sidebar( 'sidebar_widgets' ) ) : ?>
          <div id="sidebar-widgets-wrap">
              <?php dynamic_sidebar( 'sidebar_widgets' ); ?>
      <?php endif; ?>

The Footer

For the footer area of our simple theme we can just add any html we want, maybe add some useful links to other related web pages. If you prefer you can also add a custom footer menu by repeating the process used in adding our main menu, just remember to use a different ID for the new menu.

<div id="footer" >
      <!-- Add your footer links here -->
      <a href="">Ron's Blog</a>

Just in case you’re interested in the php and css icons you see in the image above, you can get it here: simple file type icons.

Next and final step is to improve the theme’s appearance by using a css stylesheet.

Create a WordPress Theme Part 3

Share This Post

1 Comment

Add a Comment

Leave a Reply

Please write your comments in english. I delete anything that even remotely resembles spam.

Note: When posting code, enclose it in pre and code tags.
e.g. Add code here