Table of Contents

Advanced Guide to Using WordPress: WP Wizardry

By Jacob Roach – Writer
— Last Updated: 15 Jun'18

WordPress is one of the most dense platforms for building your website. In this advanced guide to using WordPress, we’re going to show off just why. Throughout these sections, we’ll cover advanced optimization options, WordPress development and some general tips on the platform as you make your way towards fully mastering it.

Unlike our previous guides, there won’t be many tutorials here. When getting to the advanced end of WordPress, things get far more messy. Here, we’re looking to merely equip you with a baseline knowledge of these complex topics, not fully delve into them. After all, covering full theme development alone would take multiple articles of over 5000 words.

Even so, this guide is designed to push you out of your comfort zone using WordPress, utilizing the many tools online to further your knowledge of the platform and the intricacies of it. If you’re looking for a more basic approach to WordPress, check out our other guides before going through this one.

Advanced Optimization

Throughout our three WordPress guides, we’ve covered various forms of optimization from basic image editing to more advanced plugins like WP-Optimize. In this section, we’re going deep into optimization, touching on how you can speed up your site even more with a CDN, caching and progressive image loading.

Dynamic Content with a CDN

The best way to reduce load times with WordPress is through the use of static content. Static content, such as a blog post, loads far faster on a page over dynamic content, such as a CSS file, which much be fetched and read each time it receives a query.

A CDN, or content delivery network, does just that. It filters through your dynamic content, caches it and serves it up static. A CDN provider (which is separate from a web hosting provider) holds a mass amount of servers around the world to make load times zip by.

Let’s say your web host’s nearest data center to you is in Los Angeles. Someone located in the United States will have a faster response time over someone located in Europe. The latency from transmitting your website data will be longer since it has to travel a further distance.

A CDN alleviates these issues. The network (as long as it’s reputable) will have servers around the world, meaning the European user will receive a cached version of your site from a nearer server. Your speeds will smooth out internationally, ensuring you provide the same experience for any audience no matter where they’re located.

Additionally, a CDN offloads your web host’s resources. Since the parent server doesn’t receive a query each time your website is loaded, the CDN will help prevent traffics spikes and DDoS attacks to make sure your site stays online.

Every CDN available has a slightly different implementation method, so we can’t run over everything. Instead, we’ll focus on Cloudflare, one of the most popular CDNs and a common feature we’ve seen throughout our web hosting reviews. That said, some providers include a free version of Cloudflare with every website, so you don’t need to install it again if that’s the case.

First, go to Cloudflare and sign up for a free account. Once you reach your dashboard, click on “+ add site” in the upper-right corner. Enter your WordPress domain and click on “begin scan.”

After a couple of minutes, Cloudflare will pull up your DNS records as well as two options. To take advantage of the CDN, select “CDN and protection” out of the two. Your A record (your domain) should have an orange cloud displayed in the “status” column. Other records, such as MX records used for email, do not need to use the CDN, so don’t worry if you have a blank space in the status.

Continue on through the set up after you’ve ensured your DNS records are accurate. You can always come back and change this section, though, so don’t worry too much if something needs to be modified later. On the next screen, you’ll select your plan. Cloudflare is a bit expensive, but the free plan should do well for most users.

Now that Cloudflare is up, you need to configure it. Essentially, you need to point your domain towards Cloudflare which will, in turn, point back to your web hosting. Cloudflare simply acts as a proxy, one that unfortunately takes some time to set up.

Go to your domain registrar and point your domain towards Cloudflare’s nameservers. For the screenshot below, we used InMotion (read our InMotion Hosting review) but the process should be fairly simple no matter where your domain is located.

Now that your domain is pointed to Cloudflare, you need to point Cloudflare to your web host. Log into Cloudflare and click on the “DNS” tab in your dashboard. Your A record, which is your domain, should point to your web host’s server IP address. You can easily find this in cPanel (read our best web hosting with cPanel) but just reach out to support if your web host doesn’t support this interface.

