Ever wanted to make just some minor adjustments to your WordPress theme’s design, but didn’t know how? In this post, I’ll show you the easiest way to tweak a site’s design, even if you have almost no coding skills at all.
This post is partially in response to a question I was asked after publishing my post about fonts and the importance of making your text as easily readable as possible. Of course, it’s nice to know which fonts to use and what size the text should be, but how do you actually change these settings in your own WordPress theme?
Watch the video below to find out:
I recommend you watch the video in full-screen mode.
Update
Firebug is now also available as an extension for the Chrome browser! Personally, I like it quite a bit more than the built-in Chrome dev tools.
Links and Resources:
- Get the firebug plugin here
- Get firebug lite for Chrome here
- Read about my recommended fonts and text sizes here
- Read about my other design recommendations here
- Get awesome WordPress themes here
That’s all, folks! I hope firebug will be as useful to you as it has been to me.
Please Share this Post!
Thanks from the bottom of my non-coder heart for this one, Shane!
Cheers,
Norma
You’re very welcome!
Thanks for a GREAT tutorial
Thanks for stopping by and leaving a comment!
Excellent firebug tutorial Shane! Funny, I just installed firebug 2 days ago and haven’t got around to learning how to properly use it. Thanks to you, I feel more confident messing with the css code on my blogs.
Thanks again,
John
Cool, glad I could help!
Hi Shane,
Thanks for this. This is pretty cool. I haven’t used this since I put up my last blog. Definitely helpful but since I don’t know CSS or JavaScript it’s a bit of a slow go.
How about doing a few more tutorials on using Firebug for editing WordPress themes?
Learning by doing is the way to go. :)
Maybe I can do a small roundup of examples, if there’s demand for it.
Great firebug tutorial shane – I use it a bit but did not know the tricks you showed us.
And the “Design Posts” you’ve just done were very welcome – fonts and design are crucial and will affect your bounce rate!
I’d like something on choosing the right theme. I find it a horrid task when I launch each site and just fall back on using one that I can pretty much tweak. I joined elegant themes but find them graphics heavy and SEO Light.
I think a round up of examples would be great :-)
I’m afraid I don’t have a magical solution to finding themes, either. It’s something that often takes me a lot of time too – finding a theme that really matches the purpose of a site, is well-designed etc. It’s not easy.
Great Tutorial. This is an awesome tool. I have one or two things about the main theme I use I’d like to change and I know this will help me to tweak it.
Greatly appreciated!!!!!
Thanks for the firebug tip and video. I just installed it and am ready for some firebugging action.
Best wishes,
Oran
Awesome, thanks that will save me a lot of time!
Thanks for the info. I had heard the name firebug but did not know the basics of how to use it.
It seems like a great tool – will add it today!
Hey Shane!
Yeah, I got word of this a couple weeks ago and installed it on Firefox. Haven’t played with it too much, but it does seem to be pretty handy tool. It will be nice to just scan the page without having to open up another editor or go in to the back office of the site.
Also, I sent you a FB friend request a while back. Hit me up!
Cool~
Ryan K
hi Ryan,
Thanks for your comment!
I don’t use my personal facebook account, I only have it so that I can have the business pages. So don’t take it personally that I don’t accept friend reqs. :)
Thanks for the tutorial Shane!
I’m in the process of learning how to create my own WordPress Theme with the program Headway at headway.com. I was playing with Firebug last night but it did not make sense. Now I understand how to use it properly.
Thanks,
Peter
Cool, glad I could help! :)
Thanks, this will help me a lot.
You don’t use child themes?
Read more at
http://codex.wordpress.org/Child_Themes