WordPress Customization

Depending on the theme you choose, WordPress can give you a solid amount of customization out of the gate. However sometimes you just want to take it one step further, wether it’s adding custom post types, creating page templates, adding custom menus, etc.

This post was designed foremost for myself – as a guide, since there are so many different ways you can go about WordPress customization. Some might be better than others, but these are the ways I chose, mostly because of simplicity, ease, or familiarity. If you know of a better way, please comment below! This post was also designed for those looking for help on how to do something, or for the pros who forgot a function and just need a reference to copy and paste segments of code.

“A wise man learns from his mistakes, a wiser man learns from the mistakes of others.”An Old Adage

First things first

There are many ways to install WordPress as you can see from the codex. If your hosting provider supports it, the simplest way is doing a One-Click Install, you can find info depending on your hosting provider:

Especially if you’re a WordPress website developer, there will probably be a troop of plugins you always turn to for whatever reason. Below is my list of plugins that I recommend, to make this easy first download Multi Plugin Installer – this allows you to literally just paste the names of the plugins (like below) into MPI and download all the plugs simultaneously (vs search and install each).

Utilities

Security/Maintenance

Extras

Custom Fields

Appearance

There are several ways you can include custom CSS into WordPress and I’ll explain them below

Using the theme editor in the admin panel and editing your child theme’s CSS

Use a plugin that will add custom CSS

If your theme supports it, maybe it has a CSS editor

Add a theme file to your WordPress directory using FTP, and then enqueueing it

Using the theme editor in the admin panel and editing your child theme’s CSS

This is my opinion is the easiest way. No extra files or plugins to deal with. Plus, since you made a child theme (like you’re supposed to) you have a nice fresh CSS file to add all your customizations.

While in the admin part of WordPress, go to Appearance > Editor and it should default to your current theme’s style.css file. Here is an example of the CSS file I use on my site here:

Quick Tip

Sometimes you need to add the !important modifier to your CSS to force override if it isn’t overriding even after clearing your cache, or to override inline css: #navbar { background-color:transparent !important; }

Use a plugin that will add custom CSS

I’d recommend the Simple Custom CSS plugin. You now go to Appearance > Custom CSS and use the nice syntax editor for adding CSS.

If your theme supports it, maybe it has a CSS editor

You’ll have to check with your theme on this one. If it’s a premium theme there probably is a place to do it. Either your theme has added a custom menu to your admin area that you can use, or maybe it’s within WordPress’ Customizer under Appearance > Customize.

Add a theme file to your WordPress directory using FTP, and then enqueueing it

Yet another way to add custom CSS to your WordPress site is to enqueue it. With WordPress we don’t use the old

<link rel="stylesheet" type="text/css" href="style.css">

method, instead we enqueue them using

wp_enqueue_style( 'style', get_stylesheet_uri() );

inside of our functions.php. More info is found here on WordPress.org.

Design

By default WordPress comes with several types such as Posts, Pages, and Attachments. However your website may require some special types, with custom fields and even a special taxonomy for those types. For example maybe you’re running a website about baseball, and you need a custom post type for Coaches, Teams, and Members. Or you need a portfolio, testimonials, or products type. Luckily this is pretty simple to setup, and there’s a plugin for that! Personally I use an all-in-one plugin called Toolset Types. If you want you can opt for one plugin to make the custom types and one to make custom fields instead. This article by WPBeginner explains in great detail how to do this so you can follow along there also if you want.

Creating a new Post Type

Go to Types > Post Types and click Add New.

Go ahead and fill out the post name, along with your slug and a description. The slug field is what identifies the custom type inside WordPress. It may only contain English letters, digits and underscores. The plural and singular names may contain any characters.

So for our baseball website example

Plural name – Coaches

Singular name – Coach

Slug – coach

Description – Coaches of Baseball Teams

Icon –

On the right hand side you’ll see a setting where you can choose where it will show up on your admin bar. Also you can include if you want to show the number of entries on “At a Glance” widget in admin dashboard. Figure out what makes sense for you then hit Save Post Type and you’re done!

Our new post type that we created

Before we move on, take a moment to make sure all of the post settings are setup correctly for Labels, Options, Sections to display, etc. We decided to disable the WYSIWYG editor and enable comments.

Creating custom fields

When you want to add post fields to edit pages, first, you need to create a new Field Group. Then, you can display it on different edit screens.

To create a new Fields Group, click on Types > Post Fields. Then, click on Add New. Enter the name of the group, give it a description and you can start adding fields to it.

Adding Fields to Groups

Now, it is time to add fields to our group. Click on Add New Field and select from the field types at the dialog box that appears.

All fields have these attributes:

Name – the ‘human’ name of this field. This is how it will appears in the WordPress GUI.

Slug – the ‘computer’ name of this field. It must contain only English letters, digits and hyphens.

Description – a piece of text that would appear next to the field, in edit screens, explaining it.

Placeholder – a short hint that describes the expected value of the field.

Some fields also have these attributes:

Single or repeating field – choose if multiple-instances of this field are allowed or this field can have only one value. Following fields do not feature this option: Checkbox, Checkboxes, Radio, Select and WYSIWYG.

Validation – check this box if you want to make this field mandatory when editing content. Following fields donot feature this option: Checkboxes and WYSIWYG.

Apart from the previous attributes, some fields (i.e. check-boxes, radio options or Skype) require additional information.

Custom fields that we created for out sports team website

After you add field to the group, remember to save it.