After that, Cloudflare is all set up for use with your WordPress site. Still, there is a dedicated plugin that can make managing Cloudflare simple within the WordPress dashboard. Simply install and run the prompts and you should be okay. The only thing you’ll need is a Cloudflare API key which you can find here.

This plugin is pretty great, especially if you have a paid plan. You can view the bandwidth Cloudflare is saving, the incoming requests to the CDN and the number of unique visitors it has served. Paid members will also be able to configure the web application firewall and advanced DDoS protection within the plugin.

Progressive Image Loading

In our previous guide, we talked about optimizing your images for web use through size and resolution adjustments as well as some plugins to cut all of the fat possible. There is more, however, that you can do to decrease load time with images.

The key to shaving a few fractions of a millisecond with images is progressive image loading. That isn’t the same as responsive image loading, though, as the two can often be confused. Progressive image loading refers to when the image loads on the page whereas responsive loading deals with the overall layout of your site.

Essentially, images set to progressively load won’t actually load on the page until a user scrolls down to them. This reduces strain on the server by only loading what’s “above the fold” when someone lands on your site.

You can set all of your images to progressively load through HTML, but this is a rather arduous process. Instead, we recommend you install a lazy loading plugin to handle the leg work for you. Most plugins can lazy load comments and videos as well, so keep that in mind. Here are a few of our favorites:

Optimizing can be done before uploading as well. As mentioned in our previous guide, we recommend .png files for any graphics or screenshots as the format doesn’t break as easily under compression. Photographs, on the other hand, are far better suited as .jpgs.

In most cases, photos are massive files and, even after some resizing, take a while to load on a web page. Most image editing applications will export a baseline optimized .jpg, a slightly smaller file that retains as much detail as possible through compression.

Progressive .jpgs are slightly larger, but use a different method of loading. Instead of trying to load the entire image line by line, a progressive .jpg will load sets of lines over a longer period of time, giving the perception of the image on your page, but allowing more time to load it. It’s like loading up a YouTube video in SD for a few seconds before it automatically jumps to HD (although the technology is different).

This is certainly a secondary optimization measure to using lazy loading. You won’t save any space on your server and your overall page load time won’t be impacted. It can, however, solve the issue of an image randomly popping into the page after it’s been loaded.

Particularly, progressive .jpgs work best for large image files. Small .jpgs should be fine in the baseline format as they’ll load fairly fast on any web page. If you want high resolution photographs, though, progressive .jpgs will ensure there isn’t a black spot on your page while the image is loading.

A Look at WordPress Caching

In our previous guide, we briefing mentioned WordPress caching and why it’s important to speeding up things on your site. We didn’t, however, go into why that’s the case. Here, we’re going to look at WordPress caching in more detail on why it speeds up your site and why, in some cases, it can break your theme.

Let’s start with actually understanding what it is. When someone types in your URL and hits “enter,” a flurry of files begin transferring from the server to the destination machine. Essentially, someone visits your site, WordPress looks up all the files in your database and the web server compiles the data into an HTML page to deliver to the user.

There’s a problem with this approach, though. WordPress generates content dynamically meaning each time a user lands on your site, fresh content is loaded, even if they’ve been there before. It’s largely unnecessary as a blog post and general styling of your site is unlikely to change on a day to day basis.

That’s where caching comes in. It creates a static version of your content and delivers that instead, meaning that when returning visitors come to your site, they’ll see a cached version which should be much faster. It’s reusing data, minimalizing the flow between server and user.

There are two types of caching available: client-side and server-side. Client-side caching is out of your control. It’s used in most modern browsers to speed up load times by reusing the previously downloaded data. Your website (as long as it’s paired with a modern browser) is already performing client-side caching.

Your realm is server-side. There are various caching protocols that make up the whole space of WordPress caching. Here’s a brief description of each:

