WordPress Customization

Patrick Masters Web Development, Website Design, WordPress, WP Design 0 Comments

wordpress-customization-development

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
Want me to build your site instead?

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:

After the install choose a theme from either the WordPress repository, Google, or something like ThemeForest

Now we need to make a child theme.  The purpose of a child theme is so that when our main theme is updated, all of our changes aren’t overridden. More here at the WordPress Codex.

Here’s the order in which I attempt this:

  • See if the theme/framework developers provide a child theme.  (see picture)
  • Use the plugin One-Click Child Theme – it does what it says!
  • The manual method – since the top 2 work 99% of the time, here is a post on creating a child theme manually
wordpress-customization-childtheme

This theme offers a downloadable child theme

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).

WordPress Plugins:

Multi Plugin Installer – https://wordpress.org/plugins/multi-plugin-installer/

Media

Enable Media Replace

Media File Renamer

Insanity

WP Smush

SEO

Google Analytics Dashboard for WP

Yoast SEO

Performance

Jetpack by WordPress.com

Social

NextScripts: Social Networks Auto-Poster

Utilities

Unobtrusive Admin Bar

Security/Maintenance

UpdraftPlus – Backup/Restore

Wordfence Security

Extras

Revolution Slider

Custom Fields

Toolset Types

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:

/*
Theme Name: X - Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x
*/
/*--------------------------------------------------------------
Custom PM CSS to "fix" global elements
--------------------------------------------------------------*/
--css here--

/* Main Navbar
--------------------------------------------------------------*/
--css here--

/* Skill bars / Counters
--------------------------------------------------------------*/
--css here--

/* Buttons
--------------------------------------------------------------*/
--css here--

/* Featured & Custom Headlines
--------------------------------------------------------------*/
--css here--

/* Feature Boxes
--------------------------------------------------------------*/
--css here--

/* Image Overlays
--------------------------------------------------------------*/
--css here--

/* Footer
--------------------------------------------------------------*/
--css here--

/* Widgets
--------------------------------------------------------------*/
--css here--

/* Accordion
--------------------------------------------------------------*/
--css here--

/*--------------------------------------------------------------
Portfolios/Blog
--------------------------------------------------------------*/
--css here--

/* Breadcrumb
--------------------------------------------------------------*/
--css here--

/*--------------------------------------------------------------
Contact Form by Jetpack
--------------------------------------------------------------*/
--css here--

/*--------------------------------------------------------------
Responsiveness
--------------------------------------------------------------*/
--@media css 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.

wordpress-customization-simplecustomcss

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!

wordpress-customization-new-type

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: CheckboxCheckboxesRadioSelect and WYSIWYG.
  • Validation – check this box if you want to make this field mandatory when editing content. Following fields do not feature this option: Checkboxes and WYSIWYG.

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

wordpress-customization-custom-field

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!

wordpress-customization-add-coach

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.

wordpress-customization-archives

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.

wordpress-customization-filezilla

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

<div class="post-img-wrap">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail("post-thumbnail"); ?>
</a>
</div>

Instead of pulling from the_post_thumbnail("post-thumbnail"); since I am using the Types plugin, I look at their API documentation to find that the php code I need to render the image is

types_render_field( "my-image", array( "alt" => "blue bird", "width" => "300", "height" => "200", "proportional" => "true" ) )

I repeated the process to render the fields from the coach email and team that the coach is apart of and roughly putting it together came up with this:


<span class="team-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo(types_render_field( "team", array())); ?></a></span>
<br /><br />
<span>Email: <?php echo(types_render_field( "coach-email", array())); ?></span>
<br /><br />
<span>View now to see detailed stats, team info, and more!</span>

with a little CSS magic and PHP manipulation we came up with this!

wordpress-customization-coaches

Our new archives page for our custom post type of type “coach”

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.

wordpress-customization-widget-areas

Here are the current widget areas of our theme – Zerif Lite

Navigate to Appearance > Editor and edit your child theme’s function.php and add the following:

function zerif_header_widget_init() {
    register_sidebar(array(
        'name' => 'Header',    
        'id' => 'zerif-child-header-widget',
        'description' => 'This widget are will display at the top of the website.',
        'before_widget' => '<div id="zerif-child-header-widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}
 
add_action( 'widgets_init', 'zerif_header_widget_init' );

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.

wordpress-customization-new-widget-areas

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:

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

<header id="home" class="header">

For the final steps I created the following CSS for my new announcement area:

#zerif-child-header-widget {
	background-color: #fffbcc;
	padding: 10px;
	color: #777;
	font-size: 14px;
	line-height: 23px;
}

#zerif-child-header-widget h3 {
	background-color: #d65050;
	border-radius: 3px;
	color: #fff;
	margin-right: 10px;
	font-size: 12px;
	padding: 8px 5px;
	text-transform: uppercase;
	display: inline;
}

#zerif-child-header-widget .textwidget {
	display: inline;
}

Now all my client has to do is add a text widget and set the title and content for it and they’re all set! Here’s what it looks like on the front-end:

wordpress-customization-banner

Our final product – a cool announcement banner that can easily be set through a widget!

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.

wordpress-customization-menu

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:

function register_my_menu() {
	register_nav_menu('footer-menu',__( 'Footer Menu' ));
}
add_action( 'init', 'register_my_menu' );

or to add multiple menus in one function:

function register_my_menus() {
	register_nav_menus(
		array(
			'footer-menu' => __( 'Footer Menu' ),
			'another-menu' => __( 'Another Menu' )
		)
	);
}
add_action( 'init', 'register_my_menus' );

wordpress-customization-menu2

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.

wordpress-customization-menu3

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


wordpress-customization-footer-menu

Quickly put together here’s our new menu!!

So who wrote this?

Patrick Masters

Facebook Twitter Google+

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!

Leave a Reply