Note: This page was formerly known as “Style Sheets (CSS)” and the old version can be found [here]. I’ve added much more than style sheet (CSS) info to the page and it has expanded so I thought it would be best to update the title.

An example of the Headers

This is H1 (Capture It Font)

This is H2 (Avenir Font)

This is H3 (FFF Tusj Font)

This is H4 (Yard Sale Font)

This is H5
This is H6

This is a quotation section

Many thanks to:

This is a sample of my table style

[table id=5 /]

Starting the build the theme with .php

In a themes folder (something like johngirdwood.com/wp-content/themes/girdJC2012-03) it is important to create a few .php files. For my theme, I’ve named them:

  • sidebar-top.php
  • sidebar-left.php
  • sidebar-right.php
  • sidebar-bottom.php
  • sidebar-search.php
  • sidebar-addnav.php
  • sidebar-news.php
  • sidebar-stories.php
  • sidebar-focus.php

The first 4 are basic elements for the page and the second 4 will be used for a splash page or placement of “special” elements.

Edit the functions.php

Go into the functions.php in the same themes folder and “register” the elements listed above. Do so like this:

<?php


register_nav_menu( 'primary', 'Primary Menu' );




register_sidebar(array(


 'name' => 'AddNav',


 'description' => 'This widget is ideal for additional navigation',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'Bottom',


 'description' => 'Widgets in this area will be shown on the bottom bar',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'Focus',


 'description' => 'This widget is ideal for the website focus',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'Left',


 'description' => 'Widgets in this area will be shown on the left side',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'News',


 'description' => 'This widget is ideal for news',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'Right',


 'description' => 'Widgets in this area will be shown on the right side',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'Search',


 'description' => 'This widget is ideal for the search form',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'Stories',


 'description' => 'This widget is ideal for stories',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));




register_sidebar(array(


 'name' => 'Top',


 'description' => 'Widgets in this area will be shown on the top bar',


 'before_title' => '<h1>',


 'after_title' => '</h1>'


));






add_theme_support('post-thumbnails');




wp_enqueue_script('jquery');




function the_breadcrumb() {


if (!is_home()) {


echo '<a href="';


echo get_option('home');


echo '">';


bloginfo('name');


echo "</a> » ";


if (is_category() || is_single()) {


the_category('title_li=');


if (is_single()) {


echo " » ";


the_title();


}


} elseif (is_page()) {


echo the_title();


}


}


}




?>


[STOP: Do not include this line if you copy/paste]


The functions after the registered sidebars will do other stuff. I forget most of why I added these, but a simple Google search can probably tell you.


    

  • add_theme_support(‘post-thumbnails’);

      

    • not really sure what this does…
      • 

    

    • 

  • wp_enqueue_script(‘jquery’);

      

    • think this allows jquery items
      • 

    

    • 

  • function the_breadcrumb()

      

    • this probably allows breadcrumbs to exists on other pages
      • 

    

    • 



Editing your .php


Go into your .php files and make them look like this:


<div id=”sidebar-addnav”>


<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(1) ) : ?>


<?php endif; ?>


</div>


[STOP: Do not include this line if you copy/paste]


The div id will name what you will later edit in the CSS (style sheet). The “1″ after dynamic_sidebar will change to 2, 3, 4, etc. respectively in all your .php files. If you registered 9 of them in your functions.php file then you’ll go from 1 to 9 in these .php files. IMPORTANT NOTE: The chronology of the numbers assigned to these .php files must match the order in the functions.php file. As I’ve registered add-nav with “the first spot” in order in the functions.php file, I also need to assign it the number “1″ in its own .php file. The order is very important!


Making Your CSS (Style Sheet)