Page Caching: The purest form of caching. This is the process storing HTML files statically and serving them from the cache. That means fewer executions of PHP scripts and MySQL database queries
Database Caching: This refers to caching the result of a particular database query. Instead of WordPress looking for something in the database each time, the result is stored in the cache and WordPress will load that instead. You’ll have to purge the cache each time you update the database, however
Object Caching: Object caching is built into WordPress from the get-go. It’s similar to database caching, but looks at the results of repeated queries. You won’t have to mess around here much as WordPress will automatically store objects in the cache from the on set
Opcode Caching: WordPress uses a list of PHP scripts at its core. Whenever a PHP script is run, it must be compiled in order to generate an executable code. Opcode caching basically takes the result of the PHP compiler to the cache in order to reduce the number of executions

Do understand that caching requires some sort of storage. Shared hosting (which you can learn about in our best web hosting guide) usually only provides hard disk storage, meaning your cache will take up space on a hard drive. VPS and dedicated servers can take advantage of dedicated RAM, much faster memory that will speed up your caching. Make sure to read our DreamHost review to learn about a WordPress VPS plan that’s excellent.

Now, caching looks like a dream in theory, but can be a bit of a pain in practice. Modern websites have many dynamic features that update even without you changing a single thing. For instance, your Instagram feed will constantly update even though you aren’t actually making changes to your site.

This constantly updated dynamic content will break first when caching, not updating whenever someone lands on your site. The cache is referring to whatever it stored previously, meaning elements like this won’t reload.

Elements like this only break if they use PHP to execute since Opcode caching stores the output. The best solution is to rely on plugins or widgets that use JavaScript or AJAX to generate an output as these operate on the browser’s side. With that, even when pages are cached, the browser will generate dynamic features.

If you rely on a specific feature that uses PHP, then the best solution is to simply turn off caching on that particular page. It can impact your speeds, but it’s better to have a slow functional website then a fast broken one.

We gave some recommendations in our previous guide for caching plugins. For quick reference, here are our three favorites:

Advanced Design Options

With knowledge of child themes, plugins and sidebars, we next want to venture into some more advanced design options in WordPress. We’re going to define the languages used for developing on WordPress as well as briefly go over how to put them in practice on the platform.

Before diving into developing your own plugin, we want to define a few terms. If you’re familiar with HTML, CSS, Javascript and PHP, feel free to skip ahead. For newbies, we’re going to differentiate the four, but make sure you learn the languages if you’re interested in plugin or theme development.

HTML

HTML, or HyperText Markup Language, handles all of the content of your website. This language is the cornerstone of your website. Web browsers fetch up HTML files when your website is accessed and translate the script into your content.

A good way to get a basic understanding of HTML is to switch to the text editor in WordPress. Here, you’ll see basic functions such as embedding videos, adding text modifications and adding images.

This is the basic structure of your website. If we to make an analogy to a building, HTML would be the building itself, independent of what might be inside of it.

CSS

CSS, or Cascading Style Sheets, handle the overall look and styling of your website. That means how posts are displayed, how images show up on the page, the colors, fonts, etc. Anything to do with how your site looks is handled by CSS.

Even though some styling can be done with HTML, such as font modification, CSS handles the overall look of your site that applies to all posts or pages. It provides far more control over the universal colors, layout and font of your website separate from any individual settings.

Continuing with our building analogy, CSS would be the paint job and overall look of the building, as well as the rooms inside of it. HTML handles content, CSS handles styling.

JavaScript

Rounding out the triad of technologies that make up any website, JavaScript handles the responsiveness of your website. It’s not just used for a neat parallax image (although it is used for this purpose) but any interaction someone has with your site.

That means using the search bar, clicking on an image or executing a link. JavaScript is what allows your site to respond to user input, no matter how basic it is. For plugin and theme development, you won’t need to do much with JS.

As far as our building goes, JavaScript is most easily compared to doors, elevators, etc. It turns the proverbial slab of concrete into something functional.

PHP

PHP, or Hypertext Preprocessor, is a server-side scripting language used in back-end web development with MySQL. It’s used to manipulate web pages created with HTML. Every website will have one server-side scripting language in order to execute HTML scripts.

