Easy WordPress Customization

Wordpress Customization with CSS

When it comes to customizing the look of your WordPress theme you have a dizzying array of options. Some are suitable for first-time WordPress users. Others are for intermediate to advanced designers and developers. In this article I’m focused on the best WordPress customization option for first-time users.

Working Assumptions

First, I’ll assume you did your due diligence in selecting a WordPress theme. You did some solid research and you have a design that meets most your needs.

Second, your theme doesn’t require any major changes to its layout.

Finally, you have little experience with coding. You prefer not to touch it if you can avoid it, but you’re willing to learn just a few basics if means getting the look you want for your website.

With those assumptions out of the way I’m clearly focused on new WordPress users who are ready to dip their toes into a little CSS. CSS or Cascading Style Sheets, control the general appearance — the look and feel — of your website. It tells your theme what colors and typography to use. It defines many characteristics of the page layouts such as line-spacing, text alignment, image sizes, positioning of various page elements and much more.

All of your default CSS settings are contained in a file aptly named, style.css.

If you unzip your original theme zip file outside of WordPress you'll find your style.css file.  To view it, open style.css in any text editor. When you installed your theme in WordPress the style.css file was included.

More about that later . . .

First Stop — WordPress Customizer

Before jumping into any CSS edits, the first place we want to look to for customization options is in WordPress itself — in the WordPress Customizer. It’s found in the WordPress Dashboard under Appearance >> Customize.

For example, if you activate the WordPress 2015 Theme, which ships with WordPress 4.1, you will find options to:

  • Adjust different three color attributes
  • Add a header image
  • Add a background image
  • Include 1 or 2 navigation menus
  • Create a static front page
  • Add a single widget area for additional theme features, such as site search, a calendar, a list of recent posts and others.

These are the only options available. You can see it’s quite limited and doesn't really include a lot of CSS-related options. By comparison the options available with the premium Genesis Minimum Pro theme by Studiopress include:

  • Add a header image
  • Add a background image
  • Include 1 or 2 navigations menus
  • Create a static front page
  • Three different site layout options
  • Seven widget area for additional theme features (4 additional areas are available through the Dashboard under Appearance >> Widgets.
  • Options for site Breadcrumbs
  • Options for Content Archives
  • Options for Comments & Trackbacks.

The options are much broader, but still don’t address some elements of style that you’re most likely interested in such as color and typography. The point here — the options offered in the WordPress Customizer can vary greatly. There is no standard set of options per se. They are determined solely by the theme developer.

So, what’s your next step if you haven’t found what you’re looking for? Look for special theme-specific options that might be offered by the theme developer through the Dashboard menu. For example, in a Genesis theme, additional settings are offered in a ‘Genesis’ menu option.

Once you’ve exhausted those possibilities and you still have changes you want to make you will need to edit the theme’s stylesheet itself.

Taking the Dive

Before you dive into your creative editing, I highly recommend that you print out a copy of your theme’s style.css’ file. Take a little time to studying. A well-done stylesheet will contain a “table of contents” for the major sections of the stylesheet, such as Typographical Elements, Headings, Site Header, Site Navigation, etc.  Often those sections will be identified again where the related code is listed.

If you are unfamiliar with CSS, head over to Code Academy for their free CSS course. It's an excellent introduction to CSS and will give you the basic skills you need to tackle simple edits to your stylesheet.  A couple of hours in this course will make the task of editing CSS much, much easier.

Once your comfortable, head back to your WordPress Dashboard.

A Word of Caution

Many sites will tell you that you can edit your stylesheet directly through your WordPress Dashboard without a plugin. That’s true. You can do this under Appearance >> Editor in the Dashboard.  You will find all your theme-specific files there, including the styles.css files.

My advice . . . Don’t do it!! Editing the stylesheet in this way overwrites your original file. If you make a mistake it can be difficult to recover.  But, no fear . . .

WordPress Can Still Help You

My recommended method — download the JetPack by WordPress plugin and activate the Custom CSS Editor module. Here’s why:

• First, it has a very simple interface and you have access to edit any element of your stylesheet.

• Second, it doesn’t overwrite your original stylesheet. You do have the option, but I don’t recommend it until you get some experience under your belt.

• Third, you can preview your edits. That way you know your code is going to work before you commit to it.

• Fourth, it saves the last 25 revisions of your stylesheet. If needed you can revert to a previous version and recover quickly if you make an error.

• Finally, you can compare two previous revisions of your stylesheet.

There is one downside to the Jetpack Custom CSS Editor, though a minor one. You are editing your live website, meaning people could be on your site while you’re doing edits. Your changes do happen in real-time. This doesn’t create any technical problems for your site, but it’s just something to be aware of.

There are more advanced solutions for tackling this situation, but that is beyond the scope of this article. If you’re just starting out in WordPress and want to get your website online as quickly as possible,  the Jetpack Custom CSS Editor is for you.

Bottomline — The Jetpack Custom CSS Editor is ideal for those who have a limited number of simple edits they want to make and want to avoid a long learning curve.

Other Recommended Resources

To help identify the specific elements you want to customize on your websiteI suggest you learn how to use the Developer Tools in your preferred browser.  Developer tools are found in each of the major browsers – Chrome, Safari and Firefox. They are an excellent resource for experimenting with styles in real-time on any live site, including yours, and without permanently changing any code.

I recommend exploring the Chrome Developer Tools course provided by Google. It’s free!! And, it will open up a whole new world for website customization.

Did you enjoy what you just read? Was it valuable to your blogging efforts? Great, then get more in your inbox every week.

More Wordpress, more learning, more productivity tips, and more strategies. Continue to explore everything that Wordpress can do for you and your business.

Please enter a valid email address.
Something went wrong. Please check your entries and try again.

Leave a Comment

Your email address will not be published.

Scroll to Top