Author: Ed Martin

Now you have created your initial page, it is time to start adding the dynamic content from the database.  While it is possible to hard code content into your pages, why would you use WordPress if you are hard coding?

The WordPress database hold a huge amount of information about your website.  Many site wide core features can be called with <?php bloginfo(); ?>

Open up your header.php file and update the header div to include the blog info details.

<div class="header">
 




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





 <?php bloginfo( 'description' ); ?>
</div>





<!-- /.header -->

You can make the site-title a hyperlink to link back to your home page by changing the header to:

<div class="header">
 




<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>





 <?php bloginfo( 'description' ); ?>
</div>





<!-- /.header -->

Next step is to replace the static menu you created earlier with the dynamic WordPress Menu.  You can create a new menu in your Theme setting in the Dashboard, but first you need to register it.

Head back to functions.php and add the following code:

register_nav_menus(
array(
'primary' => __( 'Primary Menu', 'JadeLoveAuctions' ),
)
);

This registers the menu.  I always use the register_nav_menus function rather than register_nav_menu in case I decide to add a secondary menu later in my development.  You also need to update your header.php file to include the generated menu.  If you haven’t already done so, update your stylesheet to give you your styled navigation menu.

The important thing with WordPress navigation menu design is to ensure that you are flexible.  You may know what you want now, but if you are designing for a clinet you cannot tell what they will ask for in the next round of development.  Plan for drop down menu’s – ensure your design will look OK with multiple levels of drop down menu.  Also think about mobile friendly menu’s.  What will your menu look like on a tablet, a mobile phone or other device.  Have you planned for breakpoints?  Does your design look OK on all the devices you own.

When planning my navigation menu, I try to go for the mobile-first approach.  Meaning that my menu looks great on a mobile device, and I add breakpoints for larger screen sizes:

@media screen and (min-width: 699px)

I have recently discovered flexbox – a wonderful utility that makes creating content in a fluid way easier.  I now create a horizontal stacking menu, and then simple use the breakpoint to add the flex styling.

Now I have a beautiful menu that changes automatically depending on the screen size.

The next step is actually getting the blog content from the database.  Do you remember those templates we made in the last tutorial?  Header.php, sidebar.php and footer.php?  We are going to create a new one called content.php.  Open a blank php file and save it.  You will need to create a new folder in your theme called template-parts, and save content.php inside this folder.  Add the standard header information to the top of this file and copy the post information from index.  Your content.php file should look like this:

<?php /** * JadeLoveAuctions default content * * @package JadeResources * @since JadeResources 1.0 */ ?>

<div class="blog-post">

<h2 class="blog-post-title">Sample blog post</h2>



January 1, 2014 by <a href="#">Mark</a>




This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.


<hr>


<!-- the rest of the content -->

</div>

<!-- /.blog-post -->{

You now need to update index.php to call the content from this file. update index.php to include the WordPress loop.  Read the codex for information on the WordPress loop.  My index page now looks like this:

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php if ( have_posts() ) : ?>

<?php
// Start the loop.
while ( have_posts() ) : the_post();

/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );

// End the loop.
endwhile;

// If no content, include the "No posts found" template.
else :


<?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?>


endif;
?>

</main><!-- .site-main -->
</div>

<!-- .content-area -->

I have added a <div> and a <main> content area to help the layout of the site.  I will explain this later on.  Those of you who have ready the WordPress Codex will notice my code is not exactly as it was on the Codex.  This is because we will add some code later for our front page if it is added in WordPress.  The WordPress default Twenty themes have helped me with this, and you will notice my code is nearly identical to those – why reinvent the wheel?

This is where things get interesting.  We can actually pull information and content from the database.

To display the title of the blog post you need to use the the_title() function.  The code below creates the title of the post as a hyperlink.  This is beacuse this page is likely to list all the blog posts in a paginated list.

The internet is a wonderful thing, and there are already many posts on the internet about creating a WordPress Theme.  When searching for hints and tips on how to create a theme, I found lots of tutorials, but many were out of date, or took shortcuts to the final step.  I wanted to blog about my findings in order, mainly, to make it easier for me next time I have to create a WordPress Theme, but I also hope it may be useful for others too.