That could be Java (not JavaScript, different things), PHP or Python. Unlike the big three that run through the web browser, PHP scripts are executed on the server itself. Usually, that means storing and taking data from a MySQL database.

Most WordPress sites use PHP, so it’s most important you learn it over Java or Python if you intend to develop on the platform. For our building, PHP would be the architect and contractor that made it happen.

Writing Your Own Plugin

We’ve covered a massive list of plugins between our three WordPress guides. Here, we’re going to break down how you can make your own. You should note, however, that this isn’t a tutorial on PHP. If you have no knowledge of PHP, then you may be able to follow our little guide here, but it won’t have much practical application until you learn the language.

Let’s start with what a plugin actually is, though. Essentially, it’s just a PHP script that modifies something on your website. Themes modify the look of your website and plugins modify how it functions.

It sounds basic enough but the two actually have a lot of crossover. As mentioned in our intermediate guide, every theme has a functions.php file that handles how your site behaves. You could edit this file in order to achieve what you’re going for with a plugin, but it’s not always practical.

A change like the post length or size of comment section can easily be changed in your theme files, but something more intensive, such as a mailing list, is better suited with its own plugin.

Creating a plugin is actually dead simple with WordPress. Access your site via FTP and head down the path “public_html > wp-content > plugins.” Create a new directory and name it whatever you want. For this tutorial, we’re going to just call it “myplugin.”

Open NotePad or any script editor and enter the following:

<?php
  /*
  Plugin Name: My Plugin
  Plugin URI: http://my-fake-plugin.com
  description: >-
I can add plugins to WordPress
  Version: 1.0
  Author: Plugin Developer
  Author URI: http://plugin-developer.com
  License: GPL2
  */
?>

Put that file in the folder your just created and name it “myplugin.php.” Of all the options here, only the plugin name is required, but it’s a good idea to add as much detail as possible if you intend to distribute the plugin online.

After the file is uploaded, you can go into your WordPress dashboard and activate it. Of course, it won’t actually do anything, but this is just a demonstration to show you how the process works. It’s up to you to actually write the script.

It’s not always as simple as typing out your script and throwing it in a folder, though. Sometimes it’s better to break your plugin into multiple files depending on the need. If you’re new to the development process, we recommend looking through the scripts of popular plugins to see how they’re structured.

Before moving on to themes, we want to give some notes on things all plugins need. WordPress provides three hooks to make sure that your plugin only stores information when it’s activated and takes all of that data with it when it’s deactivated or uninstalled.

register_activation_hook(): This is the function that runs when your plugin is activated inside of WordPress. This is the hook that’s called when the plugin is active and executes the first function in the script.
register_deactivation_hook(): Like the hook above, this one triggers WordPress to run a function when the plugin is deactivated. Usually, you won’t delete data here, but trim the fat that’s unnecessary when the plugin isn’t active.
register_uninstall_hook(): This is the function that runs when the your plugin is deleted in the WordPress dashboard. It’s a good area to delete any data that’s left by the plugin. The plugin must be able to operate separately from the hook in order for it to properly uninstall. If you can’t get there, you’ll need to create an uninstall.php file.

We can’t get into the specifics of developing your own plugin as it takes whatever idea you have and, often, some experience in scripting. If you have both, we recommend you take a look at WordPress’ Plugin Handbook to learn the ins and outs of the system.

Writing Your Own Theme

There’s a plugin for just about anything and development is pretty involved if you need something you get find in the plugin database. For many, developing a theme is far more practical. Still, you’ll need a knowledge of CSS and PHP in order to execute your own theme development.

Outside of that knowledge, theme development is quite simple. We’re building on the information in our intermediate guide on child themes, so make sure you read that before continuing (link is above).

There are two options for developing your own theme: through a frame themework or from scratch. We recommend the former as you can get up and running fairly quickly while still maintaining control over the styling of your website.

It’s the same process of using a child theme in WordPress. In this case, the framework is the parent theme and your child theme handles all the styling. Run back the process in the previous guide of installing a theme framework and creating a style.css and functions.php file to tie the two together.

