Making a Wordpress Theme. #1

Making a start building a WordPress Theme.

It was good to finally get started recently on building a WordPress Theme for my website. Which will mean finally migrating this blog away from WordPress.com over to WordPress.org.

I love WordPress and I’ve thoroughly enjoyed learning it so far. As I initially started to write this blog I’d set the design on the WordPress theme on localhost. The CSS is set up and while I haven’t verified it because the navigation isn’t set up just yet, I’m sure the JavaScript is too.

There are doubtless plenty of articles on tutorials on how a theme is together up to this stage. Regardless I wanted to document how I did it.

Once you get used to how the WordPress loop works and Template Hierarchy, you realise that putting a theme together is a much less daunting prospect, certainly to begin with.   Here’s how I started.

1. Download a new installation of WordPress on localhost

This requires a new theme folder inside which is a functions.php, style.css file, index.php and a screenshot file to identify the new theme in the WordPress admin area.

wordpress-ss-1

Once you have these files set up, in a theme folder that you generate; that is the directory, screenshot image, and a minimum of an index.php file and stylesheet, you’re good to go to select and activate your theme in the admin area.

2. Set up header and footer files

Add new files to control the template parts for the header and the footer of the website. These will be header.php and footer.php. These are the parts of the website that will not change so they will generally include the website logo, social media links, common links and the website navigation.

The first way to get WordPress to recognise the files is to include a dynamic link to them in the index.php file.

<?php get_header(); ?>
<p>Index.php</p>
<?php get_footer(); ?>

If you put some test content into the files, such as a paragraph element, and they show up on the screen you know that the files are properly linked.

wordpress-ss-3

And there it is.  If you look closely enough 🙂 you can see that the contents of index.php, footer.php and header.php are being loaded and displayed in the browser.

3. Working with the functions.php file.

So now that we know the header and footer files are working, the next thing to do is to “port” over the HTML and CSS content. The markup of course goes directly in those 2 files but for linking the CSS and JavaScript files there a WordPress function used to make sure they’re properly linked.

This like most other functions are placed in the functions.php file for your WordPress theme. If there is a customization or a change you want to make to the front or the back end of the website it will be placed in this file.

function jgdm_stylesheets() {
wp_enqueue_style('file_handle', get_template_directory_uri() . 'css/foundations.css');
}

The file handle is a unique identifier for the individual file that is being enqueued and is used to hook the function into something called a “filter” that performs the queuing into WordPress. It’s the WordPress equivalent of a function call.

get_template_directory_uri() is a function used as an argument to dynamically grab the path to the image or media file.

//function to enqueue styles for the theme.
function jgdm_javascripts() {
 wp_enqueue_script('responsive_js', get_template_directory_uri() . 'js/responsive.js', array('jquery'),'', false);
}

This performs the same process as the *jgdm_stylesheets* function but it’s a little more involved as there are a few more required parameters to the function.

Wnhat do these params mean?

There’s the file handle, template directory function and final path as before. Then the final parameters are as follows.

The third parameter is an array of dependants for js files. The dependent might be jQuery in itself or another JavaScript file.

The next parameter is optional – version number of enqueued file (optional)

The final parameter is the location of file path in front end be it the header or footer. It takes a boolean value; True to appear in footer, false for header.

4. Hooking up the markup.

There’s little evidence at this stage to suggest the enqueue functions have yet worked, beyond checking the source code and your browsers development tools.

So it’s time to start putting the markup from the static web files into your WordPress php files. The main files to change are your index, header and footer files.

This is a crucial stage where it takes some practice and experience to learn where to put the correct markup. The static markup will be replaced in part with dynamic php code snippets and functions and eventually the WordPress loop.

In header.php you would place the main HTML for your navigation, logo and common styles and elements that come before the WordPress loop. In my example, I have a body element and a div element that are not closed. They will be closed in the footer.php file and WordPress will recognise this as correctly used HTML markup.

header.php

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

Furthermore in footer.php, any closing markup is included along with any code for a website footer.

footer.php
 
 <footer id = "mainFooter">
 
 <p>&copy; Jonnie Grieve Digital Media <?php echo date('Y'); ?> Designed by Jonathan Grieve</p> <br />
 
 <!-- <span class = "footerLinks">
 <a class = "footer" href = "#aboutAnchor">About</a> 
 <a class = "footer" href = "#clientsAnchor">Clients</a> 
 <a class = "footer" href = "#hireAnchor">Hire Me</a>
 <a class = "footer" href = "#webAnchor">Web Design</a> 
 <a class = "footer" href = "#flashAnchor">Flash Design</a> 
 <a class = "footer" href = "#aniAnchor">Animation</a> 
 <a class = "footer" href = "#psAnchor">Photoshop</a> 
 </span> -->
 </footer>
<?php wp_footer(); ?>
</body>
</html>

In addition you may have noticed 2 other pieces of code I hadn’t mentioned previously. <?php wp_head(); ?> and<?php wp_footer(); ?>

The functions serve 2 purposes. They pull in the enqueue functions we saw earlier but the wp_footer() is the code that pulls in the admin bar and all the JavaScript that powers it. So if you’re logged in to your WordPress site this will now show up on the front end.

Summing up

By now if everything has been set up correctly we should be seeing the website starting to take shape. The CSS should be appearing, any JavaScript will be set up. But content is yet being pulled in dynamically.

wordpress-ss-2

But I’ll leave it there for now and explain that in the next blog. This will include the different php functions that display all the pages and posts content and how this works with the famous WordPress Loop.

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