Welcome to my collection of Foodie Pro tutorials for users who want to get their customisation on! If you’re looking for my full review of this remarkable Genesis child theme, click here.
I recently moved my blog over to Shay Bocks’ Foodie theme for Genesis and a little later she released Foodie Pro. I was absolutely thrilled to receive the free update she offered to existing Foodie users (thanks Shay!) and jumped right in to change over and start styling it how I wanted. I get a huge kick out of making CSS edits. I have to feel out everything I do by reading tutorials on the internet and tweaking, reloading, tweaking, reloading. Very, very soon, I will have to drag myself away from all this tweaking and get back to the all-important job of writing delicious food content, but before I do that (soon, I promise!) I wanted to share with you the edits I made and the Foodie Pro tutorials I wrote as a result, in the hope that they will help someone else out there.
I don’t touch upon how to set up your Foodie Pro site here – Shay and her team have written comprehensive tutorials on the basic set-up and will provide one-to-one support to get your site looking as they have laid out in the demo. The changes I discuss here are ‘customisations’ – changes that the Foodie Pro team do not cover in their technical assistance.
Some of these changes took me DAYS (WEEKS!) to work out! This may be because I have no training or education whatsoever in website design, or it may be because I was working on it too late at night, for too many hours at a time. But with luck my mistakes and frustrations can help you get your site looking exactly how you want without too much pain.
I plan to keep updating this post with future edits I make, so if you don’t find what you’re looking for here, feel free to pop back and check again in the future! If you have any questions about how I styled my site or would like any help, do leave a comment – I will try my best to help you, but be warned, I am not a developer, just a blogger feeling my way around the code.
If you have made any other edits to Foodie Pro or you have any of your own Foodie Pro tutorials you would like to share with the world, I’d love to hear about them as well. Perhaps you can help me and we can all be happy together, styling our little blogs and making them look just as beautiful on screen as they look in our heads and in our hearts!
Some of these mini tutorials are general Genesis edits and some refer to popular plugins often used with blogs such as this, but they are all things I felt moved to change on my Foodie Pro theme, so I am including them here as part of my guide.
Foodie Pro tutorial: Logo and leaderboard ad inline
Want an above-the-fold leaderboard ad in your header, but don’t fancy the placement of the Top Ad widget? This tutorial’s for you! I didn’t really want my header leaderboard ad to sit in the middle of my header, the first thing any visitor would see when they entered my site. I also wanted a Hello Bar at the top of my site, drawing new readers into signing up for my (amazing!) newsletter. Instead I wanted my logo to the left, where the reader’s eye is naturally drawn, and my first advert next to it on the right, rendering the header much shorter with more content visible to readers before they start to scroll.
Foodie Pro tutorial: Disable mobile theme
Foodie Pro theme is fully responsive, with the site display tailored to the different widths of phones, tablets and desktop computers. There are many, many reasons to keep the responsive themes that come with the Foodie Pro theme, the most important of all the decreased loading time they offer for smaller devices. Find out why I decided to get rid of it.
Foodie Pro tutorial: Widgetized areas
One of the best things about Foodie Pro is the large number of widgetised areas, allowing you to place all kinds of content – text blocks, ads, icons, search bars, social networking links, almost anything – in various positions across the page. This enables you to easily build a magazine-style layout and include all the things you really want on your blog. But being a bit obsessive about such things, there were minor changes I wanted (needed!) to make, just things that needed to be moved a little bit, or resized slightly. If this is how you get your kicks too, this tutorial will help you tweak your Footer, After Entry and Sidebar widget areas.
Foodie Pro tutorial: How to build a recipe index
Learn how to make your own (beautiful!) text link index, like my one here, a great addition to the Foodie Pro visual recipe index. A text link index allows you far more flexibility as you can link multiple times to posts that may have more than one recipe component. For example, you can include all the sauces from all your recipes that have a sauce element, linked with the title of the sauce, under the heading ‘Sauces’. In an automatic, category-based visual recipe index, the featured photo and post title will make this look confusing and odd. Another benefit is you can make as many of them as you want!