How to Customize your WordPress Themes without Knowing Code

After you’ve built your WordPress site and populated it with lots of interesting content, you might decide to change the way it looks and feels. This is natural.

People are visual creatures and tend respond to aesthetics either positively or negatively. You want your site to be an extension of yourself or your business, and present it in the best possible light.

You’ll want to customize your WordPress theme.

The wonderful thing about WordPress.org – the self-hosted side of WordPress – is that it has an open-source protocol, which allows anyone to alter the code to suit their needs. All the pages are there for you to change, you just have to know which ones to alter.

WordPress on the server

If you log in to your web host and navigate to Manage Files, under Public_html you’ll see three files: wp-admin, wp-contents, and wp-includes. Below that, are the WordPress root files hanging loose.

file manager, http://blogsitestudio.com/customize-your-wordpress-themes-without-knowing-code/, http://blogsitestudio.com/customize-your-wordpress-themes-without-knowing-code/
WordPress directory on your server


The wp-admin folder contains files that control the Administrative, back-end workings of your WordPress site.The wp-includes folders contain everything needed to run WordPress via the frontend.

Files in these two folders should almost never be changed. When you upgrade WordPress to the next version, it is wp-admin and wp-includes that get replaced.

The wp-content files contain all of your data, including themes, plugins, posts, pages, and images. This folder is not replaced by WordPress upgrades and it is where you will perform any customizations to your site.

Open your wp-contents file and you’ll see folders called Plugins, Themes, Upgrade, and Upload, and possibly others. Most of your customizations will be in the Themes folder and your theme’s folder inside of that.

Inside your theme’s folder lives folders like, CSS, Fonts, Images, and Languages, plus all the individual php files related to your site.

These files can also be found in Appearances>Editor and changed there. However, the trend is to disable this feature to prevent hackers from having easy access to your code.

If you are interested in changing the appearance of your site, the file you need is Styles.css.

Cascading style sheets (CSS)

The meaning of style sheets is an easy guess: it’s a sheet full of style rules.

But if “cascading” sounds like a waterfall you would be right. The styles are a collection of rules falling from top to bottom and what’s at the bottom will override any conflicting rules at the top.

style sheet, http://blogsitestudio.com/customize-your-wordpress-themes-without-knowing-code/, http://blogsitestudio.com/customize-your-wordpress-themes-without-knowing-code/
A typical cascading style sheet

 

Unless you want to customize your WordPress site line by line, page by page, the only method that makes sense is to use the external “Style.css” file to centralize your changes.

To make your changes, you don’t want to search through the style sheet to find the proper rule to, say, increase a font size and change it there. Don’t do that!

Remember the cascading part of style sheets, and how the last rule will overwrite a conflicting previous rule?

The better method is to put the new rule at the bottom of the style sheet where it is more visable and easy to locate, leaving the core style sheet intact.

But here’s an even better idea: use a separate Edit CSS page to contain all your new style changes that will overwrite the old ones.

Edit your CSS

CSS Editors are relatively new features that began to appear in themes as an alternative to creating a child theme.

The idea is to have a separate page of styles that is protected from being overwritten when you update that same theme. Updating a theme, while it leave your content intact, will wipe out the modifications you make to your style sheet in the Appearances>Editor page, which is the same style.css file living on your server.

To see if your theme contains a CSS Editor, look in your Theme Options for something like this:

custom css, http://blogsitestudio.com/customize-your-wordpress-themes-without-knowing-code/
Custom CSS editor found in premium theme’s Theme Options

 

 

If your theme does not have its own CSS Editor, upload the WordPress Jetpack plugin called Edit CSS which, once activated, will appear in the Appearances drawer.

css stylesheet editor
Jetpack’s CSS Editor

 

The Custom CSS page features links to a beginners tutorial and a themes and templates forum to help you out.

The page also has options for Preprocessor, Mode, Mobile-Compatible and Content Width. Definitely say yes to Mobile.

Since Custom CSS is enabled by Jetpack and WordPress.com, you must stay connected to make your new styles work. If things go all pear shaped, you’ll know the plugin has cut loose from your site.

The other option is to create a Child Theme.

Why use a Child Theme

A child theme is a separate folder that lives in your server’s Themes folder and inherits all the rules and attributes of the parent theme. The child theme stores all the code that overrides the parent.

So, when a server goes to serve up your web site, it first looks in the child theme folder for instructions before following the parent theme’s rules.

Some premium themes come with their own child theme, ready to install and use. If not, setting up a child theme is not difficult. Simply create a new directory (folder) with the themes’s child name and place it in the Themes folder.

In a text file named “styles.css,” add the following information, personalized for your site:

/* Theme Name: Twenty Fifteen Child Theme
URI:
Description: Twenty Fifteen Child Theme
Author: Your Name Author
URI: http://yoursite.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 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */

Then, go to Appearances>Themes and activate your child theme. You can then use either an FTP client to change the stylesheet or use the Editor on your server. Or, the Editor in Appearance will work.

But the real value of a child theme is to contain other files you decide to customize.

For instance, if you want to change the PHP code for the site’s header, you can include the file, “header.php” in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

The whole time, all the core files remain intact.

It’s one thing if you are going to customize numerous disparate files, but I think creating a child theme just to customize your WordPress style.css file is a waste of time.

Better to still with a CSS Editor.

Chrome Developer Tools

What’s an easy way to make stylesheet customizations in your WordPress theme without resorting to code?

Use Chrome Developer Tools or Firebug for Firefox. They give you a view of the front and back ends of your site.

These Developer Tools display your code and allows you to play with the styles until you get what you want without changing anything on the site.

Copying and pasting the code that works into your CSS Editor will customize your WordPress theme’s stylesheet.

Developer Tools and Firebug both require the uploading of a plugin into your browser.

Once done, click the menu icon on the top right of the window. Hover down to Tools>Developer Tools and the page splits into two portions: frontend and backend.

chrome tools

 

Click on Elements and the magnifier icon. Then, hover over the elements you want to inspect and info pops up. This is great for ascertaining the actual size of an image.

Click on the element and see the line of code as well as the style rules that appear on the right. It’s these rules you can play with.

tools site title
Find the code on the right to affect changes on the left.

If you play right, the changes will appear before your eyes. Refreshing the page loses those changes.

Here is a page to show you how to use Chrome Developer Tools.

And here’s a video.

 

Under Styles, click on the bottom line of the code, before the “}” and a box will pop up. Fill it in with – in this case-“colour”. Hit your tab button, and a box will pop to the right, with a list of colour choices. Choose a colour, tab again and the change should become visible.

You can click on that colour box and a colour wheel pops up. Or, enter the colour number.

So what you’re doing is entering an attribute as well as a value. Look, you’re coding! Well, almost.

select css
Changes to the code at right are affecting the text on the page to the left.

Copy and paste that whole snippet – from the period to the bracket – and paste it into the CSS Editor, and hit Update.

Now pat yourself on the back. You have just customized your WordPress site.

Code sources

If you don’t know how to write code, there are many places to obtain code snippets to copy and paste into your CSS file, as well as in other files, like header.php, footer.php, and page.php for your WordPress theme.

Theme Developer

If you bought a premium WordPress theme, the theme’s developer will offer support on a forum. You can read the forum to find a situation similar to your own, or post a question on a new topic. If that developer is good, they will reply to your question by offering snippets of code unique to the theme and tell you where to place them.

Finding a developer who offers good, timely support is, I think, the most valuable criteria for choosing a theme.

The Internet

Code snippets can be found all around the internet. Google your need or try one of these sources.

WordPress.com Forums. Here’s where you can ask questions and get code from people who are really into customizing a WordPress theme.

Stack Overflow also has a forum to search for and request code snippets.

Snippler is a virtual search engine for code.

CSS Tricks offers code solutions for all kinds of situations in a variety of languages.

Fiverr.com offers a whole segment of WordPress developers who will give you specific code or will performs tasks on your site – all for $5.

As always, be very cautious when editing the code of your WordPress theme. Keep track of what you do and test the site after each customization. And beware of bad code. To weed out the bad stuff, try using Google Pagespeed Insights.

Customize your WordPress site

Now that you have the tools to make customizations for your site you might want to learn more about Cascading Style Sheets. W3Schools is perhaps the best place to learn about and play with CSS. Or take a course at Lynda.com. It doesn’t take much to get started.

Have you had a chance to customize your WordPress site? How did you do it? Were you successful or did you pull your hair out? Please let me know in the comments below.

 

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.