Create a WordPress Theme – Beginners Guide 2

Part 2 of How to create a WordPress Theme 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 that is not visible on the browser and handles the sites 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 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.

Index.php

<body <?php body_class(); ?> >

<div id="container">

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

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

        </div>
    </div>

Enclosed in 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">

The Menu

This code will output the default WordPress menu which outputs the Pages. Check this post to read how to create a custom menu for a WordPress Theme.

<nav id="nav">
    <?php wp_nav_menu() ; ?>
</nav>

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.

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

     <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <h1>
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h1>

        <?php the_content(); ?>

     </div>

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

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>
</div>

 

So we have a header, menu and the content. The next thing to add is the widget-enabled sidebar.

Sidebar Widgets

Register the Dynamic Sidebar.

<?php if (function_exists( 'register_sidebar' ) ) { 
    register_sidebar(array(
        '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 a functions.php file.

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.

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

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="http://ronangelo.com">Ron's Blog</a>
</div>

We now have 2 files. The index.php and the functions.php. The next addition will be the style.css.

Just in case you liked 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

Updated: March 25, 2013 at 4:02 am
Tags: