WordPress PART 3b: Start Customizing WP Themes: Advanced Techniques

This tutorial follows on from where Part 3a left off.

As you venture further into the wonderful worldof WordPress themes, here’s what you will learn:

  1. How to Install Your First Plugin
  2. How to Create a Full Width Responsive Slider
  3. How to Create a Widget Area Anywhere with PHP
  4. How to Create a Widget Area with Plugins
  5. How to Easily Change the CSS Styles of a Child Theme

How to Install Your First Plugin

Ah plugins! Glorious, glorious WordPress plugins! So many toys to play with, but so many options to choose from. It can be daunting to find exactly the right plugin for the functionality you require. But, trust me, once you have been doing this for a while, you’ll learn which ones you like and know which ones you always go back to.

When it came to teaching you about plugins, I chose to start with a slider plugin, as it is a nice functionality you will often require when you start creating WordPress websites. For this lesson I had a simple list of requirements for the plugin:

  1. Ease of use and simplicity.
  2. Responsive. Obviously. Touch enabled would be a nice bonus.
  3. Must have template tags, because we want to add it to the page template we’ve created.
  4. Recently updated, must be compatible with our version of WordPress.

I chose Smart Slider-3. It is a great slider plugin for beginners. It has many different customization options – but not so many that it could get confusing. It is very easy to use. It is the plugin I used to create the slider on my Projects page.

3 ways to find and install new plugins:

  1. You can go to My Sites->Network Admin->Plugins then click on Add New. Then in the search bar on the right, you can enter the name of the plugin, if you know which one you want. Or you can type some search criteria (e.g. Responsive slider template tags) and see what comes up as seen in the image below:

    What is nice about this method, is that WordPress will show you a bunch of plugins that match your criteria as well as the rating and number of active installs, i.e. how many websites are currently using the plugin. It also shows you whether or not the plugin has been updated to be compatible with your version of WordPress.

  2. You can also go to The WordPress Plugin Directory and search there. The search will give you the same info about a plugin as the first method, except that it will give you a version number that the plugin is compatible with, instead of telling you whether or not it is compatible with your specific version. If you find a plugin you want, you can download it in .zip format. Then you can go to My Sites->Network Admin->Plugins->Add New and then click on the Upload Plugin button at the top and upload the .zip.

  3. Lastly, if you know the name of plugin you want, you can go directly to its page on the plugin directory. This method is great because the page has screenshots of the interface and often also of the plugin in use, as well as a FAQ, Support and Reviews section. Here you can download it in .zip format and install it exactly as in method 2 above. You can find Smart Slider-3 here.

Note: Whichever way you choose to install the plugin, it is important to click on Network Activate on the next screen. or the plugin will not be available for use. Plugins are shared across all the sites in a multisite network, meaning that once you have Smart-Slider-3 installed and activated, you can use it to create sliders on any future sites you will create, within your network.

Go to My Sites->Your Site Name->Dashboard. You will now see Smart Slider in the menu near the bottom. When you click on it for the first time it will open starting with a useful 12 minute tutorial video. You can watch that for clarity, as it’s a nice little extra from the developers. When you’re done, exit the video screen and your slider dashboard should look similar to the image below:

Click the green Create Slider button and this screen will popup:

The images are 1000 x 451px wide, but you can set the width and height to be whatever you like. Set that and choose which kind of slider you’d like. Then click Create.

Click the green Add image slide button. This will open the Media Library. Select all 5 images and click the blue Select button.

I am not going to go through all the possible customization options. The nice thing is that you have the blue Preview button at the top. Play around a bit, change things, preview them, see what you like and don’t like for your own slider. Once you are happy, save your slider.

Note: I just want to mention one thing when it comes to UX. As a user it can be irritating to me, when I spend time on a page with a slider that is set to autoplay. I would say for user experience, if you do choose to autoplay a slider, give the user the option to pause/play. Luckily, Smart Slider-3 does have that option.

The most important thing is that you must copy the ALL the PHP code that I have marked in the image above. Go to My Sites->Network Admin->Themes. Click on the Edit link under your child theme. Open our Custom Full Width Page Template and paste the slider PHP code like below:

