Very flatteringly, since giving my site a makeover in May using the WordPress ‘Buttercream’ theme, I’ve received several requests asking me how I managed to get the right sidebar and other modifications working.
I love getting comments and emails, but rather than writing the same repsonse again and again I thought I’d just put everything I know here.
So if your query is about customising the Buttercream theme, please read the below instead of sending me an email.
If you have comments, questions or submissions about books on the other hand, I’d love to hear from you!
How I Customised This Site
Below are links to posts I’ve made on the WordPress support forums along my theme modification journey. They explain what I did in as much detail as I’m capable of giving, so if I haven’t written it in these posts, chances are I didn’t realise I even did it. (The curse of being a newbie coder, I fear!)
See here for a blow by blow account of how I got the right sidebar running: http://wordpress.org/support/topic/theme-buttercream-anyone-care-to-share-how-to-create-a-sidebar?replies=8#post-3114726
Here’s a ramble about issues I was having that led to a terrific tip, on the same thread, from theme creator Caroline (sixhours) about the right way to call on custom css files in Buttercream child themes: http://wordpress.org/support/topic/theme-buttercream-list-of-pages-missing?replies=15#post-2822546
And following on from that, here’s an explanation of how I resolved the stylesheet enqueing dramas I was having: http://wordpress.org/support/topic/better-way-to-code-child-functions-that-use-existing-functions-from-parent?replies=1#post-2841007
As you’ll see from these posts, my journey has been a lot of reading and even more trial and error, and I still have a lot to learn. I’ve still got issues to follow up and if/when I make any progress on these I will add those links here as well, so if it’s not here it means I haven’t done it yet.
If you’ve got more questions about what I’ve written, please don’t email me about them. Post them on the WordPress support forums. This allows other people to learn from your issue, in keeping with WordPress’ whole open source/sharing vibe. It also gives you access to the opinions of people who are much better at this than I am!
Like This? Like My Site!
If this has been helpful, I’d love it if you could demonstrate your approval by liking my website on Facebook:
And even if you just came here because of a Buttercream theme question, please feel free to stick around and check out my posts and things.
Or read on for some more general info on the tools and advice I’ve found most helpful so far in customising my website.
A Few Tools and Tips
For those who are interested in learning more about theming, coding and WordPress in general, I thought I’d also post some info about some of the general things I’ve found most useful in customising my theme. Hopefully they’re useful to you too. If I’ve missed something glaring leave me a comment below and I’ll pop it in!
Child Themes
First, I’m a Wordpress ‘child’ theme convert. If you’re modifying Buttercream (or any other theme), my advice is to become one too – it’ll make your life a lot easier in the long run!
Child themes are what they sound like: a theme you create that takes its attributes from the parent (in my case, Buttercream) and which you then customise as little or as much as you want without disturbing the parent theme files. This means when the parent theme is updated, you don’t lose your modifications. Huzzah!
If you don’t know what child themes are, you’ll want to read this first: http://codex.wordpress.org/Child_Themes. And everything related to it in the codex that you can find. I did that, and every change I’ve made to Buttercream in this site is now safely tucked away in a child file. Brilliant.
Show more »
Firebug
Firebug is a free Firefox add-on that allows you to inspect the code behind a website – including this one. There are others, such as Internet Explorer’s web developer toolbar too, but I like Firebug personally. If you want to customise your site and don’t have something like this you should get it.
Show more »
Text editors
You probably already know this but if you don’t, you need to before you start customising anything. Don’t use Microsoft Word or anything like it to make changes to your code. It has formatting tucked away in all kinds of nooks and crannies and it will wreak havoc with your site. You need a text editor.
I run Windows so my text editor of choice is Notepad++, which I didn’t even realise existed until my husband put it on my PC when he was testing something out. In a fit of brilliance I opened it instead of normal old Notepad when I was creating my Buttercream child theme, and hey presto! Mind. Blown.
It’s got pretty colours – that’s the technical term, folks – that show you whether you’ve used the right syntax (if you don’t, it won’t go the colour it’s meant to – a great visual alert that you’ve spelt something wrong!) It spaces everything out and makes it really easy to read and it’s got a ton of other features I don’t know about but I’m sure they’d make my life a lot easier if I did. Oh yeah – and it’s free!
Show more »
HTML, CSS, PHP and other acronyms
I’m actually pretty good at foreign languages but these are something else! First thing I noticed when I opened my text editor to customise my website was that I didn’t have a clue what I was reading. My learning process been slow and patchy; usually for time-shortage reasons involving me only learning something if I directly need it. That said, I am (slowly) learning things about these coding languages. Some of them are even starting to sink in. Here’s why.
Below are some good tutorial-style resources for learning basic terminology that might help you decipher the strange symbols in your text editor:
- http://www.w3schools.com
- http://htmldog.com/
- http://www.tuxradar.com/practicalphp/1/0/0
- http://css-tricks.com/
- http://www.learningjquery.com/
The first thing I did before trying to customise Buttercream for this website was do a few tutorials in these sites so I at least had some clue what I was looking for in the code before I got in there and started to tinker with stuff.
Show more »
Google It!
If you’re wondering how to do it, chances are someone else has wondered about, posted on and resolved it. Google is a veritable minefield of information and I find sometimes just cutting and pasting the error message you just got or the function you’re trying to modify directly into the search field and pressing ‘Go’ will give you half a dozen sites that get you some of the way there straight up. I did (and still do!) this a LOT.
If you’re wondering how to do something from scratch – like add in a completely new function etc – there are also a lot of people out there who are really good at this sort of thing and who write coding blogs for the love of the game. They’ve often given a step-by-step tute on exactly what you want to do, with examples and with code provided that you can just cut and paste. Sometimes they don’t quite explain enough for a newbie like me and I have to visit half a dozen sites on the same topic before I start to understand, but it’s a helluva way to learn.
Sites like these have helped me out of a tight spot in the past, but there are loads more:
- http://hitchhackerguide.com/
- http://wpfirstaid.com/
- http://www.briangardner.com/
- http://www.catswhocode.com/blog/
- http://bloggeruniversity.blogspot.com.au/
The list goes on … you get the idea … let’s just say this website customisation journey’s involved an awful lot of reading…
Show more »
Not Breaking Things
Because my website is hosted by a third party I use an FTP client to transfer files from my PC to the interblag so they appear when people click on my website (okay, so this is probably just displaying ignorance of how the internet works, but let’s push on). Mine’s FileZilla – free again, gotta love it – but the reason I mention it here is that one thing I’ve discovered when customising my website is how easily I break things.
Maybe it’s just me (very possible!) but if you’re new to the whole coding mularky you want to be able to trial and error stuff to your heart’s content. What I did was use FileZilla to download a full copy of the parent Buttercream to my PC first. I named it ‘Buttercream_original download’ or something creative like that.
This means I can open parent files in my text editor and look at them properly when I’m trying to work out how to modify something – instead of mucking around with the clunky (and ugly) editor in the WordPress dashboard.
It also means if I screw everything up royally I have an untainted copy of the whole parent theme I can just revert to, allowing me to start the whole dastardly customising process again. You probably do this anyway. I just mention it for completeness.
Show more »
Testing It
Just a quick note on testing stuff. So you’ve pulled yourself through the coding quagmire and you’ve made the coveted changes and everything’s looking the way it should. Well done! Mission accomplished…. maybe. But one thing I’ve learned is it’s worth checking before you start crowing to family and friends (or clients) about your brand spanking new website.
This happened to me when customising Buttercream. I finally got it looking schmick in my browser – which happened to be IE9, opened it glowingly at my in-laws to show them and it looked like crap. They were running IE8 and I hadn’t checked that all my carefully-made changes worked in the older browser.
Browser compatibility is not something I profess to know anything about, but here are two tools I found useful for working out whether my site looked like a dog’s breakfast on someone else’s computer:
- http://www.my-debugbar.com/wiki/IETester/HomePage: Another free tool. This one is clunky and frequently crashes, but if you can stick with it it will tell you how your site looks in older versions of Internet Explorer. I was able to get everything looking good in IE8 using this, although some aspects of IE7 still elude me and IE6 was a lost cause. My hope is that no-one is still using them anyway!
- http://browsershots.org/: I’ve used this site but didn’t love it. From what I can tell it involves someone, somewhere taking a screenshot of your website on a browser of your choice and then uploading the image onto the browsershots website. Great, except it’s just a screenshot – so you’ll only see how the front page looks and you’ll never know whether your site crashes the moment you click on a link or anything like that. I also found several screenshots had been taken too soon, so I only saw half the page and a ‘loading’ message. On the plus side you can choose from an awful lot of browsers.
- I also just downloaded the latest Firefox and Google Chrome browsers so I could check that my site worked in both of those.
If you know of more/better browser compatibility testing sites – preferably free ones! – that I haven’t got here, make a comment below. I’d love to hear about them!
Show more »
That’s All Folks
That’s literally everything I can think of for now that you could possibly want to know about how I customised this site. If you haven’t become insanely bored by now and are still reading this, let me take this opportunity to doff my hat to you Sir or Ma’am and may the rest of your day be pleasant but eventful.
Toodle pip!
~DF
Share this post:
Thank you so much for all this help ! And yes, I read it until the end ! ;-)
I’m a novice and I did a blog recently with buttercream theme too and I dreamt to have the side bar and the top menu like you !
I hope someday, i’d do it (or something like this) but I think it’s not for tomorrow…
How long did it take you to do all those modifications ?
(I’m french so my english isn’t very good – sorry)
But thanks to you, if I want to, I perhaps could do it (I hope so) !
Take care of you and I thank you again,
Bye,
Vanessa
Je vous en prie Vanessa! Je suis ravie que mes explications vous soient utiles!
I made the modifications little by little, over the course of a month or two, but if I added up all the time it took me it would be at least a week full-time. But I was new to all of it – hopefully next time around I would be faster!
I am a firm believer that if I can do it, anyone can! I’m sure you can too. Bonne chance!
~DF
Thank you so much for your answer, your encouragements and for everything ! (Merci merci merci ! et j’ ai aimé vos réponses françaises ;-) !)
I’m going to keep you informed when I’ll try to do my child theme but not before many weeks or months, I think…!
I wish you lots ans lots good readings, fun and great things,
Bye bye
Vanessa