Your best friend with theme development will always be the WordPress Codex.  If you aren’t familiar with the Codex, now would be a great time to head over to https://codex.wordpress.org/Theme_Development and have a quick look around, as this will likely become your best friend.  I also find the Theme Handbook essential when developing https://developer.wordpress.org/themes/getting-started/ as there are many golden nuggets in there.

I’m not going to tell you how to setup your Development Environment as there are plenty of tutorials already out there.  I have developed both on local environments and online, but with the amount of files you are going to be transferring it is probably better to develop in a local environment.

First I create my empty style.css and index.php files and uploaded them to my development environment. Inserting the style.css heading enabled me to activate the new theme and try it out.

/*
Theme Name: JadeResources
Theme URI: https://jaderesources.co.uk/themes/jaderesources
Author: Jade Resources
Author URI: https://jaderesources.co.uk/
Description: Initial theme design for Website
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jaderesources
Tags:
This theme, like WordPress, is licensed under the GPL.
*/

I find it useful to put all the heading options in when designing a theme so when it comes to publishing it you only need to update them.  Personally I always keep the version number under 1 during development so that once it is published I can publish it as version one.

Currently the theme does nothing but create a blank page.  Time to start adding some code.

Open up index.php and start typing up your basic structure

<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade Resources Template</title>
</head>

<body>


<div class="site">
 

<div class="container">
  
<div class="header">
   
<h1 class="site-title">Site Title</h1>

   

Site Tagline

  </div>

<!-- /.header -->

  
<nav id="site-navigation" class="main-navigation" role="navigation">
   
<ul>
    
<li><a href="#">Welcome</a></li>

    
<li><a href="#">About</a></li>

    
<li><a href="#">Websites</a>

<ul>
      
<li>Dropdown 1</li>

      
<li>Dropdown 2</li>

     </ul>

    </li>

    
<li><a href="#">Link</a></li>

    
<li><a href="#">Link</a></li>

    
<li><a href="#">Contact</a></li>

   </ul>

  </nav>

<!-- .main-navigation -->

  
<div class="container">
   
<div class="main">
    
<div class="blog-post">
     
<h2 class="blog-post-title">Sample blog post Title</h2>

     

January 1, 2018 by <a href="#">Ed</a>


     

This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.


     
<hr />

    </div>

<!-- /.blog-post -->
   </div>

<!-- /.main -->
   
<div class="sidebar">
    
<h4>About</h4>

    

Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

   </div>

   
<div class="sidebar-module">
    
<h4>Archives</h4>

    
<ol class="list-unstyled">
     
<li><a href="#">January 2017</a></li>

     <!-- More archive examples -->
    </ol>

   </div>

<!-- /.blog-sidebar -->

   
<footer>
    
<div class="site-info">
     

Copyright &copy; 2018

    </div>

<!-- .site-info -->
   </footer>

</div>

<!-- /.container -->
</div>

<!-- /.site -->
</body>
</html>

With that in place you now have a static basic website design.  Reload your website and you should see what you have just created.

Now add some code to style.css to start changing the look of the webpage.  I follow the WordPress default themes practice of including a contents section (expand and organise as you go along) and add a reset section before any custom code.

You could include the reset section in a separate stylesheet, but the more files loaded when the website opens the slower the connection between client and server.

I use normalize.css rather than reset.css as normalize keeps some HTML ‘essentials’ like <sup> and <sub>, whereas reset.css wipes out all of the HTML markup.  I find it useful to download a fresh copy of normalize.css for each project.

Head over to their github page  http://necolas.github.io/normalize.css/ and download a fresh copy.  Normalize is well commented so you can understand what each part does.  Feel free to take out the comments, but they don’t add a huge amount more space and will help others to understand your code better.

Once Normalize is added, I usually add a background colour to test whether everything is working properly.

 body {
background-color: red;
} 

During initial CSS testing I always use bright / garish colours because it is clear if the CSS is being applied.  Refresh your website and see if everything works.  Your website should now be displayed but with a red background.

