How to Change the Look and Feel of WordPress

One of the very best things about WordPress, as opposed to just about any other platform available, is the freedom it gives you to completely customize your site. In short, almost anything is possible — and the more you know about the subject, the easier changing the look and feel (and even the general functionality) of your site becomes. The goal of this particular guide is to point you in the right direction to go ahead and get started changing things for yourself — regardless of your current level of website-customizing skills (note: for more guides in the same series, head to the main WinningWP Guides page).

WordPress offers so many themes and plugins that it can sometimes be overwhelming — even to a seasoned developer. Forums, eCommerce, social sites, blogs, diaries, planners, even calendars — WordPress lets you do so much. But, despite the vast choice, plugins and themes can only take you so far. They're not made for you specifically — they're made for mass appeal — so you'll have to make some compromises.

Luckily, WordPress offers plenty of ways to customize your website, requiring a variety of different levels of involvement and technical skill. In this article, we'll take a look at all your options and how you can implement great solutions.

Options Pages and the Theme Customizer

It all starts with WordPress itself, so the first things you should familiarize yourself with are the options that are built into the product you're using. Read through the settings section, which contains a number of useful things, such as:

  • site title and tagline
  • registration options
  • time zone settings
  • language setting
  • displayed posts per page
  • comment settings.

Getting to grips with what's on the table by default will help you to understand what WordPress can do out of the box, so you'll be able to talk to developers with more confidence and with greater clarity — a welcome situation for both parties!

Themes and plugins usually have their own options pages. Plugins can place the link to their settings pages in a number of places, the most common being:

  • within the settings section
  • within the tools section
  • in a dedicated top-level menu.

Some of the better-coded plugins provide a link to their settings page within the plugins section, under the name of the plugin. Take a look at the screenshot from Jetpack below.

Jetpack in the plugins list

Themes may also place their options in a number of locations, but the Theme Customizer — which is a built-in WordPress feature — is becoming extremely popular. In fact, for themes in the free repository it's now required. When working with themes, you'll find options in one or more of the following locations:

  • in the appearance section
  • in the customize section within appearance
  • in various other subsections within appearance
  • in a dedicated top-level menu.

Even though many themes create subsections within the appearance menu, it's a good idea to get used to the customizer. All these options can be found there as well, and these sub-pages will be phased out eventually.

The customizer gives you a bunch of settings on the left and a live preview on the right — you can even build widgets and menus right there, change colors provided by the theme, and a lot more.

The Theme Customizer

Customizing With Plugins

The next step is to look for a plugin that can do what you need — there are plenty available for almost every situation imaginable, from modifying how emails are sent to hiding specific WordPress functions, so make sure you search the repository. I've highlighted some plugins I found interesting.

Slate Admin Theme changes how your admin looks. There are a number of similar plugins, but this one gives the back end a flat, modern look that some may find more appealing than the default.

Slate Admin Theme

Jetpack receives a mention in almost all plugin lists because of its wealth of features. You can add social buttons to your posts, transform thumbnail galleries into awesome masonry-style tile patchworks, add carousels to galleries, tighten security, and so much more. Take a look at the difference between the two gallery styles below — the one on the right looks much better.

Thumbnail and tiled galleries

EU Cookie Law is a good example of a mini-plugin that provides a small feature set, but it may be just the thing you need. It allows you to add a bar to your site that informs your visitors of cookie usage, and lets them accept your terms.

These were just three very simple examples, so there's a good chance that whatever you need feature-wise you can find it in the plugin repository.

Customizing CSS

If you want to change how your site looks, you'll need to use CSS. You can do this in a number of ways, the most common being:

  • a built-in theme option
  • a dedicated plugin
  • a child theme.

The third method is the best for various reasons, which I'll explain in the child themes section further down. For now, let's focus on the first two.

Many themes — mostly the premium ones — have a built-in textarea for entering custom CSS code. This may not be the most flexible solution, but it's pretty good for small modifications. The screenshot below shows the Custom CSS section in the popular Avada theme.

Avada Custom CSS

There are a number of plugins dedicated to giving you a custom CSS box, which is a useful option if your theme doesn't have one already and you're not quite ready to use child themes. A nice one I've found is Simple Custom CSS, which even offers syntax highlighting.

Simple Custom CSS

Learning All About CSS

To be able to modify your CSS code, you'll need to have some CSS chops. CSS is what gives your HTML all its styles — from positioning to color and font properties, it's all CSS. The syntax isn't difficult at all, and you can get started in a few minutes. Mastering the language, especially the positioning rules and advanced CSS3 animations, can take more time, but don't be afraid to try — it's pretty straightforward, there's just a lot to know.

To get started with CSS, I recommend taking a look at the W3Schools tutorial, which is free and quite comprehensive. You can also take a look at the excellent Codecademy and Treehouse online courses. They both offer a lot more than CSS, so you can move into different territories once you're comfortable with it.

Editing Files

The following methods require you to create, modify and save files on your website. If you're working locally, this is a simple task, but if you have a live site you'll need a way to work with the files. There are a number of ways to do this — using FTP is a beginner's best bet.

