These days I recommend using the Genesis Framework for WordPress and in the sites I build I incorporate the new Bootstrap v4 grid system into that.
6. Load (enqueue) the javascript and jQuery files the proper WordPress way
In step 4 we removed the links to the javascript files and the inline jquery code from our footer. Time to put them back in – the WordPress way. Go back to your functions.php file that you created earlier and add in this code.
function biscuits_enqueue() {
wp_enqueue_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js', array( 'jquery') );
wp_enqueue_script( 'jquery-easing', get_template_directory_uri(). '/js/jquery.easing.1.3.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-mobile', get_template_directory_uri(). '/js/jquery.mobile.customized.min.js', array( 'jquery' ) );
wp_enqueue_script( 'camera', get_template_directory_uri(). '/js/camera.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap', get_template_directory_uri(). '/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'superfish', get_template_directory_uri(). '/js/superfish.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-prettyPhoto', get_template_directory_uri(). '/js/jquery.prettyPhoto.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-ui-to-top', get_template_directory_uri(). '/js/jquery.ui.totop.js', array( 'jquery' ) );
wp_enqueue_script( 'custom', get_template_directory_uri(). '/js/custom.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-jcarousel', get_template_directory_uri(). '/js/jquery.jcarousel.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-tweet', get_template_directory_uri(). '/js/jquery.tweet.js', array( 'jquery' ) );
wp_enqueue_script( 'myscript', get_template_directory_uri(). '/js/myscript.js', array( 'jquery' ) );
}
add_action('wp_footer', 'biscuits_enqueue');
What we’re doing here is we’re queuing up some javascript files in WordPress, and telling it which ones are jQuery ones. The first section of code is registering the name of the code and telling WordPress its location. The add_action line is telling WordPress where/when to execute this biscuits_enqueue function – in this case it’s in the footer, or it could be add_action('init', 'biscuits_enqueue') if we wanted to load the javascript files as soon as the page initiates (i.e. put it in the <head> section).
As it is, WordPress will slot them in wherever it comes across that php wp_footer(); function that we put at the bottom of the footer.php template. It’s good practice to load your javascript files at the bottom of the page so your text and images don’t have to hang around waiting for anything.
A few things to note here:
- There’s no need to enqueue the main jquery script file itself as that’s already included in your WordPress installation.
- Marking the files with
array( 'jquery' )tells WordPress that they are dependent on jQuery so it should make sure that is loaded before these files are. - It still follows the order they are listed here, so if you have a
bootstrap.jsand abootstrap-responsive.jsfile for example, list them in that order as the responsive one is supposed to overrride the main one (just as it does with the Bootstrap CSS files) - Whilst most of these external files will work OK in WordPress, you may sometimes get errors and the scripts won’t seem to be working. This is usually caused by the ‘no-conflict’ issue whereby the scripts are using $ as the default jQuery variable, but WordPress needs you to use ‘jQuery’ instead of ‘$’, or to wrap the functions up in a jQuery wrapper. See this tutorial on jQuery and WordPress for more.
At the bottom of our original home page html template were some lines of custom javascript that were binding the functions in the external jquery scripts to some of the elements on our page:
So for example the jquery.camera.js file creates the animation and transition functionality that the carousel at the top of the home page uses. It has a js function called camera, but the external script won’t know what the html elements on our page are called, so here we’re telling it to look for the div id of camera_wrap_1 and attaching the camera function to it.
We could add that line at the bottom of the jquery.camera.js file itself but it’s better practice to keep customisations like this separate from the core files.
Let’s add all those lines back in to our functions.php file underneath the enqueue function used earlier:
function biscuit_custom_js_settings() { ?> Note an important difference to the code from the original one index.html file - we've swapped $(document).ready(function)$ for
jquery(document).ready(function)$ - that's so WordPress knows that this script is a jQuery one. Normally the $ variable is just used by jQuery, but with big CMS sytems like WordPress, you need to be more specific. We could also have wrapped the original script in a wrapper like this
function {
..your jquery script here
)}(jQuery);
See that tutorial about WordPress and jQuery to play nicely together for more on this.
7. Understanding the WordPress Loop
'The Loop' is one of the most fundamental features of WordPress. Whilst you won't need to fully understand how to manipulate it, a little basic understanding can take you a long way.
In the static html template we used earlier, you have to manually change the Latest News, Recent blog items, slider images etc every time you want to add a new one because they're hard coded in HTML into the site. This is a bit of a pain - which is why most sites use a Content Management System like WordPress these days. On the other hand, it makes putting the page together a bit easier because you're just dealing with the HTML you're directly adding yourself.
All your content and images in WordPress are stored in a database so your WordPress page needs to ask the database to supply it with the content it needs - e.g. 'Give me the 5 latest blog post titles, starting with the most recent', or 'show the carousel images of all the featured posts'
Loops are one of the basic buidling blocks of most programming languages. They're basically a query that keeps repeating itself until its conditions have been satisfied. In the first case you'd tell the database to order all of the blog posts in decsending order of published date, then it would run a loop 5 times to get the next Title in the sequence. In the second case, you'd ask the database to select all of the posts that have been tagged as 'Featured', then get the Featured image of each one. That would loop until all of the Featured posts have been found and their images retrieved.
The syntax for manipulating the Loop can seem a bit complicated at first but it's very powerful once you get the hang of it. It's also extremely well documented on the WordPress codex and in forums like StackOverflow. As long as you know what kind of query you're after, you can usually find the answer with a Google search.
To complicate things before we even begin, there's two different methods of querying the loop - wp_query and get_posts. The wp_query one is generally used to display a single page (you use the loop to choose if/where you want the title, body, image, date etc) The get_posts one is generally used where you have more than one different loop happening in one page/template. That's the case here as we'll be running a few different loops to put all the dynamic content on our homepage. Don't worry about that too much now. Let's dive straight in as that's often the best way to learn...
Once you've got the code here up and running here's some recommended reading to learn more about the loop.
8. Using the Loop to display latest/featured posts
Rather than start at the top with the big image carousel, we'll begin with the list of 5 recent post titles in the Latest News block. Here's the hard-coded HTML for it:
So it's a fairly simple unordered list of 5 titles with the Article date underneath and then a styled 'read more' link to the blog post.
Before starting to write the Loop query we need to decide how we should set up the 'Latest news' in WordPress. Is it a list of all the posts? is 'News' going to be a separate custom post type? is it a category or tag? There's no right or wrong answer here and it depends on how you want to structure your site. For simplicity's sake I'm going to create 'News' as a WordPress category - I'll do that now in Dashboard>Posts>Categories and create a new one called News. When that's done I will hover over 'News' in the list of categories and the hyperlink for editing it will contain a string something similar to '&tag_ID=2'. I'll make a note of that as we'll need it later.
Then I'll go to Dashboard>Posts to get the list of all my dummy content posts. I will 'Quick edit' 6 randomly chosen dummy posts to assign the News category to them.
Replace the contents of the div mentioned above in front.php with this:
PHP is a bit like French - it's hard to write but you can sometimes get the gist of what's being said if you see it written down. This code is basically saying:
Line 6: We're defining a variable called newsposts which is a query of the database for posts which are in category 2, and we just want to show 5 of them. By default it will pick them starting from the most recent - which is what we want here.
Lines 8-9: - this is where the loop starts - it is looping around each of the posts found in the above query and fetching all the data for that post.
Lines 11-15: Inside the li tags we're replicating the HTML markup of one of the existing li items, but we're using WordPress template tags to get the title, date and permalink (the hyperlink to that post's page) dynamically. There's a template tag for all the elements commonly used - see the full list in the WordPress codex.
Line 17: The endforeach line at the end closes the loop - in our case it will be once it has been round 5 times to gather our 5 posts.
OK that was a fairly gentle (believe it or not!) introduction to manipulating the Loop. It has a bit of a steep learning curve but I think it's best to start with something that works and then dissect/edit it rather than start from scratch.
Next we're returning to the top of the page to tackle the carousel at the top...
9. The content sliders and carousels
Again, before we get stuck in to the coding we need to decide what kind of content that carousel will have in it. A common use would be that the images will link through to some posts that we want to feature/highlight prominently. It must be easy for the site administrator to add and remove slides from it.
There's lots of ways we could do this (with tagging for example) but I'm going to use the 'Sticky' posts functionality that's already built in as standard to WordPress. If you go to 4 random posts in the quick edit and tick the 'content is sticky' box then we'll have something to work with.
We'll also need to put the images for the content slider somewhere. We could set up the slider-image as a custom field, but for a fairly basic site like this we will use the 'Featured Image' field which is a built-in default on the right hand side of the create/edit post page in the Dashboard. This is what WordPress uses for thumbnails and it is the default image associated with that page/post whenever the WordPress Loop queries it.
Note - don't be confused by the term 'thumbnail' here. Although you normally think of thumbnail images as being very small, they can be as big as you like.
At a full-screen display, I can see that the images in that carousel are all 1170x424 pixels. An easy way to see the dimensions is to right-click on an image in Firefox and choose 'View Image Info'. Since our carousel will only look properly if all the images are the same exact size, we will register those dimensions in WordPress so it can resize/crop them if it needs to. These images are very letterbox shaped and we probably want to make sure that they look nice so I'd always create or edit images to this exact size myself in Fireworks/Photoshop/Pixlr - it only takes a minute to do. As a backup, we'll set WordPress to resize and crop an image to the right size, but it will crop to the middle of the picture and doesn't know if it's cutting the subject's head off for example..
There's two ways we can register that custom image size in WordPress - using a plugin or coding it into the functions.php file. Although I'm not in favour of installing plugins willy nilly, this is a good use for one as it will make it a bit easier for the site administrator to add in new image sizes later on.
The plugin solution:
Go to Dashboard>Plugins>Add New and look for Simple Image Sizes. Install it and follow thw simple instructions to add in a custom image size called 'home-slider' that is 1170 x 424 pixels.
The functions.php solution:
To manually create our custom image size we can add this code to our functions.php file. It doesn't really matter where, though I tend to keep mine near the top
//CREATE CUSTOM IMAGE SIZES
add_theme_support( 'post-thumbnails' );
add_image_size( 'home-slider', 1170, 424, true );
The 'true' at the end there means that it will ???? crop then scale - need to look into. Square thumbnails - better to crop, rectangular ones not??? The 'home-slider' is the name I've assigned to it - and it's what we'll use when asking for that particular sized thumbnal.
If you use your FTP program to look in the wp-content/something/somrhting folder you will see that WordPress creates a folder for each custom image size, and it will create and store a precisely sized version of each image in there. Don't go overboard with adding loads of sizes if the precise height and width don't need to be defined - each image size is stored and treated as separate files. Your browser will easily shrink an image to a bit smaller (when the Bootsrap span width reduces as the browser window size reduces for example) and if it has already loaded a 670px width image in a page, it's a bit of a waste of bandwidth asking it to then load a separate 540px width version later on doen the page.
Once you've got that 'home-slider' image size registered, go back into your Dashboard and add some Featured Images to the posts you made Sticky earlier - either by uploading new image files, or by choosing some existing ones that the Dummy content module has inserted into the Media Library.
Blimey, that was quite a detour
So, we've stored our custom image size in WordPress so it will know exactly what size to display the images in the carousel at the top of the home page. Time to dive back into the Loop.
Here's the original HTML code for the carousel. Note that the camera.js jQuery script is being used to power the transitions and animation.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
This is using divs rather than a ul, but the principle is the same, we'll restyle one of them - replacing the HTML elements with WordPress template tags, then let the loop repeat until it has picked up all of the slides.
Here's the WordPress version:
