Jonnie Grieve Digital Media: Blog

Blog: Developing my new blog in WordPress (More Posts)

It’s time to start developing my new blog. Over the past couple of weeks, I’ve been working on an HTML prototype of the new theme for the blog. Featuring in the blog will be an interactive blog filter over all existing blogs (I finalised that, yesterday), and a draggable image Carousel of the most recent blogs.

Development of the blog starts now by transferring the code from the prototype and getting the theme looking like that prototype.

What the project looks like right now

Earlier, I prepared the minimum required files for a WordPress theme.

• inc/header.php
• inc/footer.php
• functions.php
• index.php
• screenshot.png
• style.css
• (where inc/ is a first-level directory from the root theme directory)

I also like to use SASS in development, so I have a .scss file that includes import directives for multiple SASS partial files. Theme assets go in an organised “files” directory, and that directory is where I put the theme prototype files.

Now to get building

When I first created the template files I created the index.php file and a footer and header template in their own folder.

<?php
    /* inc/header.php */
    echo "<p>header.php</p>";
    ...

<?php
    /* inc/footer.php */
    echo "<p>footer.php</p>";
    ...

And in index.php, which is the catch-all template file… we need to require the header and footer and footer templates with the require keyword.

<?php require "inc/header.php"; ?>

<section>

    <?php echo "<p>index.php</p>"; ?>

</section>

<?php require "inc/footer.php"; ?>

So right now the only way to access the admin area is to type the URL directly in. /wp-admin. There are 2 purposes to adding these functions to your theme.

<?php

   echo "<p>header.php</p>";
   wp_head(); ?>

wp_head(); – This is the method that allows the theme to enqueue CSS and JavaScript files. Typically this method is included as the last thing inside the header template.

<?php

    echo "<p>footer.php</p>";
    wp_footer(); ?>

The wp_footer() function hooks in the JavaScript that controls the Admin toolbar that appears when an admin user is logged into their WordPress account.

Next, it was time to migrate some PHP and HTML code from the prototype to the theme files

In header.php, I copied everything from the header template up to the opening body tag. There’s additional HTML that includes template parts to be added, but I’ll come to that later on. The focus at the moment is to get the JavaScript and CSS enqueued and working and leaving the template parts out for now allows me to do that.

We’ll need to trim down a few redundant references to Slick Carousel and other JavaScript files as well, but again this can be refined when the theme assets are enqueued.

Code migration to theme files

This is a careful process of copying HTML and CSS code to the appropriate places in my theme directory
For the moment I’m removing all references to template parts during this process.

I will be creating more theme files as the Theme Development progresses but for now, everything can be copied over from one index.php file to the other; from one page.php template file to the other; from one single.php to the other, and so on.

Once this is done, I can verify that the page, index, and 404 templates are being correctly displayed. For the archive and search templates, I will need to create a page with a defined slug to return those templates.

But let’s get the Scripts and CSS working first.

To get the main stylesheet working, we need to use a function to enqueue the file in WordPress with the  wp_register_style() function. It goes in functions.php and is designed to look for the existence of a style.css file in the root of the directory. It’s important to include a forward slash before the file name or the file path will be broken.

<?php
function enqueue_custom_styles() {

    wp_register_style('custom-style', get_template_directory_uri() 
    . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('custom-style');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

In the same way, we use the wp_register_script() function to get a reference to the main javascript file. The reference to jQuery is to make sure it is added as a dependency which is important for the Slick Carousel to work on the homepage.

<?php

// ENQUEUE STYLESHEET AND JAVASCRIPT ASSETS
function enqueue_custom_scripts() {

    wp_register_script('custom-script', get_template_directory_uri() . 
    '/app.js', array('jquery'), '1.0', true);
    // wp_enqueue_script('custom-script');
}

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

However, with those functions in place, there’s still a problem. By default when you enqueue stylesheet and JavaScript files, WordPress automatically adds versioning to the filenames which breaks the file path.

Simply including the function below triggers a WordPress function that removes this from every filename in the project.

<?php

    // REMOVE wp version number from scripts and styles
    function remove_css_js_version( $src ) {

    if( strpos( $src, '?ver=' ) )
        $src = remove_query_arg( 'ver', $src );
        return $src;
    }

A huge part of the design of the website is the inclusion of the main background image that covers the span of the browser. But path is broken.

background-size: cover;

The image has been moved to a directory 3 layers into the document tree. The file path is listed below.  And with the file path fixed, it gives us a baseline for every other image that’s in the theme directory.  files --> images --> .

%bg-main {

// background styles
background: url("files/images/backgrounds/page_bg.png");

So with the JavaScript and CSS in place, most of the page is now in working order.

Now, there’s no website header because I opted to leave out the template parts until the above assets were ready. It’s time to fix that.

Using the Template Part for the social media icons as an example, I restored the Template part code,

<div id="links">

    <?php require "template-parts/social.php"; ?>
    . . .
</div>

As expected, it triggered a warning message to the screen that warns that either no such template part file is in the theme, or it can’t find it in the path it’s looking in.

Warning: require(template-parts/social.php): failed to open stream: No such file or directory in

To fix it, I defined the directory constant via PHP and made sure that WordPress came back by one directory before looking for the social.php file.

<div id="links">

    <?php require __DIR__ . "/../template-parts/social.php"; ?>
    . . .
</div>

And after that, the Social icons appeared. When I add the rest of the header, WordPress helpfully displays a warning message that identifies the missing files.

I now have the information I need to add the template files to my theme and copy the appropriate code over to them.

<?php require __DIR__ . "/../template-parts/social.php"; ?>

<?php include __DIR__ . "/../template-parts/subdomain-list.php"; ?>

Finally, I have to use the Template Directory URI function to get the right file path to the image directory.  Repeat this for every image

<a href="page.php">

    <img src="<?php 
        echo get_template_directory_uri(); 
    ?>/files/images/logo.png" id="site_logo">
</a>

We have ended up with several new templates and template parts. There’s still a lot of work to be done to make this a working WordPress theme. The next blog will work on setting up a couple of Menu areas; a couple of WP Queries and get the website linking to the single.php template. I’ll also set out how I made the website navigable in WordPress as well. Join me there!