Hmm… it didn’t work did it? That is because of the way WordPress adds CSS.  It took me a long time to figure this out.  Yes I could add style.css into the head of my index file, and that is the easiest way to add stylesheets to your website, but once you start adding plugins to your WordPress site the order of stylesheets can get confused.  Therefore you need to enqueue the script from functions.php.

Go ahead and create functions.php inside your theme folder.  On all my template files I like to include a header comment to identify what the page is designed for, as well as giving details on when the page was introduced to the theme:

<?php /*
 *
 * The functions file
 *
 * @package JadeResources
 * @since JadeResources 1.0
 */
?>

You then need to create a function to enqueue the style.css file.  You can enqueue any scripts of styles that are essential to your theme within this function, but at the moment we only have the main stylestyle sheet.

Enqueue the stylesheet like this:

/*
 * Enqueue scripts and styles for the here here
 */
function jaderesources_scripts() {
     wp_enqueue_style( 'style', get_stylesheet_uri(), false, ‘0.1’, ‘screen’ );
}
add_action( 'wp_enqueue_scripts', 'jaderesources_scripts' );

Take a look at the WordPress Codex for full details on this function, but essentially it is telling your site to load a stylesheet with a handle of ‘style’ from the default theme directory, without any dependencies on other stylesheets.  It is giving it a version number of 0.1 and saying it is for all screen media types. Upload the functions.php file into your theme directory.  You also need to add a line to your index.php page.  Just before the closing </head> tag add the code <?php wp_head(); ?>.  According to the Codex this line of code prints scripts or data in the head tag on the front end.  It is essential to place it just before the closing </head> tag as many plugins rely on it, and it is what makes our stylesheet from functions.php work.  Upload index.php and functions.php to your development environment and refresh your browser.  You should now see your basic site with your background colour.

Congratulations, you now have a basic website, with a static index page with a properly enqueued stylesheet. 

My next step is now to start breaking down the index.php page into templates.  I find it much easier to do now before there is more wordpress code added as it eases the transition between a one page design and multiple templates.  The reason for using templates is simple.  It keeps all design in one place and if any changes are made then you know they will be replicated to all pages as the server creates the full page from the templates.

The initial WordPress templates are header.php, footer.php, and sidebar.php.  Create these and copy your respective parts of index.php into these pages.

How you divide up your site depends on your initial index.php layout, but from my original code header.php includes everything up to <div class=”main”>, sidebar.php includes everything between </div> <!– /.main –> and </div><!– /.blog-sidebar –>, and footer.php contains everything from  <footer> to the end of the file.

Now you need to call your template files into your index file to place everything back together.  Add get_header(); get_sidebar(); and get_footer(); into your index.php file in their respective places to re-create the full index file.

Index.php should now look like this:

<?php /*
 *
 * The main template file
 *
 * @package JadeResources
 * @since JadeResources 1.0
 */
 get_header(); ?>
  
    <div class="blog-post">
      <h2 class="blog-post-title">Sample blog post Title</h2>
      <p>January 1, 2014 by <a href="#">Mark</a></p>

      <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>

      <hr />
    </div><!-- /.blog-post -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Our basic static theme for WordPress is almost complete.  We just need to add one more php command to footer to call the rest of the WordPress essentials in.  Add <?php wp_footer(); ?> in footer.php just before the closing </body> tag.

Footer.php should now look like this:

<?php 
/*
 *
 * The footer file
 *
 * @package JadeResources
 * @since JadeResources 1.0
 */ ?>

<footer>
 <div class="site-info">
  <p>Copyright &copy; 2018</p>
 </div><!-- .site-info -->
</footer>

 </div><!-- /.container -->
</div> <!-- /.site -->
<?php wp_footer(); ?>
</body>
</html>

Now login to your WordPress website by visiting /wp-login.php.  Once you are in the dashboard click back to the main site and you should see the WordPress Admin Bar at the top of your webpage.

You can now spend some time creating your basic styles in styles.css to give your website a unique design.  Once you have done this you will be ready to start adding your dyncamic content from the WordPress Database.  For the next tutorial go to theme-development-part-2