Jonnie Grieve Digital Media: Website Blog.

Archived Posts: April 2016 – Jonnie Grieve Digital Media posts.

A simple web page with Bootstrap 4

Here’s a new piece of  content I just uploaded to my website.  To my very pleasant surprise, a new Treehouse course was unveiled in the course roadmap and released in as little as 2 weeks. And I’m excited because it covers the up to date version of the front end framework, Bootstrap.

I created a new web page on my portfolio site that covers this. A simple holding page for a fictitious tourist page for my village.  It’s a little bland at the moment but the point is, I created it in next to no time at all thanks to Bootstraps capabilities. Simply by adding classes to HTML elements I can add colour, and spacing and even javascript elements to any page that is linked to Bootstraps core files.

I’ll be adding to it as I go along so please keep checking back as the new site grows.

Making a WordPress Theme #2

By this point, we’ve linked the CSS and JS files and created default WordPress templates so the website takes some semblance of shape.

The problem is it is empty of content and, depending on what text has been entered into the admin area via pages and posts and there’s no means of getting around the site. No links.

But we can’t just display static data on a WordPress site. In order to update content and make sure changes we make to our content update on the website, it must be pulled in dynamically via the WordPress Loop.

But there’s a little more to it than that. We also have to dynamically pull in other pieces of content too, such as the website title and any permalinks so that pages link together correctly. Basically, any content that changes from page to page needs a WordPress function or a custom function to show the appropriate content.

Before we go into the WordPress loop, I’ll explain some of these functions.

Pulling in Dynamic Content

Remember now that all the design work is contained in php template files. That is how WordPress Works and unique content is generated in the admin area via Pages and Posts.

But there are smaller functions that echo out content sni  ppers outside the scope of the WordPress loop.

In header.php common ones are

wp_title();
wp_head();
bloginfo();

As we go through the markup there are certain things that need to be changed. Otherwise the same data will be displayed each time header.php and footer.php are called. So instead of static text inside for example the title tag. wp_title() is used, inside a separate PHP block.

Example: header.php
<!doctype html>
<head>
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>

wp_head() is a small piece of code that accomplishes a lot of tasks. It is this function that is responsible for enqueing the files we linked to in the functions.php file. All the styling, all the functionality via the javascript, if we didn’t have wp_head(); none of this would work.

<a href=”<?php bloginfo(‘url’); ?>”>
<img src = “<?php bloginfo(‘template_url’); ?>/img/jgdmLogo.png” id = “jgdmLogo” alt = “<?php bloginfo(‘name’); ?>
An independent web design business covering North East England and Beyond” />
</a>

the bloginfo(); function takes specific parameters as strings e.g. url, name and description, in order to display content to the screen. Another parameter, “template_url” is an argument that grabs the path to the template directory, wherever that lives of your WordPress installation. It can be used to generate a path to an image file that hasn’t been uploaded via the WordPress admin area.

<?php bloginfo(‘url’); ?>
<?php bloginfo(‘template_url’); ?>
<?php bloginfo(‘name’); ?>
<?php bloginfo(‘description’); ?>
Example: footer.php
<?php echo date(‘Y’); ?> – dynamically load copyright data.
<?php wp_footer(); ?> – loads wp menu bar

In this example there are 2 key functions that generate unique content. date() with a parameter displays a dynamically date to the screen based on a certain timestamp.

wp_footer(); works in a similar way to wp_head(). It will enqueue any files set in functions.php to loading the footer of the code as well as the JavaScript files that load the WordPress menu bar.

The WordPress Loop

In order to get the main content for any WordPress website the WordPress loop must be used. It can be used in one or two ways but the format below is in my opinion is the simplest;

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!– content –>
<?php endwhile; else : ?>
//alternative text if no posts found.
<p><?php _e( ‘Sorry, no posts matched your criteria.’ ); ?></p>
<?php endif; ?>

This performs a simple check to see if there is content to be found and to display the text while there is content. It only needs to be used once because WordPress is smart enough to know which content is assigned to which permalink.

So that’s the syntax. Let me post my example of how the loop is used.

