Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

Customization Library

This page is ever expanding! Got a request? Submit your support ticket and if we think others will benefit, we’ll write it up for you.

As a best practice, we recommend that you don’t customize anything, and use our defaults instead. Always ask yourself: why am I making this change?

If the change is worth making, use the Code Snippets Plugin to make coding customizations. Do not edit the child theme files.

You’ll quickly notice that there isn’t a Customizer option to change the color of every element. If we did that, the Customizer would quickly get out of hand. So we had to be selective with the options that we felt like most users would need.

Instead, stylistic changes should be done in your Admin > Appearance > Customize > Additional CSS tab.

 

Header & Navigation Menu

How to Change the Font Size for the Menu Items

Be sure to edit both the px and rem sizes.With the way we have the rems set up with our themes, 13px will always be 1.3rem, 15px will always be 1.5rem and so on (that’s not always the case in CSS, but it will be in these themes).

In the “Additional CSS” tab, enter:

.genesis-nav-menu a {
    font-size: 13px;
    font-size: 1.3rem;

How to Change the Color of the Search Input Box

In the “Additional CSS” tab, enter:

.search-form input {
background-color: #fdf8f5;
}

Content Areas

Change How Many Posts Appear on Category Pages

You can change the number of posts that appear on category archive pages within your Genesis Theme Settings. Navigate to Dashboard > Genesis > Theme Settings and scroll down to the Blog Page Template section.

Change the number in the “Posts Per Page” field to the number of posts that you’d like to appear. Save and refresh your category archive page to see the change.

Keep in mind that the more posts you load per page, the slower your page speed is going to be. We recommend keeping this number around 5.

How to Change the Widget Title Font Size for the Home Bottom Area

In the “Additional CSS” tab, enter:

.home-bottom .widgettitle {
font-size: 17px;
}

How to Add a Background Image to the eNews Widget in the Sidebar

In the “Additional CSS” tab, enter:

.sidebar .enews-widget {
     background: url("https://cravingspro.com/wp-content/uploads/2017/11/marble.jpg") center center no-repeat;
}

Replacing the url(“”) portion with your own.

To find the image url you’ll first need to upload the image to your media library (if it is not already there) and then grab the image url.  To upload the image navigate to Media > Library > Add New.

Once you have the image uploaded you can click on the image to open the Attachment Details page.  This is where you’ll find the image url.  Copy that url and replace the url in the code above.  Click “Save & Publish” and you are all set!

How to Add a Background Image to the Footer

First, upload an image to your media library and get the URL of the image the same as above. In the “Additional CSS” tab, enter:

.footer-widgets {
     background: url("https://cravingspro.com/wp-content/uploads/2017/11/marble.jpg") center center no-repeat;
}

Replacing the url(“”) portion with your own.

How to add underline to post content links

.single-post .entry-content a {text-decoration:underline;}

How to replace the search text

Prior to version 4.0.0, the themes used the Genesis search feature, which applied a foodie_pro_search_text filter to genesis_search_text. This was deprecated around the release of Foodie Pro 4.0.0

To replace the search text in all themes after version 4.0.0, use the following code with the Code Snippets plugin:

add_filter('get_search_form', 'my_search_form_text');
function my_search_form_text($text) {
$text = str_replace('placeholder="Search"', 'placeholder="Find"', $text); //set as value the text you want
return $text;
}

Note: if WordPress ever updates their placeholder code, this will need to be updated.

In order to use characters from other languages, you’ll probably need to use the HTML entity of that character: https://www.toptal.com/designers/htmlarrows/symbols/

Reader Interactions