As a followup to my previous article, 5 Powerful Drag & Drop Page & Layout Builder Plugins for WordPress, in which I discussed how non-developers could easily customize their WordPress blogs with easy to use drag and drop plugins, I’ve decided to delve just a little bit deeper into WordPress CSS customization. This will assist any WordPress blogger, and any other website owner for that matter, to achieve mastery overtime of basic web design.
There comes a time in every webmaster’s work when a little tweak here and there becomes necessary to make your site look and feel just the way you want it. Coding can be a bit daunting for beginners, especially if you’re new to WordPress. However, here are some fool proof methods for customizing your site’s design.
Create a Child Theme & Backup Your Work
Best practice dictates that you always try to avoid making changes directly to your WordPress site’s theme files. Creating a child theme is one of the safest methods for updating your site design / theme, especially if you’re not 100% comfortable with code. If anything should go wrong with your new designs, you may easily revert to your original theme and CSS.
Note: Before editing any code whatsoever, always make a copy of the file you’re about to edit and store it on your local machine. I can attest, as experienced when I first started coding, that editing code can be tricky and many times you’ll add or delete content that completely throws off your entire design. Without even realizing what you did. So don’t learn that lesson the hard way. Make backups.
Create your Child Theme
Child themes inherit style and functionality of another theme, usually called the parent theme. So if you purchased or downloaded a free WordPress theme for your site, it would be the parent theme that gets activated. The use of the child theme allows you to maintain the state of the parent theme by bypassing it’s files when you’re customizing the site design. This is especially useful if your purchased theme has an automatic update feature, which will overwrite / erase any adjustments you make to the parent theme. The child theme is very handy here and will save you a lot of trouble.
Step 1 – Create a folder with the name of your child theme (for example, parentname-childname) and a file on your local computer named style.css within the folder. You can use any text editor like Notepad or Notepad++ to do this. Remember to add the .css suffix,
Step 2 – Add and save the following code within your style.css file:
Theme Name: My Child Theme
Theme URI: http://mysite.com/
Description: This is a custom child theme I have created.
Author: My Name
Author URI: http://mysite.com/
This is basic code that is used to correctly identify and activate your child theme.
Step 3 – The template name (Template: parenttheme) line needs to be changed to reflect the name of your parent theme your’re linking your child theme to.
Step 4 – Add the following line of code. This ensures that you assign the initial design of your parent theme to the child theme. The parenttheme text needs to match the name of the folder where your parent theme is stored.
Step 4 – Save your style.css file.
Step 5 – Upload the child theme folder you created to your WordPress installation at /wp-content/themes/. You can do this via FTP or a WordPress file manager plugin.
With the folder uploaded, you should then be able to see and activate the child theme in your Appearance >> Themes section of your WordPress admin dashboard. You can now edit the style.css theme of your child theme by going to Appearance >> Editor to make design tweaks while retaining the basic theme design from the parent theme.
Learn more about using child themes with WordPress here.
Identifying & Editing CSS
Before jumping deep into CSS, I would suggest taking Codecademy’s short course in CSS. It’s a free resource that is comprehensive enough to get you confident using CSS. You could spend a week on the course and at the end you’ll be ready to tackle any minor WordPress CSS customization.
Once you’ve got your fill on CSS learning you’ll be ready to start adjusting your site’s layout, manipulating typography and colors, alter navigation styles and tons of other cool customization.
Identifying CSS selectors and properties
So it’s time to begin editing your theme, but where do you start? How do you know what to edit and how it’s currently working? Well, right clicking on any web page element will give you an option to Inspect Element. This allows you to view all HTML and CSS associated with your live site’s design as shown below.
Here’s a screenshot of Blogging Pro’s working code. Circled in red, you’ll see the article heading selector, h2.post-title a and a couple properties, color: #3c3c3c;. This is essentially giving you the code you will use to edit the main post heading. Therefore, if I wanted to change the color of that heading, I’d copy and edit the color property.
Right clicking on any webpage element and inspecting will give you detailed information on the specific code that will need to be edited.
Spend some time experimenting with this. Make mistakes, try something new. The more you play with it the better you’ll get. Just a little bit of dedication will take you to a place where you can complete any design task you desire to make your WordPress blog beautiful, the way you like it. Saving you hundreds of dollars. I know it can be scary, especially if you’re new to WordPress. I suggest creating a subdomain or directory where you can host a private WordPress site for experimentation. This allows you to mess around as much as you like without any fear of destroying your live site’s theme. Nobody knows about that test site but you.
What has your WordPress customization journey been like? Let us know in the comments below.