Making a WordPress Theme. #2

By this point, we’ve linked the CSS and JS files and created default WordPess templates so the website takes some semblance of shape.

The problem is it is empty of content and, depending on what text has been entered into the admin area via pages and posts and there’s no means of getting around the site. No links.

But we can’t just display static data on a WordPress site. In order to update content and make sure changes we make to our content update on the website, it must be pulled in dynamically via the WordPress Loop.

But there’s a little more to it than that. We also have to dynamically pull in other pieces of content too, such as the website title and any permalinks so that pages link together correctly. Basically, any content that changes from page to page needs a WordPress function or a custom function to show the appropriate content.

Before we go into the WordPress loop, I’ll explain some of these functions.

Pulling in Dynamic Content

Remember now that all the design work is contained in php template files. That is how WordPress Works and unique content is generated in the admin area via Pages and Posts.

But there are smaller functions that echo out content snippers outside the scope of the WordPress loop.

In header.php common ones are

wp_title();
wp_head();
bloginfo();

As we go through the markup there are certain things that need to be changed. Otherwise the same data will be displayed each time header.php and footer.php are called. So instead of static text inside for example the title tag. wp_title() is used, inside a separate php block.

Example: header.php

<!doctype html>
<head>
   <title><?php wp_title(); ?></title>   
   <?php wp_head(); ?> 
</head>

wp_head() is a small piece of code that accomplishes a lot of tasks. It is this function that is responsible for enqueing the files we linked to in the functions.php file. All the styling, all the functionality via the javascript, if we didn’t have wp_head(); none of this would work.

<a href="<?php bloginfo('url'); ?>">
      <img src = "<?php bloginfo('template_url'); ?>/img/jgdmLogo.png" id = "jgdmLogo" alt = "<?php bloginfo('name'); ?> An independent web design business covering North East England and Beyond" />
</a>

the bloginfo(); function takes specific parameters as strings e.g. url, name, description in order to display content to the screen. Another parameter, “template_url” is an argument that grabs the path to the template directory, wherever that lives of your WordPress installation. It can be used to generate a path to an image file that hasn’t been uploaded via the WordPress admin area.

<?php bloginfo('url'); ?>
<?php bloginfo('template_url'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>

Example: footer.php

<?php echo date('Y'); ?> - dynamically load copyright data.
<?php wp_footer(); ?> - loads wp menu bar

In this example there are 2 key functions that generate unique content. date() with a parameter displays a dynamically date to the screen based on a certain timestamp.

wp_footer(); works in a similar way to wp_head(). It will enqueue any files set in functions.php to loading the footer of the code as well as the JavaScript files that load the WordPress menu bar.

The WordPress Loop

In order to get the main content for any WordPress website the WordPress loop must be used. It can be used in one or two ways but this in my opinion is the simplest

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- content -->
<?php endwhile; else : ?>
//alternative text if no posts found. 
 <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

This performs a simple check to see if there is content to be found and to display the text while there is content. It only needs to be used once because WordPress is smart enough to know which content is assigned to which permalink.

So that’s the syntax. Let me post my example of how the loop is used.

<section class = "mainContent">
       <article class="content-area"> 
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
 <?php the_content(); ?>
<?php endwhile; else : ?>
<!-- -->
 <p>Sorry, found no content.</p>
<?php endif; ?>

First you have your opening HTML markup that your CSS will select. It’s important to get this right because there’s no facility in the admin area to affect how the text displays in the admin area, beyond the controls in the text editor. For absolute control you use CSS.

The first line of PHP checks for content from the admin area but doesn’t display it. To display the content we need at the very least a WordPress function called the_content(); This will echo out the text typed into the Admin area text editor. It will generate markup that can be picked up by CSS.

The rest of it is simply closing out the while and if portions of the loop.

Hooking in the Navigation

The WordPress loop pulls in content for all individual pages and posts of your website. Unfortunately it doesn’t do a single thing for displaying your navigation. It’s completely separate to it.

Fortunately, hooking up your websites navigation is fairly straight forward. I’ll go through the steps.

First, in functions.php we need to add support for menus to WordPress because it is not available by default. This is as simple as writing the following below.

<?php add_theme_support($feature, $arguments); ?>

$feature is a list of strings which add certain features. In this example we need to add ‘menus’s as a string parameter.

// $arguments is optional parameter

The next thing we need do is let WordPress know that there exists in this theme one or more menus. This is stored as an array in the function register_nav_menus which is in itself stored in a function.

function register_theme_menus() {
        register_nav_menus(
       array(
 'primary-menu' => __('Primary Menu')
       )
 );
}

We then give this a function call the WordPress way making sure we do so whenever the page is loaded.

//when wordpress is initialing, call the above function
add_action('init', 'register_theme_menus');

Finally we then find a specific location in our theme template for this menu to do. This is a skill in WordPress because you’ll have a specific format in your static markup and certain CSS styling.

<?php
$defaults = array(
    'container' => false,
    'theme_location' => 'primary-menu',
    'menu_class' => 'nav-collapse',
 );
wp_nav_menu($defaults);
?>

In my example I struggled for longer than I’d care to admit for how to get this to properly style in a WordPress template. It was in the right location but not all of the styling was being picked up. Further complicated by the fact I was trying to use a specific class that was used with a jQuery file.

Eventually I just did this

<nav class = "nav-collapse main-nav">
     <aside class="hamburger"><img src="<?php bloginfo('template_url') ?> img/menu.png" /></aside>
 
 <?php
 
 $menu_args = array(
     'container' => false,
     'theme_location' => 'primary-menu', 
     'menu_id' => 'navLinks'
 
 );
 
 wp_nav_menu($menu_args);
 ?>
 
 </nav>

I wrapped the php function in HTML markup (why did I not do this before) and the problems disappeared. I let the markup do the work and in an instant, the navigation was there just as I wanted it.

wordpress-nav

Summary

So now I have a fully functional theme. I have my navigation working. I have one page that will pull in blog posts and the rest of my pages run from the page.php template meaning they display the right content for the appropriate page.

As I write this (14th March 2016) to I could deploy the website now if I wanted. But there’s a bit more to developing a WordPress theme. On my mind at the moment is how I can use and display WordPress widgets. That’ll be my focus in my next blog.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s