Every framework is different, just like every theme is. Some come with a price tag and some come with different features from others. Make sure to look around to find one that works best for your needs. Here are three of our favorites:

Developing your own theme only technically requires two files: index.php and style.css. However, many themes include a few more files to specify the header, footer and sidebars of a webpage. Here’s a short description of the files most themes will have:

index.php: The core of your theme. This is the main area that will specify where all of your theme options are located. Aptly named, it’s an index for your theme
style.css: This is the overall look of your site. Here, you’ll define the colors, fonts, spacing, etc. of the main content
header.php: The script to generate all header information, including logo, main menu, etc
sidebar.php: All of the information on how sidebars work in your theme. Check out our beginner’s guide (linked above) to learn more about sidebars
footer.php: As self-explanatory as the last three, this handles the footer section of your website

Your goal is start with an index file, using a framework like Bootstrap to get started and expand upon it by breaking that file into separate files for headers, footers and sidebars. Much like plugins, a good exercise is to go through the theme files included with WordPress to see how they’re structured.

In many cases, adopting a framework to build your theme is the best way to go. It’ll get all of the basic scripting out of the way so you have a functional site and allow you to go back and make changes to the overall styling of it.

If you want to take a go at yourself, get ready for the long haul. It’s not as difficult as plugin development in many ways, but far more time consuming. Refer to WordPress’ Theme Handbook to learn all about the format and structure of your theme.

General WordPress Tips

With the complexity of WordPress, it’s easy to get lost in all of the hubbub. As a bow to our three part series on WordPress, we’re going to give you some general tips on using the CMS so you can run your site properly.

Keep it Simple

Above all else, it’s important to keep WordPress as simple as you possibly can. Tons of plugins, custom stylings and intricate post designs rarely pay off anything positive for your site. The results are often slow load times, plugin incompatibilities and broken web pages.

Run your site with only the bare essential plugins and style options. With the amount of data WordPress transfers, each plugin or extravagant option only adds to the load time that is already quite long. If you want something flashy, be ready to do some serious optimization or use a website builder instead.

If you’re on the coding end of things, that means not self-indulging as well. Keep your code clean and try not to do anything fancy if you’re developing your own plugin or theme. Ultimately, that just makes the script more difficult for WordPress to execute.

Update Often

We can’t stress this point enough. WordPress is a constantly evolving platform with many moving parts. An update on one plugin or feature can cause incompatibilities with another leading to a broken or downed site.

As soon as an update rolls in, implement it on your site. In some cases, this can cause incompatibility, so make sure you backup your site (which we’ll cover in the next section) so you can revert in case this happens.

It is better, however, to go ahead and do the update. Sitting on a massive pile of changes will only slow down your site and, even if you experience a plugin breaking with the update of another, you can tip off the developers so they can roll a hotfix out.

Backup Constantly

After doing all of the work on your WordPress site, it would be detrimental to lose it to a hack or busted server. While it’s unlikely, you should backup your site as often as you can using one of the best online backup services.

There are a ton of WordPress plugins that integrate with cloud storage to give your website redundancy. One of the best options for this is UpdraftPlus which allows you to store your backups directly in Dropbox (read our Dropbox review) or Google Drive (read our Google Drive review).

It’s unlikely your website data will be completely erased but certainly possible. It’s a small tax to pay for peace of mind that will certainly pay dividends in the catastrophic event that any of your data is lost.

Final Thoughts

With that, we’ve wrapped up our three part course to learning WordPress. Even though we covered a lot over the course of these guides, there is far more to learn about the platform. Make sure to read up in the WordPress Codex to learn anything not covered here.

Even with all the WordPress knowledge, it’s a vain effort if you don’t have a solid web host to execute your website. Make sure to check out our best web hosting for WordPress to ensure all of your hard work is paired with a solid server.

What other WordPress questions do you have? Let us know in the comments below and, as always, thanks for reading.