WebMastering

How To Edit WordPress Themes [With Help Of Firebug And Notepad++]

Eldin / October 24, 2014

As first, I will state what do you need:

Editing WordPress themes isn’t should be something hard, but depending on your needs it could require a professional service. Firebug should help you to learn how code works and then edit code in .css (or .php) files from which WordPress theme consist of. This tutorial is a quick one about changing code of WordPress theme and I could later write a more detailed one.

Let’s say you want to change background image.

If you already uploaded and activated desired theme on your blog, go to your blog and click anywhere right click > Inspect Element with Firebug.

Click there and you should see a window pop up from underneath. There you will be able to see code and edit it temporarily.

Now you will see list of elements. You need to hover them until you see specified part highlighted. I wanted to change background image of my WordPress theme. I will hover until I see highlighted as blue part of website where is background image located.

 

On left side you can see list of elements and HTML code. Hover them and select which you want to be shown on right side where you can see actual code of CSS. If you want for example to change size of font, font family, background image, logo location or something similar, you need to change CSS code.

If you want to change background, you need to change URL where is your background image located. Click on URL and you should be able to edit it.

For example if my background image is located at:

http://webmagz.net/wp-content/themes/WordFinder/floral-background.jpg

I can upload a new background to FTP and type there new URL to new background image. If my image is located at http://webmagz.net/test-background I can change URL to:

http://webmagz.net/test-background.jpg

…and then see how it works.

 

You can also test how it works if background is repeating.

Now after you know that you need to edit CSS to change background image, you need to find CSS file in your theme and edit it.

Using Firebug tool you are able to see (click on image below for full size):

  1. Which file you need to edit to change URL to background image
  2. In which line of code, URL to image should be located

In my case, I need to edit style-Blue.css searching for URL starting from line 14 or it should be around line 14 of code.

Now I’m going to find this file in my themes files.

In my case it’s located in wp-contentthemesWordFinderstyle-Blue.css

Download this file through FTP (make a backup of this file just in case), and open this file using previously downloaded and installed Notepad++.

 

Now I just need to uploaded edited file back in wp-contentthemesWordFinder.

Another example of editing a theme – changing font and font size

If you want to change font or font size you can do that by selecting a part of text of which you want to change font size.

For example if you want to change font of your title, highlight title and click Inspect Element with Firebug.

On right side you can see CSS code which you need to change.

First you need to click on h1 tag and than on right side try to change some of values. You will notice that font size drastically changed and here is how I did it:

 

But, if I want to change font in this theme, I need to scroll down and look for font-family tag. After you notice this tag, try to edit it and see do you should notice changes on title. I use Arial as my new tag and I’m able notice changes on title.

Now I need to find this part of code in my CSS file and change it.

Tips and Warnings:

  • You need to compare code in firebug and in your CSS file. Sometimes editing WordPress theme could be tricky and it takes time and experience to edit CSS code so it could be very complicated
  • Keep changing code until you don’t notice changes on your website, sometimes you need to keep trying again and again and it could take a while to find a right part of code
  • Remember that this takes a bit of practice and time to understand how it works
  • Don’t forget to backup your files

Leave a Reply