Creating a Custom WordPress Theme – Part 2, Template Files
May 29, 2017
Recap of what we accomplished last time:
- Created our custom theme directory
- Created two files within our theme directory ; index.php and style.css
- Activated our custom theme.
Remember the two files we created last time? Well those are what WordPress treats as template files. WordPress uses these template files to generate your website pages.
You have a two options when designing your theme, you can either
- Have everything from header to body to footer placed in your index.php file or,
- Create template files for each section that can be re-used for all your pages.
It is wise to go with the second option as your page template files will be much cleaner and easier to read, as you can simply call the template files with built-in function such as ;
- get_header();
- get_footer();
- get_sidebar(); and so forth.
Easier said than done right? Let’s try this out.
Open and edit your index.php file, so that it looks same as below:
<?php get_header(); ?> <div id="contents" class="default_border"> <?php echo "<span class='help'>This is from Index.php</span>"; ?> <h1><?php echo $the_title; ?></h1> </div> <?php get_footer(); ?>
Navigate to your main URL and you should see that the contents have changed from before, but we didn’t create any header or footer template files, how is it working? Luckily, WordPress have built-in functions/files that can take care of these jobs if there are no specified template files.
That’s handy, but it really looks ugly so we are going to design our own header and footer. To do that, we need to create 3 files: functions.php, header.php, and footer.php
The header.php file is going to contain the usual stuff that most websites have in their HEAD section and including our top navigation. Our BODY tag will also start here but we are not going to close it in header.php.
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?PHP echo $the_title; ?></title> <?PHP wp_head();?> <!--always include wp_head(); before closing off head --> </head> <body> <div id="navigation" class="default_border"> <?php echo "<span class='help'>This is from Header.php</span>"; ?> <?php $header_menu = array( 'theme_location' => 'header-menu', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => 'top_Nav', 'menu_class' => '', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu($header_menu); ?> </div>=
In our footer.php , we are not going to have much at this point, just a div containing a sentence. Before closing off the BODY tag, remember to add the wp_footer(); function, similar to calling wp_head(); before closing off the HEAD section.
<div id="footer" class="default_border"> <?php echo "<span class='help'>This is from Footer.php</span>"; ?> <p>This is some text in the footer section</p> </div> <?php wp_footer(); ?> </body> </html>
Lastly, functions.php. This file will contain most of your custom functions, actions/hooks etc. This file automatically gets loaded to your pages.
You can see that rather than linking our css in header.php we are using wp_enqueue_style, which is an alternative approach.
<?php
#set title of blog as the_title variable, if we declare it in functions.php it can be accessed on other template files
$the_title = get_bloginfo( 'name' );
#link style.css
function add_stylesheet() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );
#register menus, this will enable 'menu' in your WordPress Dashboard, it can be found under Appearance -> Menus
function register_my_menus() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menus' );
#Don't need php closing tag at the end.
Oh and make sure to update your style.css:
/*
Theme Name: myCustomTheme
Author: Leo Kim
Description: This is a custom theme
Version: 1.0
*/
.default_border{
border:1px solid black;
padding:5px;
margin:20px;
}
.help{
float:right;
font-weight: 900;
}
Make sure you have saved all your files, and go to your main URL to confirm all is good.
If assembles something like the image above, we are good to go !
See you next time 🙂