Marmalade Documentation


Go to Admin Dashboard screen -> Appearance -> Themes and click the ‘Add New’ button. Up in the screen click on Upload Theme button. Then click Choose file and navigate to the folder, containing Marmalade in your computer (

Select the zip file and click Install Now button. After this on your screen will appear that theme was installed successfully.

Click on “Activate”. Your theme is now installed and active.

The first thing you have to do after activating the theme is to activate the needed plugins.

After that you can install the Demo content, which comes with the theme. You will find it in the Demo folder. This way all the sample content will be installed, so you can get a more intuitive idea about – what data from where is coming.

To install the Demo content go to Admin -> Tools -> Import and click on Run the Importer. Then select the XML file from the Demo folder ( marmalade.wordpress-demo.xml ) and click on Upload file and Import.

After installing the demo content, you have to assign menus to their locations, so everything works properly. See the Menus section for more details.

Then you have to adjust your Permalink Structure, as the page, category and taxonomies templates are using the permalinks to display correctly. Go to Settings->Permalinks, choose Custom Structure and enter /%category%/%postname%/ in the field. You can also use Post name as your Permalink Structure.

Have in mind, that you can’t change the Permalink structure after some time, because this will lead to many not found (404) pages, which is not good for the user experience and your website’s SEO. So, choose carefully your Permalink structure at the beginning.

Then you have to go and edit the Contact Page, setting the Contact Page template for it, so it displays correctly.


For all the plugins, required to be installed you will get notices in the admin area. To function properly, Marmalade relies on the following plugins:

1. Marmalade

Here are moved all the Custom Post Types and Taxonomies of the theme as well as some of the meta data. In the public folder of the plugin ( plugins->marmalade->public ) you will also find the templates for displaying archive-articles, archive-reviews, single-articles, single-reviews and the template files for Favorite Products page ( favorite-products-template.php ) and the Contact page ( marmalade-contact-template.php or contact-template.php – if Marmalade is the active theme it uses the first file and if not – the second).

In the main folder you will find another folder ( plugins->marmalade->Moving-To-Another-Theme ) where in the 1st file is listed all code, responsible for displaying additional meta data – for post views and how to add the author meta data in Author page, which you can just copy/paste if you decide to move to another theme.

In code-moving-to-another-theme.php ( plugins->marmalade->Moving-To-Another-Theme->code-moving-to-another-theme.php ) you will find the code for retrieving the post views in single.php or in category, archive, taxonomy etc. After that the code for retrieving the author meta data in author.php file (profile picture, social links, description, etc.)

2. CMB2

The theme uses this plugin for the metaboxes on the Back-end. So even if you decide to move to another theme you have to keep this plugin active.

3. CMB2-taxonomy

This is additional plugin, that works together with CMB2, and is responsible for the extra field in Favorite Products Category, where you can add an image to every item (favorite product).

4. The Newsletter Plugin

This is the newsletter system, that Marmalade uses for the newsletter subscriptions in the sidebar and on the Newsletter page. After installing this plugin you will have to configure it. Under the Newsletter menu in the admin area you will see Settings and More page. Navigate to there to set Sender email address and name. After than navigate to the List building page and under the General tab, set Newsletter dedicated page. Move to the next tabs if you want to customize the subscription, confirmation and welcome messages and e-mails. Under the Docs tab you will see all the shortcodes, you can include in your newsletters to retrieve data about the users.

By default in Marmalade is included version 4.6.8 of the Newsletter plugin (, because in the newer versions there have been made some drastical changes to the HTML and CSS structure which is causing the forms and the sent emails to be displayed with different styling. If you have installed the last version of the plugin, I would recommend you to make the following changes:

Navigate to List building->Messages Template, choose “Yes” for Enabled? and replace the existing code with the following:

<!DOCTYPE html->
	<!-- General styles, not used by all email clients -->
<body style= "margin: 0;">
	<!-- Content table with background color #fff, width 500px -->
	<table style= "background-color: #fff; width: 100%;">
	<td style= "padding: 25px; font-size: 16px; font-family: sans-serif">
	<!-- The {message} tag is replaced with one of confirmation, welcome or goodbye messages -->
	<!-- Messages content can be configured on Newsletter List Building panels -->

	<!-- Signature if not already added to single messages (surround with <p>) -->



This will change the email template to blank – same as you would send to a friend from your personal email. This comes in my opinion more natural to your subscribers, and is a better option – if you want to be seen as a person, and not as a robot.

This blank email template was also the reason I decided to include the Newsletter plugin as newsletter system in the theme. In its current version (4.7.6) the plugin has changed the default email template and it is now half the width, with centered content. Similar to the Mail Poet template.

Another adjustment that you will have to make, if you have a newer version of the plugin is, to add custom CSS styles, because all of the CSS classes have been replaced in the newer versions. Navigate to marmalade->css->newsletter.css, copy the contents of the file, then navigate to Admin screen->Newsletter->Settings and More, select Advanced Settings tab and paste it into the Custom CSS textarea.

This is the page of the Newsletter plugin in WordPress, where you can get additional information and support –

    1. 5. Yoast SEO

This plugin is a great tool for boosting your SEO. It provides you with snippet preview, where you can see how your post or page will look in the search results. It also adds all the necessary meta descriptions and metadata, needed for proper display of your posts not only in Google search results, but also in Facebook and Twitter. It cares that your website SEO is up-to-date, so installing it is a must for every website. Even if you haven’t filled in the snippet previews – Yoast SEO takes the meta descriptions from first sentences of your content.

For more information and supprot about this plugin, visit the WordPress plugin page –

Customizing the theme

To change the default theme appearance go to Customizer (Appearance->Customize). Here you will see all the options that you can change, according to your preferences. See the picture below:

Site Identity, Menus, Widgets, Static Front Page and Additional CSS are Default Customizer options, that come with WordPress. All other options are included by Marmalade.

In the Site Identity section you can change the Site Title, Tagline and the Site Icon.

In the Additional CSS section, you can add your custom CSS styles.

The other settings are explained in detail in the next sections.


Marmalade comes with 2 options for Sidebar. You can use the Default Sidebar, which you see in the demo, or choose to replace it with Widgetized Sidebar. The second is the only one widgetized area in the theme. So if you choose Widgetized Sidebar, there will go all of the widgets you add.


In this section of the Theme Customizer, you can adjust the Layout, to your preferences. Marmalade comes default with Left Sidebar. You can choose to change it to Right Sidebar, or Full Width.

The next option applies, if the Layout you use is Full Width. In this case, the Sidebar is shown after the content. Displaying it might be unappropriate on some pages like Newsletter, About or Contact page, for example. Here you can enter the slugs of the pages, where you want to exclude the Full Width Sidebar (e.q. newsletter,about,contact etc).

Next you can specify the number of posts to show on the Homepage under Latest Recipes. The default is 4.

Below you can specify the number of review posts to show on Homepage, under Reviews. The default is 2.

After this there is a checkbox, where you have the option to include the latest Articles at the end of the Homepage. By default they are excluded. In you want to include them, check the checkbox.

As last you can specify the number of Articles to be displayed on the Homepage. The default number is 2.

Default Texts

Here you can change the default hard-coded texts in the theme.

First you can change the text of the Recipe Search Filter, which is displayed on the Homepage, 404 Page, and when there are no results on Search Page.

After this are listed all the other default texts in the theme.

Latest Recipes, Recipes with Favourite Products, Reviews, Popular Recipes (also on single Recipe, Review and Article posts) and Articles texts are displayed on the Homepage.

More Recipes: and Popular Recipes texts are shown under each single Recipe post.

Check out these Recipes: and Popular Recipes – under single Review post.

Related Articles and Popular Recipes – under single Article post.

Ok, then check out the most Popular Recipes – this text comes on the 404 page and when there are no found results on the Search results page. If user’s search had no results, or the page they landed on couldn’t be found, they are given the option to choose to do another search. There are 2 buttons – Yes and No.

If the user chooses Yes, then the Recipe Search Filter slides up – so they can do a search.

If the user chooses No, then the most popular recipes are shown on the screen. Above them comes this text – “Ok, then check out the most Popular Recipes”.

Instructions: text is displayed on the single Recipe post above the list of instructions.

view all text is displayed next to all captions throughout the theme and after popular recipes shown on the 404 page and when there are no found results on the Search results page.

Thank you! Your message has been successfully sent. You will be contacted shortly. This text is shown after a user submits successfully the contact form on the Contact page.

Overlay focus - Recipe Search Filter

On the Recipe Search Filter, displayed on the Home Page, 404 page and the Search results page ( when there are no found results and you can select to do another search ) – clicking on the empty spaces “_____” a dropdown menu opens. If you want your users to concentrate their attention to the given categories you can choose to check this option on. This will add a special effect – the screen around dropdown gets black with an opacity of 0.7.

So clicking on the space “_____”, the overlay opacity changes from 0 to 0.7 and after they choose a link from the dropdown, or click anywhere else on the screen – the overlay opacity changes back from 0.7 to 0. By default this option is not checked.

To get a clearer idea what turning this option on does, play the video below:

Contact email

Here you can add your contact e-mail. It will be displayed on the Contact page, below your name.

Measurement units

In this section you can select what measurement units you want to use for the recipes. You can choose among Metric and English. The default option is Metric. The Metric units, include: none, kg, g, L, ml, tsp, tbsp, cup and cups and the English units include: none, lbs, oz, fl oz, pt, qt, tsp, tbsp, cup and cups.

Main colors

Here you can change the default main colors of Marmalade – Red and Yellow. Click on Select Color and enter the HEX- value of the color you want to replace the default color with ( e.q. #ff0000 ). Then click on Save & Publish Button.

These colors are added in the theme CSS (marmalade->style.css) under /* marmalade-styles */ – this is the minified version of the theme’s CSS style, located in (marmalade->css->marmalade-styles.css). If you change the colors, they are overridden by embedding CSS in the HTML head via function, called marmalade_customize_css in functions.php.

If you want to remove some elements, or add a color to another elements, you can just add their class or id after the specified elements for the chosen color in this function and/or in the theme’s CSS style. See CSS Files and Structure section in the Documentation file, provided you with the theme for details on how to make changes to the CSS.

Google Analytics

If you have a Google Analytics account, here you can add the tracking code provided to you by Google Analytics. This code goes in the theme Footer section

Your Analytics code might look like this:

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

Where ‘UA-XXXXXXXX-X’ is your unique analytics code, used for tracking.


The template file, responsible for the design of the Homepage is front-page.php ( marmalade->front-page.php ). In this template is included 1st the Recipe Search Filter ( marmalade->searchfilter.php ), after that are listed the Latest Recipes. Below it are displayed the Recipes With Favorite products in a carousel ( marmalade->content->marmalade-recipes-favorite-products-slider.php ). Then come the latest Reviews posts ( marmalade->content->marmalade-reviews-front-page.php ), after that are shown the Popular Recipes in a carousel ( marmalade->content->marmalade-popular-recipes-slider.php ).

In the theme Customizer, under Layout ( Appearance->Customize->Layout ) you have different options for changing the Homepage appearance. You can change the number of default posts to be shown on the Homepage for each section and you can include the Latest published Articles at the end of the page, as well as adjust the number of Articles to show.

Again in Theme Customizer, under Default Texts section ( Appearance->Customize->Default Texts ) you have an option to change the text in the Recipe Search filter at the top of the page. In this search filter are listed links from 2 of the menus in the theme for filtering the results. For more info see Recipe Finder 1 – Dish Category Menu and Recipe Finder 2 – Dish Type Menu in the Menus section.

Recipe Categories

Listing the Recipe Categories, have in mind that all the main recipe categories, like Starters, Soups, Main Dishes, Desserts, etc. have to be listed as subcategories of Recipes category. The category containing them has to have slug – recipes.

This is important, because only the subcategories of the category with slug recipes are being shown on the Breadcrumbs on each single Recipe post and on the recipe cards – on homepage, categories, archives, etc. All other categories that are not a subcategory of recipes are being ignored on these places in the theme.

Favorite Products

Favorite Products are included as a custom taxonomy in marmalade plugin. This way you won’t loose any data if you switch to another theme. You can add Favorite products in the Admin area, under Recipes ( Recipes->Favorite Products ). After adding a name, slug and description for your Favorite Product, you can add an image, which will be displayed in each recipe post, if it has been included in the given Favorite Product Category.

This image is displayed in the upper-right corner of the 1st recipe image in single post, in the upper-left corner, above the category on each recipe card (in categories, archives, homepage, etc.) and in the upper-right corner of the recipe image in the Carousels.

Looking at the picture below, (1) is how Favorite Products are displayed in Carousel, (2) is how they are displayed on the Homepage, Category, Archive and Taxonomy pages and (3) is how they are displayed in a Single recipe post.

For listing all the Favorite Products and the recipes, made with them Marmalade uses the following templates: (1) taxonomy-favorite-products ( marmalade->taxonomy-favorite-products.php ) and (2) page-favorite-products ( marmalade->page-favorite-products.php ). The 1st file is responsible for displaying each favorite product category and the 2nd for displaying the page with all Favorite Products.

In the marmalade plugin you will find Favorite Products Page ( favorite-products-template.php ) – this template you have to select for the page displaying the Favorite products, if you choose to move to another theme, so you don’t loose any data.


Marmalade uses the default WordPress Posts for displaying the recipes. The Posts titles are just renamed in the menu by the theme, so it is more intuitive where you should post Recipes.

Next to the default metaboxes, that you would normally see in every WordPress installation, Marmalade has few custom added metaboxes at the back-end. Below the visual editor, Marmalade adds metaboxes for the Recipe metadata, Ingredients and Instructions. In the Right sidebar there are added metaboxes for the Favorite Products and for Uploading multiple images and/or embedding a video.

In the Recipe metadata you have to enter the following information about the recipe – Kcal per Portion, Time for Preparation and next to it you have checkboxes for Vegetarian, Gluten-Free and Spicy. When you check one of the boxes, Marmalade adds the corresponding tag to the recipe automatically and when you uncheck it, the tag is being removed. Same happens if you assign a recipe to one of the corresponding categories: vegetarian, gluten-free or spicy. So if you check them in the metabox, only tag will be assigned to this recipe and if you assign it to the category, the recipe will be assigned to the tag and the category.

After this is displayed the metabox for the Ingredients. First enter the number of portions, then add the ingredients.

Adding Ingredients

For each ingredient you can choose a Measurement unit – ml, L, kg, g, etc. If your ingredient doesn’t have Measurement unit (e.g. onion, chicken fillet) – there is option “None”.

If you select “None” option another field will appear where you have to add the plural name of your ingredient. (e.g. Ingredient name is onion – Ingredient Plural name – onions). See the video below:

Below the Ingredients metabox is the one for the Instructions. Here you can add each instruction step of the recipe. After adding the 1st step, click on the button Add Another Step to add the following steps.

The the 1st additional metabox in the Right Sidebar is for Favorite Products. Here are added all the favorite products categories. To add new category, navigate to the Favorite products menu, under Recipes. There you can also add an image for every product in this category. Then when you add a new recipe and you assign it to a Favorite product, it’s logo will appear in the upper right corner of the recipe image on single post and in the upper left corner on the recipe card in category, homepage, etc.

Below it is the Upload images or Embed video metabox, where you can add multiple images, video or embed video into the recipe.

Adding Images to the Recipes

You have few options for adding images to your recipes:
(1) You can add a Featured image. If you do so, it will be displayed on the recipe card on the homepage, category, archive, etc. templates and as 1st image on the single recipe post.
(2) You can add multiple images from Upload images or Embed video metabox. Then the 1st image will be displayed on the recipe card.
This metabox is included by the plugin that comes with marmalade, which you can find in the plugins folder in the theme ( marmalade->plugins-> ).
This means that even if you decide to switch to another theme, your data will be safe. It will be automatically included the new theme

(3) You can also add images to a recipe by adding a gallery to your post content in the visual editor. The images from the gallery will be appended after the featured image and after the images/video from the Upload images or Embed video metabox.

So the priority of display of the images is: 1st Featured image, 2nd images from Upload images or Embed video metabox and 3d images from a gallery added to the recipe post.


To add a Review, navigate to the Reviews menu at the Admin area and click on Add New. This is a custom post type that is included in the plugin, that comes with Marmalade.

The additional metaboxes added to the Reviews are: Buy on Button, Specification details and Upload images or Embed video ( same as in the Recipes ).

In the Buy on Button metabox you have to enter an Affiliate URL and the name of the Webshop, where the product you are reviewing can be bought. The data is displayed on the single Review post above the images and after Specifications. However, because Marmalade uses Masonory, the button below can be displayed after the images. These are the yellow buttons “BUY ON (Webshop name)”

Only in the Review posts you have an option to show related recipes, based on particular tag, Recipe category or Favorite Products category. This functionality can be very useful. For example, if you add a review for a barbeque, below it you are able to include only recipes that have the tag grill or barbeque, or which are in category grill. So, after reading your review – your readers can get also ideas about recipes that they can cook with the barbeque you are recommending them to buy.

The next metabox in the Reviews post is Specification details. Here you can add all the specifications of the product, you are reviewing. First you have an option to change the default title, you can do it, if you wish so. Then you can add specifications – filling in the specification name on the left and specification detail in the right textfield. You don’t need to add the colon ” : ” sign after each specification title. This is done by the theme. So if you would like to add a specification you would do like so:

You can enter the text in lowercase letters as well. They are styled to display in uppercase letters by the theme’s CSS.
This is how these specifications are being displayed on the frontend:

Author Profile Page

On the author page ( ) are listed the posts from the author. If the user has add/edit post capabilities (all except Subscribers) and there are no published posts by him/her, they will see a text “It looks like you haven’t added any posts yet”. And below it 2 buttons – 1st “Add New Recipe” and 2nd – “Add New Review”. The default sidebar is replaced by one with author’s profile image, name, social network icons and a brief description.

If you are viewing your author profile page, below the description you will see a button “Edit Profile”. Clicking it, you will be taken to the Edit Profile Page on the frontend.

This page is meant for users, who are contributing to your website, so they can list their contact information and here you can see all the posts added by a particular user.

If there are more than one users writing on the blog you can eventually display their profile details on the single page templates, under each post and add a link to their author page. The functions you can use for this purpose are:

Displays the author’s name with link to their website.
Displays the author’s name with link to their Author page.
This will display the author info, listed on their Author page. You can use this if you want to list more information about the post author and style it.
Here is a list of all fields from where you can retrieve data about the post author using: the_author_meta();


Edit Profile Page

On their profile page every registered user can add or edit details about themselves. Next to the default profile fields, Marmalade has added custom metaboxes for User’s Facebook, Google+, Twitter, Instagram accounts, and a metabox, where user can add their profile picture – which is replacing the Gravatar in WordPress.

Frontend Edit Profile Page

This is a custom made frontend edit profile page. Here each user can add or edit their information – profile picture, contact details and a brief description about themselves. They can add info about their website, Facebook, Google+, Twitter and Instagram and also change their password.

Except administrators, all other user roles ( Authors, Administrators, Editors and Contributors ) are being redirected to their author page, after logging in.

For the Frontend Edit Profile Page to be displayed, you have to add a page in the Admin->Pages->Add New and set its template to User Profile. Note, that if you have installed the demo data, that comes with Marmalade this is not needed, as the page already exists – Edit Profile.

Like & Follow Settings

The Like and Follow buttons for Facebook, Google+ and Twitter, that you see on the top of the website are set from the Administrator’s Profile page. With adding links to your Facebook, Google+ and Twitter accounts, the Like and Follow buttons will automatically appear on the top of each webpage.

These links, as well as a link to your Instagram profile appear also on the Contact page, see the Contact Page section below.

Contact Page

The contact page template ( Contact page ) is added by marmalade plugin, so you can still use the data shown there and the custom made contact form, even if you move to another theme. For it to work properly, you have to select the page template in the admin add/edit page screen. The plugin uses 2 template files for the Contact page, depending on whether the theme you use is Marmalade or another one, so if you switch to another theme you will have to set the Contact Page template again from the admin for the data and form to show.

In the Contact Page you will find the Contact details of the website Administrator. The name comes from the First name and Last Name fields of the Admin Profile ( or Edit Profile in the admin area ). The email is set in the Theme Customizer ( Appearance->Customize->Contact email ). Below you see a link to the RSS feed of the website. Then are displayed links to the social profiles – the ones, that have been entered in the Admin Profile ( or Edit Profile in the admin area). If they are filed in, links to Facebook, Google+, Twitter and Instagram profiles will appear on the Contact page automatically.

Below you see the custom made contact form of Marmalade. All fields in it, including the checkbox are required. If an user doesn’t fill one of the fields, the form won’t be submitted, and the error message will appear. The webpage will automatically scroll down to the form, so the user can fill all the fields correctly.

After successful submission an email is being sent to the admin email address, that you have set in WordPress and a “Thank You” message is being displayed, which text you can adjust in the Theme Customizer ( Appearance->Customize->Default Texts ). You will find the default message in the textarea at the bottom.

Have in mind, that if you run a WordPress Multisite, you will have to check whether the Admin Email is correct on each website Settings ( My Sites->Network Admin->Sites->Edit – for each website). You will also have to add Mailserver Url, Mailserver Login, Mailserver Pass and Mailserver Port. These settings should be provided to you by your Hosting provider.

Play the video below for a preview of the Contact Page.

Moving to Another Theme

If you decide to move to another theme most of the meta data will be displayed automatically in your new theme. However you may want to add data where it is not shown. This can happen with the post views – if you want to include them in the categories or single.php of your new theme. Then go to marmalade plugin folder – plugins->marmalade->Moving-To-Another-Theme->code-moving-to-another-theme.php and in the file you will see the code that shows the post views. Add it to the files in your new theme, where you want the views to be shown.

<!-- 1. Show the post views - paste this in templates where you want to show 
the post views of posts, reviews or articles -->	
<?php  echo esc_html(marmalade_get_post_views(get_the_ID())); ?>

To show the thumbnails correctly, the theme file should use the_post_thumbnail(); or not block the display of the thumbnail if the post doesn’t have one. This can cause that the additional photos you add in the back end are not being shown in categories, archives, tags, etc. If this is the case, you can replace the theme thumbnail with the_post_thumbnail(); or check in the files for the code blocking the display. With Twenty Sixteen, for example the function displaying the thumbnail is not showing the image if no thumbnail is set:

function twentysixteen_post_thumbnail() {
if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) {

If you remove the part of the code in red everything works well and images that have been added in the back end are being shown on the place of the post thumbnail.

After that you have the code that displays the author meta in author.php. Open the author.php file of your new theme and paste the code before the Loop. This way the author profile picture, social links, website and description will appear automatically in your new theme.

When you move to another theme you will also have to set the correct templates for the Favorite Products Page and the Contact page from the admin edit page screen. While you use Marmalade – it displays the Favorite Products from custom page template in the theme, and when you switch to another theme in the marmalade plugin there is added another template, that shows the data but it has to be set to the page, so it shows the data. For the Contact Page there are used 2 variants of page templates that are both located in marmalade plugin. So once you switch the themes you will have to set that template again as well.

If you decide to move to another theme you will have to keep the following plugins active:
1. Marmalade
2. CMB2
3. CMB2-taxonomy
See: Plugins Section

You will also need another plugin: Recipe Calculator plugin – you will need to order this plugin form CodeCanyon in order for the recipe ingredients and instructions to be shown in it. In the plugin you can set different options from WordPress Customizer – where the recipe ingredients and instructions should be shown – before or after content. You can also choose to include them in your posts via shortcode or directly in the single.php file.

Sources and Credits

In Marmalade I’ve used the following sources:

Scroll to Contents