An Easy Way to Customize Any WordPress Theme

First things first: the method I am about to describe below is best suited for lightweight changes and customizations to your WordPress themes. You do need to be able to read a bit of code but you don’t really need be be able to program.

Tools you need

The most important tool in this process is the Firebug plugin which integrates with Firefox and allowes you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. So once you install Firefox and firebug, you are ready to go. Notepad++ will be used to finalize our changes once we are happy with the result.

Steps to customize your WordPress/Website

  1. Visit the website in question. I will use JWRMedia.com as an example
  2. Right click on the aspect of the page that you would like to change/customize and then select “Inspect Element“. I am using my post title as an example.

    Right-click on the aspect/item you want to customize
  3. That action will split your browser window into two panes. The lower pane will show the highlighted code for the item you selected to customize

    Highlighted part on lower pane shows the HTML code
  4. The piece of code that controls the look and feel through is in the lower right corner/pane under the Style tab. If you want to change the color then click on the color code and type in the html # of the preferred color (See this table for the html color codes). Same applies for font size etc). If you want to change something but don’t know which code to touch then check out the CSS Reference. Look at the page as it changes dynamically with the changes you make! Note that the changes are not saved. This will be done in the next stage.
  5. right

  6. Do all the changes you need making a note of all the elements you have changed
  7. Download a copy of your style.css (should be in your wp-content/themes/your_theme folder) and save it somewhere safely on your PC (this will be your backup in case you mess up the one you are changing)
  8. Make another copy of the file and start editing it. Make the changes you have tested using firebug.
  9. Once you are done, upload it on your server and replace your old style.css. The changes should be reflected on your website. If something is messed up, re-upload the copy you have saved on your pc.

Once you start using Firebug and making changes you’ll get the hang of it. This tool has many other features and you can read about it on their website at http://www.getfirebug.com

If you have any questions about anything above, feel free to contact me or to post in the comments below

4 thoughts on “An Easy Way to Customize Any WordPress Theme

  1. #8 is probably the most important. Always make a backup of the file or files you are about to change before you change them. Can’t tell you how many times that has saved my butt :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>