twentysixteen-child/page-templates/full-width.php
<?php 
/* Template Name: Custom Full Width */ 

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<!--Paste slider code here -->
		<?php
			`echo do_shortcode([ smartslider3 slider=3 ]');
		?>
	</main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>

Remember to click the blue Update File button at the bottom! Yay! Go look at all the hard work you have done! You have made a slider and it really was that easy!

How to Create a Widget Area Anywhere

What is a widget? It is a little block that performs a specific function. The sidebar that you associate with most WordPress sites, is a widget area, or more correctly a widget-ready area. Widget areas are also called sidebars, even when they are not on the side. The recent posts, recent comments, categories etc. blocks that you often see in WordPress are all separate widgets. Let’s go to Your Site name->Dashboard->Appearance->Widgets for more clarity.

You will see that the Twenty Sixteen theme comes with 3 widget-ready areas. How many widget-areas a themes has can vary. Some themes have only the traditional sidebar, some themes can have more.

We have taken all 3 of these areas out when we created our page template, so that I can teach you how to create your own when a theme does not have a widget-ready area where you want it. So, while all future pages you may create with the default page template will have these three widget-ready areas, our Custom Full Width Page Template does not have any at the moment.

For practice, you can drag and drop some of the widgets on the left-hand side into those three widget areas on the right. You can also click on a specific widget, then select the sidebar you want to add it to. Now go to your blog page, then click on the “Hello World” post to see all 3 widget areas in action.

Note: The PHP code I am going to show you below is good to know for whenever you need to create a widget area, but it is not actually the one we’re going to use. The reason is that I want to create a responsive, horizontal widget area below our slider. It can certainly be done this way, but it can be a pain to get everything to line up and to write all the extra media queries to make it responsive, as well.

The great thing about WordPress is that for practically every problem you can imagine, someone has already created a plugin to make you life easier. And I have just such a plugin.

The instructions below are still good for future reference.

How to Create a Widget Area with PHP:

twentysixteen-child/functions.php

In the Editor add this code to the bottom of your child’s functions.php file.

/**
 * Register Widget Area.
 *
 */
function body_widgets_init() {

	register_sidebar( array(
		'name' => 'Body Sidebar',
		'id' => 'body_sidebar',
		'before_widget' => '<div id="body-widget">',
		'after_widget' => '</div>',
		'before_title' => '<h2 class="body_title">',
		'after_title' => '</h2>',
	) );
}
add_action( 'widgets_init', 'body_widgets_init' );

Body is just the name I chose for this sidebar. You could replace that with whichever name you’d like. You could create many widget areas like this, just give each a unique id.

twentysixteen-child/page-templates/full-width.php

To use the widget area you just place the following code wherever you’d like it to appear. I’m placing it underneath the slider in this example.

<?php 
/* Template Name: Custom Full Width */ 

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<!--Paste slider code here -->
		<?php
			echo do_shortcode('[ smartslider3 slider=3 ]');
		?>
		<!--Code to create a widget area -->
		<?php 
			if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('body_sidebar') ) : 
			endif;
		?>
	</main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>

And that is all it would take. When I go to My Site Name->Dashboard->Appearance->Widgets, the new sidebar will appear there, as in the image below.

When I drag a few random widgets into it, it would appear like this on my home page and it would take some CSS to make it appear the way I want for this site:

How to Create a Widget Area with Plugins:

For this part, you will need 4 plugins. The Responsive Column Widgets, Recent Posts Widget Extended, Easy Profile Widget and Social Media Widget. Download all 4 from these links and install them like I showed you, and remember to Network Activate.

About the plugins I chose:

Recent Posts Widget Extended: On the Widgets page, you would have seen that WordPress has a default Recent Posts Widget already. That widget is fine if you want to just display the post titles of the most recent posts. I am using Recent Posts Widget Extended, because besides the title, you can display a thumbnail and an excerpt from the post.

To display recent posts, we need blog posts first. To make it easier on you, I have included some filler text and featured images in the .zip which you downloaded earlier.

Thank you very much to the following people for making their images available for our use via http://www.freestockphotos.biz/:

  1. “Sunset” by Bud is licensed under Creative Commons Attribution Share-Alike 2.0.
  2. “Dusk Explorer” by Luis Medina is licensed under Creative Commons Attribution Share-Alike 2.0.
  3. “Seagulls flying over the beach at sunset” by Benjamin Miller is licensed under FSP Standard License

Upload the images to your Media Library like I showed you earlier. Then go to My Sites->Your Site Name->Dashboard->Posts->Add New which looks like this:

Add a title and some filler text. Click on the Featured Image block in the right hand column at the very bottom, and select one of the images from your Media Library and make up some categories and tags. Once you have done that, click the blue Publish button. Create a couple more posts in the same way.

Easy Profile Widget: This plugin helps you display an About Me Section easily on your WordPress sidebar widgets. Easy Profile Widget is used to display a user profile section with avatar and custom read more link. It uses your Gravatar profile image. If you do not know what Gravatar is, go here. The read more link will then lead to your About Me page if you have one or, alternatively, this widget can be a standalone About Me section, which is how we will be using it.

Social Media Widget: There are MANY free social media plugins. I personally am in love with Ultimate Social Media Icons PLUS, because the customization options are endless. But, if you are not familiar with it, all the options could make your head spin. I chose this one for this tutorial, because it has some nice options e.g. practically every social media platform you can think of in nice organized categories, 4 icon sets to choose from or the ability to use your own custom set, 4 sizes for icons, or your own custom size and some fun animations to make your social media icons stand out.

Let’s Create That Responsive Widget Column Now:

Go to My Sites->Your Site Name->Dashboard->Appearance at the bottom of the list you will see Responsive Column Widgets. Click on that:

Again, I’m not going through all the settings. You can play with them to see the different options. I am only going to mention the ones that are relevant to this exercise:

Widget Box Beginning Tag: Give this a name that is unique. We will be using this class when we customize the CSS. I called mine <div class="body_widget_area">

.

Widget Beginning Tag: I called mine <div class="body_widget">

.

Starting Tag for Widget Title: I called mine <h3 class="body-widget-title">

.

Numbers of Columns: For what we are creating we need this to be set to 3. (One column each for our recent posts, social media icons and profile block)

Save your changes. Then click the Manage tag. You should see this screen:

Copy the PHP code which I indicated for you in the image. Go to My Sites->Network Admin->Themes->Twenty Sixteen Child Theme->Edit->Custom Full Width Page Template and make it look like this:

twentysixteen-child/page-templates/full-width.php
<?php 
/* Template Name: Custom Full Width */ 

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<!--Paste slider code here -->
		<?php
			echo do_shortcode('[ smartslider3 slider=3 ]');
		?>
		<!--Code to create our reponsive column widget area -->
		<?php ResponsiveColumnWidgets(); ?>
	</main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>

Good Stuff! Now go to our widgets page (My sites->Your Site Name->Dashboard->Appearance->Widgets). On the right-hand side, you will see our new widget area and on the left, in the list of widgets, you will see the 3 widgets we are going to be using.

Let’s start with Recent Posts Extended. You can either click on it, then select the sidebar you want to add it to and then click Add Widget like in the image below,

or, you can just drag it to the widget area where you want it. Either way, let’s go look at its settings. See the image for the settings I chose. Once you are satisfied with your settings, click the blue Save button

Next, drag or select the Social Media Widget. Again, see the image below for the settings I used. and remember to Save your settings:

Lastly, let’s add that profile block. Set you settings and in the Description tab select Custom Description and add some text. See the image below:

How to Change the CSS Styles of a Child Theme

You may have heard of the term ‘Developing in the Browser’ before. This is not exactly what we’ll be doing, but using the browser’s built-in development tools is a nice technique to use when you are customizing a theme and only making a few changes. It allows you to immediately see the effect of the changes you are making.

I am using Firefox, but if you press F12 on most modern browsers, that will bring up the Inspector.

On the left hand side, you can then highlight the element and the current styles will be shown on the right hand side. Here you can now add or change whatever styles you like, as I did in the image. If you are not happy with your changes, you can simply refresh the browser. Or your changes will be gone and you can start again.

If you like your changes, you can transfer them to your stylesheet by copying and pasting them. Go to My Sites->Network Admin->Themes->Twenty Sixteen Child Theme->Edit->Stylesheet :

twentysixteen-child/style.css
.site-header-main {
    background-color: #000;
    padding: 2%;
}

Below are all the styles I changed. Do remember to keep your stylesheet organized by putting everything in its correct category.

twentysixteen-child/style.css
.site-header-main {
    background-color: #000;
    padding: 2%;
}


.site-header {
    padding: 0;
}

.site-branding .site-title a {
    color: #fff;
}


.main-navigation a {
    color: #fff;
}

.main-navigation .primary-menu > li {
    float: left;
    padding: 20px;
}


.rpwe-block a {
    display: inline !important;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 1.2em;
}

.site-footer {
    background-color: #000;
    padding: 2%;
}

.site-info {
    margin-left: 35%;
    color: #fff;
}

And that, my friend, is that! You have learned many new techniques that are sure to be of use on your journey to becoming a WordPress developer. Next time I am going to teach you how to use possibly the most important and impressive of all WordPress plugins: WooCommerce! I will take you through the whole process of setting up a functioning ecommerce website, shopping cart, payment processors, checkout-all of it!

Until then,

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *