Ever got a WordPress theme and wished you could move some things around a bit?

Lets face it, we are not all born to code like those crazy hackers out there. really some of us just like to design stuff on Photoshop and some don’t even do any of both.

And it could be one heck of a frustrating realization knowing that this theme has all you want, but just for the sake of some tweaks you need to call a web developer, who probably just wants to take all your money.

We have all been there, yeah, even I have been there. Heck I still get there sometimes with some advanced CSS tricks. Grateful I have friends though 🙂

So today I’ll show you a two tools that helped me get through in my first few year of theme tweaking. Google Chrome’s Developer Tool and Firefox’s Inspect Element tool. Both of which are more than accessible. However, you would need to have basic knowledge of HTML and CSS to start using this.

its something anyone can use really, trust me. I did not go to any kind of school to learn this stuff, so it was really hard at the beginning, but these tools helped a lot.

1. Chrome’s Developer Tool

I found this one first, so I’ll talk about it first.

If you have Google Chrome installed right now, you could check it out by opening a page then clicking the wrench tool at the top right corner of chrome. Then go to “Tools” then “Developer Tools”.

when you do this, the bottom of the browser opens up a panel containing HTML and CSS source codes for the page like is shown in the image.

Now all you have to do is play around with some CSS and HTML values and you would see the effect take effect in real time on your browser. Coolest thing is, you can pull this off on not just your site, but any site that is currently opened in your browser. Cool right? I know

So start toying around with elements you would like to tweak, and if you get it all messed up, refresh the page and it’ll all go away, giving you a fresh start.

Once you got it all figured out, take note of the changes and effect them in the actual wordpress files.

2. Firefox’s Inspect Element Tool

Although I figured out the Firefox version much later, I found it to be quite more stylish. Which I love.

It pretty much does the same thing as Chrome’s Developer tool, but in my opinion, its a bit easier to understand.

Just right click on any part of the web page you would like to play around with, and click “Inspect Element”.

So check it out and give it a try.

I’ll love to hear what you think about these two tools, especially if you are just trying them out. Don’t forget, it all starts with a few baby steps and one day you could be doing big time customization to WordPress themes.

And don’t forget to subscribe to my blog. Thanks for reading!