FTP applications allow you to grab files from a remote server; you can use an application such as Cyberduck to access your files (all you need are your access credentials, which your host will tell you). If you need some more FTP power, you may also want to take a look at Transmit, which is a paid OSX app, or Filezilla, which is a popular free app. We have a great article here at WinningWP on the best FTP applications if you need more information.

You'll also need a text editor. Some of these have FTP built in, so you won't need to download and upload files all the time, as it's done for you by the app. Some great choices for text editors are Atom, Sublime, Coda and TextWrangler. All of them support FTP natively or via plugins, but Coda is the easiest to use as a beginner, while TextWrangler also provides easy FTP access.

Using Child Themes

Child themes are the way to modify your theme. Performing small CSS additions in a textbox is just fine, but if you want something future-proof and standardized child themes are your only option. They were created to address the following problem: I wish my website looked exactly like this, but with these four small modifications.

The idea behind a child theme is that the original theme is used everywhere, except where it's overruled by the child theme. This means that your child theme could contain a few simple CSS changes.

The reason child themes are great is that they allow you to update your parent theme without losing the changes you've made. if you edit your theme directly, you'll still be able to update it, but all the edits you've made will be overwritten. You'll thank yourself in the long run for using a child theme — and so will your future developer.

Getting started with a child theme is very easy — let's create one together, based on Twenty Fifteen, one of the default WordPress themes. Go to your main themes directory, which will be wp-content/themes, and create a folder in there. Let's name it 'child-theme-example'.

Within the new folder, create two new files: style.css and functions.php. In the stylesheet add the following code:

/*
 Theme Name: Child Theme Example
 Theme URI: https://winningwp.com
 Description: A small child theme based on Twenty Fifteen to showcase how a child themes work
 Author: WinningWP
 Author URI: https://winningwp.com
 Template: twentyfifteen
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: child-theme-example
*/

This CSS comment provides information for WordPress that's needed to display the child theme in the appearance section. In the functions.php file, you'll need to add a few lines that'll make sure the CSS is loaded when the theme's displayed:

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

At this stage, you can activate the theme, and your website will look exactly like it did before. You can now start adding modifications to the child theme (without touching your parent theme). There are three main methods of doing this:

  • Add styles to the stylesheet
  • Add functions and hooks in the functions file
  • Overwrite template files

Since this is a guide for beginners, I won't go into the details here — but if you want to learn more, check out our article using child themes in WordPress, which should give you a lot more information on all three methods.

Create Your Own Plugin

This sounds a lot scarier than it actually is. You'll need to know some PHP and have some experience coding for WordPress, but you can get started very easily. I'll explain why this is a good option, and point you to some good resources on making plugins.

Plugins are helpful because they provide cross-theme features. If you implement a social button in your theme or a child theme, the functionality will disappear if you switch themes. Chances are, you'd like users to be able to share your content regardless of the theme you're using, which is what plugins are for. Implement a social button in a plugin and it'll remain intact even if you change your theme.

Plugins also help you to compartmentalize features. When working with child themes, developers tend to group everything together — you may have a social button in there, perhaps something that changes how comments are displayed, a modification to the registration form, and so on. This makes it very difficult to separate these features or switch some of them on or off. Plugins solve this by allowing you to package each feature into a separate plugin.

If you want to get started with plugin development, take a look at the following resources:

Final thoughts

There are many ways to get to where you want to go in WordPress — you can make modifications with settings and add some of your own CSS when you're ready. If you feel like you have enough experience, you can always delve into child themes and plugins to improve your website.

Don't forget that most WordPress products are made to be used by a wide variety of websites. This makes them generic by nature, so it's unlikely you'll find exactly what you need. The process of finding something that's workable for you and then making some modifications is standard practice in WordPress, and the more time you put into it, the more you'll get out of it.

Enjoyed the above? Read on: View More Guides

WinningWP Staples

There's more to us than just WordPress guides. Here's a few favorites:

Search
Glossary of Terms
Overwhelmed by jargon? WordPress terms explained in plain English.

(View Page)

Plugins, tools and services
Under the Hood
Wondering what plugins, tools and services we used here at WinningWP? We spill the beans...

(View Page)

WordPress Deals
WordPress Deals & Coupons
Save oodles of cash on some of the best hosting, themes & plugins around!

(View Page)

What Next?!

Things starting to look just as you'd like them? Great! What's Next?

Updates and Maintenance!

Proper maintenance is critical for the future of your site. So be sure to always keep on top of all things updates, maintenance and troubelshooting!

Choose Hosting!

Still trying to navigate the WordPress hosting minefield? Here's a handy Guide to Choosing the Best Service!

Rocket

Good luck!

Changing the look and feel of a WordPress-powered website may seem a little daunting to begin with, but once you start to learn how, and begin to actually see the changes you're making, it soon becomes a really quite satisfying endeavor! As with so many aspects of WordPress, the trick is to work through the pain points one by one, until you finally come out — empowered — on the other side. Good luck!

***Last updated 1st January 2017***

Love WordPress? Follow us on Twitter