You can re-order fields inside the group by clicking on the field and dragging it up or down.

When you expand the field section, there is a Remove field link that deletes the field from the group.

Take Note

Deleting a field from the group will not remove it from the database, it will just not appear under Types control any more. To completely delete a field from the site and the database, you need to go to Types > Post Fields > Post Field Control. On this page, select a post field you want to delete, in the Bulk Actions drop-down menu choose Delete and click the Apply button.

By default this new field group will show up on all post types. Most likely you don’t want this so you can define where to display, by clicking on Edit in the Where to Include These Fields section.

You can control the post fields group display according to:

Post types, like post, page or custom types (most likely)

Taxonomies, such as tags, categories or your custom taxonomy

Templates – if your theme uses different templates, you can display the right post fields used by the template

Data-dependent – according to the values of other post fields

If you’re using more than one display criteria, you will see an option to display the group when all conditions are met or when at least one condition is met.

We set ours to only show on Coach Post Types. Now go ahead and create your first new post using your new type!

We created an example new post of type coach!

Displaying your custom type

I suppose the easiest way would be to use the Views plugin by Toolset (which makes Types) – however this costs $79, so since I’m already familiar with PHP, I have no problem creating the templates that way. I’ll walk you through how to do that here.

You can go ahead and test your work by displaying your custom post type using WordPress’ default archive template by navigating to http://yourdomain.com/postslug if you’re using permalinks or http://yourdomain.com/?post_type=postslug if you’re not. Replace postslug with your custom type slug that you setup earlier. Take note that the default archive template won’t know how YOU want your custom post type displayed, so we’re going to do that in the next step, this is just a test for good measure.

We can see our custom post types being displayed by the default archive template of our theme.

Just in the same way single posts and their archives can be displayed using the single.php and archive.php template files, respectively,

single posts of a custom post type will use single-postslug.php

and their archives will use archive-postslug.php

where postslug is the slug argument of that we set when we created our custom post type.

So for the above example, you could create single-coach.php and archive-coach.php template files for single product posts and their archives. In your theme’s files, you should have a single.php and archive.php file already. Make sure to put the newly created files in the same directory path of your child theme folder, as it is in the parent theme’s folder. For starters copy the contents from these files and put theme into our newly created single-coach.php and archive-coach.php files respectively.

We’re adding the newly created files to our child theme directory

Now we need to tweak these files to display information pulled from our custom post types the way we want it to. On our development website we’re using a theme called Zerif Lite.

First I’ll customize the archive page title. I see in my template file the following code:

else :
_e( 'Archives', 'zerif-lite' );

Instead of Archives I’ll make it say “All Coaches.”

Next thing I see is this inside a while loop.

/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );

What this does is keeps calling content-{post-format}.php recursively and displays those posts. More info on get_template_part(); is found here. So what we need to also do is create a content-coach.php and copy the code from contents.php into content-coach.php as a start.
Next I’ll modify that line in archive-coach.php to pull the updated template as below:

get_template_part( 'content-coach', get_post_format() );

First I want to pull my custom image field and display that. I see the div for that in my content-coach.php

Now we have to repeat this process for when we actually click on one of these coaches. Wordpress will then call the template single.php to render this. Unfortunately once again single.php doesn’t know how to access our custom fields so we’ll have to edit those. Looking at my single-coach.php that I created earlier I see it’s pulling the template part using get_template_part( 'content', 'single' );.

I’ll need to create yet another template file which I’ll call content-coach-single.php. In this naming convention coach is the post type and single is the post format. All this is beyond the scope of this tutorial but you should have basic idea of CPT, coupled with a few Google searches you’ll be making CPTs in no time!

Your theme probably has several different widget areas; one for sidebar widgets or maybe even footer widgets. What if you want another widget area? Maybe something in the header for notifications or sales announcements? Once again with a little modification of some of the PHP files we can achieve this.

Of course you can customize the function name and the name, id, and description of the Widget area. The second part of the code utilities the widgets_init hook, which we are passing our new widget area to be added to our theme. Now we should have a new widget area when we navigate to Appearance > Widgets.

Our new widget area shows up now and we can add widgets to it

Now we need to edit our theme template file and add a small bit of php code here

<?php if ( ! dynamic_sidebar( 'zerif-child-header-widget' ) ); ?>

wherever we want the widget to appear.

I decided to add mine right above the header so it would show up in it’s own bar up top, like an announcement area:

Just like with widget areas, your theme probably at least comes with one menu area. However you may see fit for other menus; maybe a specific one for a one page website (and another for the blog), a footer menu, sidebar menu, etc. Luckily with just a few modifications we can achieve this rather simply.

Here’s our menu locations currently without edits

To add new menu locations we’ll use the following function as provided by the WordPress codex:

Just like that we have a new location – now we have to tell the theme where to put it

For the final step we need to tell our theme where to display it. For this example we’re going to add it to our footer. We’re going to need to copy the exact contents of our footer.php from our parent theme directory to our child theme directory. To display our new menu location, paste the following code exactly where you want it to display in your footer.php.

<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>

If you have multiple menus, just repeat this for where you need them to appear and add some CSS magic to achieve what you want.

We created a new menu and assigned it to our new menu location

Quickly put together here’s our new menu!!

So who wrote this?

Patrick Masters

A Computer Engineering graduate of the University of South Florida - he now applies his skills towards website design, custom web app development, as well as constantly learning new techniques and technologies to satisfy his creative mind!