<section class = “mainContent”>
<article class=”content-area”>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php endwhile; else : ?>
<!– –>
<p>Sorry, found no content.</p>
<?php endif; ?>

First you have your opening HTML markup that your CSS will select. It’s important to get this right because there’s no facility in the admin area to affect how the text displays in the admin area, beyond the controls in the text editor. For absolute control you use CSS.

The first line of PHP checks for content from the admin area but doesn’t display it. To display the content we need at the very least a WordPress function called the_content(); This will echo out the text typed into the Admin area text editor. It will generate markup that can be picked up by CSS.

The rest of it is simply closing out the while and if portions of the loop.

Hooking in the Navigation

The WordPress loop pulls in content for all individual pages and posts of your website. Unfortunately it doesn’t do a single thing for displaying your navigation. It’s completely separate to it.

Fortunately, hooking up your websites navigation is fairly straight forward. I’ll go through the steps.

First, in functions.php we need to add support for menus to WordPress because it is not available by default. This is as simple as writing the following below.

<?php add_theme_support($feature, $arguments); ?>

$feature is a list of strings which add certain features. In this example we need to add ‘menus’s as a string parameter. $arguments is optional parameter.  Now, WordPress knows that you want to add a navigation area to your website.

The next thing we need do is let WordPress know that there exists in this theme one or more menus. This is stored as an array in the function register_nav_menus which is in itself stored in a function.

function register_theme_menus() {
register_nav_menus(
array(
‘primary-menu’ => __(‘Primary Menu’)
)
);
}

We then give this a function call the WordPress way making sure we do so whenever the page is loaded.

//when wordpress is initialising, call the above function
add_action(‘init’, ‘register_theme_menus’);

Finally we then find a specific location in our theme template for this menu to do. This is a skill in WordPress because you’ll have a specific format in your static markup and certain CSS styling.

<?php
$defaults = array(
‘container’ => false,
‘theme_location’ => ‘primary-menu’,
‘menu_class’ => ‘nav-collapse’,
);

wp_nav_menu($defaults);
?>

In my example I struggled for longer than I’d care to admit for how to get this to properly style in a WordPress template. It was in the right location but not all of the styling was being picked up. Further complicated by the fact I was trying to use a specific class that was used with a jQuery file.

Eventually I just did this

<nav class = “nav-collapse main-nav”>
<aside class=”hamburger”><img src=”<?php bloginfo(‘template_url’) ?> img/menu.png” /></aside>

<?php

$menu_args = array(
‘container’ => false,
‘theme_location’ => ‘primary-menu’,
‘menu_id’ => ‘navLinks’

);

wp_nav_menu($menu_args);
?>

</nav>

I wrapped the php function in HTML markup (why did I not do this before) and the problems disappeared. I let the markup do the work and in an instant, the navigation was there. Just as I wanted it.

Summary

So now I have a fully functional theme. I have my navigation working. I have one page that will pull in blog posts and the rest of my pages run from the page.php template meaning they display the right content for the appropriate page.

As I write this (14th March 2016) to I could deploy the website now if I wanted. But there’s a bit more to developing a WordPress theme. On my mind at the moment is how I can use and display WordPress widgets. That’ll be my focus in my next blog.

Making my WordPress Theme – Part 1

To kick off my blog which is now integrated into the WordPresss theme of my new website, I wanted to document the process of designing and building the theme that WordPress uses on this website today. This series of blogs is a month in the making but the details and processes of the site are still fresh and relevant today.

Incidentally regrettably the blog is best viewed on a desktop or tablet screen at the moment although I’m doing my best to fix this.

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. This is beneficial as it gives me the perfect platform to add fresh and hopefully engaging content to my website regularly.

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 and this is what this series of 5 blogs will concentrate on.

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 than you may have first thought, certainly to begin with.

Here’s how I got 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 have all you need to let WordPress theme to be activated. You’re good to go ahead 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.

Header

Index

Footer

index.php

And there it is.  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.

What do these parameters 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 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 no content is as yet being pulled in dynamically.

wordpress-ss-3

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

Welcome

Welcome to my blog page. The new home for my website design, development and business blog. I’ll be migrating posts from my WordPress.com blog over the coming week so please check back for regular updates 🙂