May 222014
 
Article WordPress

In the first post of this series we managed to develop a barebones theme minimally functional, ready to be installed on a wordpress site. But there are many additional aspects that need to be addressed in the development of a wordpress theme.

In this second post, we will do a more in-depth review of the concepts involved in the development of wordpress themes, and will be adding a menu and a sidebar to our example theme. Finally, we will add a responsive layout, to make our blog as appealing and easy to navigate on mobile devices as it is on desktops and laptops.

Adding a menu placeholder to the header

We ended our previous post loading the blog on a browser, to check the look and feel of the site with the minimum theme selected.

You might have noticed that, surprisingly, the visible header is displaying the name and description of the blog, and a horizontal line. But we have not programmed yet the rendering of this content in the header anywhere in the theme! Where does it come from ?

header-en

 

 

What happens here is, if the wordpress code does not find a template named “header.php” in the active theme, falls back to using the default header template located in the directory “wp-includes/theme-compat”. There are other default templates in that directory:

  • header.php – Generates the HTML header and the visible header
  • footer.php – Genera el pie de página
  • sidebar.php – Genera una barra lateral para colocar widgets, etc
  •  comments.php – Presenta los comentarios que se han realizado al artículo
  • comments-popup.php – Presenta el formulario para añadir un comentario

As the development of our sample theme progresses, we will be creating templates that will replace these default templates.

First, let’s create a “header.php” template under our theme directory “wp-content/themes/minimum”, with the following content:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta http-equiv="Content-Type" 
    content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
      type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

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

<div id="header" role="banner">
    <div id="headerimg">
	<h1><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a></h1>
	<div class="description"><?php bloginfo('description'); ?></div>
    </div>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<hr />

As can be seen in the code above, header.php generates the HTML code of the header, including common markup inside the <head>…</head> section, such as the <title> tag, a reference to the theme’s stylesheet, a pingback url, etc.. It does this using the bloginfo() function to retrieve the relevant information about our blog, that has been configured in the administration panel: name, description, charset,…

Near the end of the code, we can see a call to a function wp_nav_menu(). This function inserts in the template a menu placeholder with the name “header-menu”, immediately above the horizontal line that ends the header.

But wordpress must be told about the existence of this placeholder. Only then, it will appear in the menu editor of the administration panel, and the administrator of the site will be able to assign this placeholder to an existing menu.

To register the menu placeholder in wordpress, a new file “functions.php” will be created in our theme, as explained below.

Register a menu placeholder, and assign an existing menu to it

To register the menu placeholder, a file “functions.php” is created under the directory of our theme, with the following content:

<?php
function register_minimum_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_minimum_menu' );

The menu placeholder will appear in the administration screen as “Header Menu”, and will be referenced in the PHP code with the identifier “header-menu”.

Now, we will access the Menu Editor in the Administration Panel, and will do:

1. Create a menu, if no menu exists yet in our blog. In the sample screenshot, a menu named “Main Menu” with entries “Home”, and “About us” has been created.

2. Assign the “Main Menu” menu to the “Header Menu” placeholder

edit-menu

 

 

Once we have assigned a menu to the placeholder, we can load again the home page of the blog in the browser, to check the result:

page-with-menu

 

 

The page is effectively showing now the menu, in the assigned placeholder. But the menu appears a bulleted list, because we have not applied yet any style to alter the default rendering.

Adding a sidebar

A WordPress “sidebar” is an area where widgets can be placed. It is common to put sidebars at the right or left side of the main content (that’s why it is called sidebar), but this is not mandatory.

The first step in adding a sidebar to our theme is registering it in wordpress. This is done by adding inside the functions.php script a call to register_sidebar(), as in the example below:

register_sidebar( array(
    'name'         => __( 'Right Sidebar' ),
    'id'           => 'sidebar-1',
    'description'  => __( 'This sidebar will show widgets to the right of the main content.' ),
    'before_title' => '<h1>',
    'after_title'  => '</h1>',
) );

Now, the sidebar needs to be inserted in the templates where we want it to appear, either specific to some types of page (single.php, category.php,…), the generic template index.php, or the footer in footer.php. This is done adding the following PHP code to the template script:

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

In our case, we will be adding the code to the beginning of the footer.php template.

To test the result, we need to go first to the administration page ( Appearance > Widgets ), and add some widgets to the sidebar:

edit-sidebar

Then, we can point our browser to the home page of our blog. In our example, the sidebar appears at the bottom of the page, below the main content:

sidebar

Now, our theme includes all the basic elementos of a wordpress page: a header and a footer, the main content, a navigation menu, and a sidebar where to drop widgets.

The next post of this series will explain how to add to our theme a responsive design based on Twitter Bootstrap.

References

 Posted by at 11:37 am

 Leave a Reply

(required)

(required)