Welcome!
Welcome to the Best Recipe theme’s documentation page!
This documentation talks about how you can install the theme on your WordPress site, how to customize the theme to suit your needs, and a couple of other things that you’ll need to know to get going.
Recommended Server Requirements
Although having WordPress installed in your server is enough to install the theme, we recommend that your server meets the following versions:
- PHP version 7.0 or greater.
- WordPress version 5.1 or greater
Installing The Theme
Installing the theme is quite straightforward.
Download and save the ZIP file containing all the theme files. We’ll be using it later on.
Step 1. Go to your WordPress dashboard and head over to Appearance > Themes.
Step 2. Inside Themes, click on Add New (plus icon).
Step 3. Click on Upload Theme located near the top right.
Step 4. It will then ask you to choose the ZIP file for the theme. Navigate to and select the ZIP file for the Best Recipe theme that you downloaded earlier. Once done, click on Install Now.
Step 5. Click on the Activate button after the theme installation finishes.
That’s pretty much it! Reload your website to see the gorgeous theme in action!
Installing Recommended Plugins
Best Recipe requires four essential plugins to be installed for some components to work: BlossomThemes Email Newsletter for the Newsletter Section, Customizer Search, Smash Balloon for Instagram Section, and Contact Form 7 for contact forms.
To install the plugins, follow the following steps:
Step 1. Go to your WordPress Dashboard. Head over to Plugins > Installed Plugins.
Step 2. On the top it displays a notice, asking you to install the recommended plugins. Click on Begin Installing Plugins.
Step 3. Select all the plugins and choose Install from the dropdown menu. Hit Apply.
Step 4. Head over to the Installed Plugins page once again. Select all the plugins, choose ‘Activate’ in the dropdown, and click on Apply as shown below.
That’s it. The plugins are now installed, activated, and ready to use. You’re all set!
Configuring The Theme
Now that you have the theme successfully installed, time to tweak the customization settings to make it your own!
As with all the other themes from GLThemes, the Best Recipe theme comes with tons of customization features to truly give you full control over the look of your website.
We’ll be exploring various customization options available in the theme’s customizer in this section.
Site Identity Options
While inside the customizer, navigate to Site Identity to edit settings such as Header title and tagline, add a (optional) logo, and add site icon (optional).
Inside Site Identity, you can add a logo via the Select Logo option, change your site’s title in the Site Title option, change the tagline in the Tagline option, and add a site icon in the Select Site Icon option.
You’ll be able to see the live preview as you edit the options.
Change Basic Appearance Settings
You can change the basic appearance of your website through the Appearance Settings option inside the customizer as shown below.
While inside the Appearance Settings option, you can change the Colors and Background Image in their respective settings.
Change Website Colors
While inside Appearance Settings, go to Colors.
Available Color Options:
- Header Text Color: Color for the header title and subtitle.
- Background Color: The color of the hindmost background. Color changed for visibility. Default is #FFFFFF(white).
Change Background Image
You can add or change the background image of the whole website through Background Image settings inside Appearance Settings. By default, no background image is set.
Click on Select Image and upload the image file to the uploader. After uploading the image, you can choose various Preset to change how the background image displays. You can also manually tweak the position of the background image through the arrow options.
Front Page Settings
The front page is what makes or breaks the first impression of a visitor to your website. In Best Recipe, you’ve given numerous options to tweak and customize various sections of the front page.
The Front Page includes the following sections: Banner Section, About, Blog Posts Section, Video Section, Editors Pick Section, Newsletter Section, and Instagram Section.
To start customizing the front page, go to Front Page Settings while inside the customizer.
Inside the Banner Section, you can choose either the Banner as a slider or disable it.
Banner Types
In the Free version, you’re only given one type of banner option — Banner as Slider. You can choose to disable the option in the Banner Options.
Banner as slider
This banner type allows you to set a slider banner and you can choose the sliding content to be the latest posts, categories, or pages.
Customization Options:
- Slider Auto: You can choose to enable or disable the slider auto transition.
- Slider loop: You can choose to enable or disable the slider loop.
Disable Banner
Completely removes the banner section.
About Section
Adverts are one of the About section is generally configured to add a short description of your company with an image to reflect the core motive of your business.
Go to Front Page Settings > About Section.
Customization Options:
Section Title, Subtitle, Description, and View More Options: This is where you can change the title, subtitle and description, and description for the About Us section, which will be reflected in the banner. Moreover, you can add a link and a text to the “View More” button to direct your visitors to a relevant link.
Upload an image: This is where you can add an image to showcase in the About Us section on the home page. The image can be anything related to your business or relevant to your website.
Blog Posts Section
This section displays all your blog posts. You can rename this section’s heading in the Section Title field.
You can also hide the Blog Post Section.
Video Section
The Videos section displays all posts and you can select a post as a “Video” as follows:
Inside your WP Dashboard, go to Posts. Click on Edit on the post you want to edit or you can add new posts.
Editor’s Pick Section
This section highlights the ‘cornerstone’ blog posts, posts that deserve to be seen.
You can change the title of the section in the Section Title field.
You can choose which Posts to include in the Editor’s Picks Section through the Select Editors post option.
For this demo, we’ll select six posts for the editor’s section.
You can add entries in the other fields as well, depending on how many posts you want in the Editor’s section.
Save changes and see the effect live in action.
The newsletter section requires the BlossomThemes Email Newsletter plugin to be properly set up.
After you properly set up the newsletter using the plugin, you’ll receive a shortcode which you have to put in the field above.
Follow the below steps to set up a basic newsletter using the plugin, and generate a shortcode for it:
Step 1. Login to your WordPress Admin Panel. Provided you already have the plugin installed, go to BlossomThemes Email Newsletter > Add New in the sidebar menu.
Add the title for your newsletter in the Add Title field.
You can configure various settings for your newsletter in the Field Settings. For now, the default values will do for us.
You can also customize the appearance of the newsletter in the Appearance Settings field.
Step 2. After you’ve tweaked the settings to your liking, click on Publish button on the lower left and copy the shortcode.
Step 3. Go back to your Customizer > Front Page Settings > Newsletter Section. Paste the shortcode you just copied in the field.
And there we have it, our own Newsletter section ready to use!
Instagram Section
This section is where you can display your Instagram images.
This will require Smash Balloon Social Feed plugin to be installed. You’ll need to generate “Instagram shortcodes” for each post using the plugin to display it on the section.
If you don’t have the plugin installed, please refer to the Installing Recommended Plugins section to know how to install it.
Once you have the plugin installed, follow the steps to generate Instagram shortcodes and insert them into the section for the Instagram posts to be displayed properly.
Step 1. Log in to your WordPress Dashboard and go to Instagram Feed in the right sidebar.
Step 2. The next step is to connect your Instagram account to this plugin to retrieve the posts. Click on Connect an Instagram Account button. On the next screen where it asks you about what type of account you want to integrate, choose Personal.
Step 3. Sign in with your Instagram account credentials on the Sign-In screen. After you’ve successfully logged in, it asks for an Authorization request as shown below.
Click Allow.
Step 4. Click on Connect This Account on the next screen.
Please ensure that your account is successfully integrated with the plugin. The screen should look like this:
You can customize how the Instagram photos are displayed and other few settings in the Customize tab.
But for now, the default customization settings will be sufficient for us.
Step 5. Go to Display Your Feed tab on the plugin page. Copy the shortcode below Display Your Feed.
Step 6. Go to your Customizer. Then go to Front Page Settings > Instagram Section and paste the shortcode you just copied in the Instagram Shortcode field.
That’s it! Ensure that the posts are properly displayed on the homepage. In our case, it’s working wonderfully!
General Settings
General Settings comprises settings that allow you to tweak several aspects of the Header, improve on-site performance via Performance Settings, edit SEO Settings for your website, and a couple of other miscellaneous settings.
We’ll go through each setting and sub-settings inside the General Settings of the customizer and explain what the setting does, how it impacts your website, and where you can see the changes take place.
Header Settings
Header Settings is where you can change the settings of the header of your website. Most of the settings are mostly preferences and are localized, meaning they don’t majorly impact the whole website.
Available Sub-Settings:
- Enable Search: Toggle to enable or disable the Search icon and button on the header.
Toggled On:
Toggled Off:
- Enable Social Links: Toggle to enable or disable the social link icons/buttons on the header.
Enabled:
Disabled:
- Social Links: This option is where you can add, remove and customize the social links present on the header. This option is only effective if you have Enable Social Links turned on.
To add a new link, click on the Add new links button.
For this demo, let’s set up 3 social media links for the header — Facebook Link, Twitter Link, and Instagram Link.
For the first link i.e, the Facebook link, choose “facebook” from the Social Media dropdown menu.
Add the link to your Facebook profile in the Link field.
The steps for the other two links are quite similar. Here’s the end result:
Click on Publish and you’ll be able to see the changes in the header.
You can add links for other social media as well using the same process as above. Just Choose what social media link you want to add from the Social Media dropdown. This will determine what icon will be added.
Post-Page Settings
These settings apply to all the Single Posts on your website, which are generally the blog posts.
Available Sub-Settings:
- Hide Author, Posted Date, Comments, Post Reading Calculation: Enable these settings to hide Author name, Date of Publishing, Comments and Estimated Reading Calcuation on your Single Post pages (blog pages).
This is what the blog post looks like before turning on these settings.
After turning on each of those settings, this is what the same page looks like:
- Read Words Per Minute: This value is used to calculate the estimated reading time of the blog post. Requires Hide Post Reading Calculation setting to be disabled.
- Related Posts Section Title: You change the Related Posts heading displayed at the end of each blog post by editing this setting.
By default, the text is set to “You might also like”:
SEO Settings
SEO Settings contain a few basic settings for the inner pages/blog posts, that have an effect on the SEO of the website.
Available Sub-Settings:
Enable Breadcrumb: Toggle to enable or disable breadcrumb/directory path inside single posts.
- Breadcrumb Home Text: Allows you to change the text for the “Home” link in the breadcrumb. Requires Breadcrumb to be toggled on.
Configuring Layouts
Layouts are essentially how the components are displayed in a particular section or theme component — their positioning, colors. size, etc.
Consider them as themes or presets for theme sections. With different layouts, you can fully revamp and change the look of Headers, Footers, Single Posts, and so forth without having to add any code or use any plugin.
Best Recipe (Free) only comes with layouts for Sidebars. You can always upgrade to the Pro version of the theme for more layout options such as Header, Sliders, Archive, and Pagination.
To start customizing layouts, head over to Layout Settings inside the customizer.
Note: Only Sidebar Layouts are customizable in the free version of the theme.
There are 3 layouts for Pages in Best Recipe. Pages include any page you create through the Admin Panel or the template pages created by us such as Contact Page, Testimonial Page, etc.
We’ll mark each layout numerically from top-right-down as you see on the screenshot above.
- Page Sidebar Layout #1: Sidebar completely disabled.
- Page Sidebar Layout #2: Sidebar on the left side of the page.
- Page Sidebar Layout #3: Sidebar on the right side of the page.
Note: The Page sample used here is the default Privacy Policy page. All of these layouts look the same on any Page.
There are 3 layouts for Posts in Best Recipe. Posts include any Post you create through the Admin Panel which is generally a blog post.
We’ll mark each layout numerically from top-right-down as you see on the screenshot above.
- Post Sidebar Layout #1: Sidebar completely disabled.
- Post Sidebar Layout #2: Sidebar on the left side of the page.
- Post Sidebar Layout #3: Sidebar on the right side of the page.
How To Create A Page in WordPress
Creating pages in WordPress is a simple process. Pages can be fully custom or you can create a page with premade templates.
Follow the steps below to create a simple new page for your website:
Step 1. Log in to your WordPress Admin Panel. Go to the Pages option located in the left sidebar.
Step 2. Click on Add New at the top. You should have a screen that looks like this:
You can add titles, paragraphs, and many other blocks through the editor. For now, let’s create a basic page titled “My First Page” and a dummy text for the paragraph.
Step 3. Click on Publish button located on the righthand side bar.
That’s pretty much it. We’ve created a page titled “My First Page”.
Here’s what the page looks like:
You can add different blocks, headings, and media files via the + button in the editor.
Set Up and Configure Contact Page
Let’s create a Contact page for your website from a ready-made template that comes with the Best Recipe theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Contact page.
Step 3. You can configure other settings such as adding an Excerpt or setting the Featured Image for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Time to configure the theme!
Step 4. Go to your Customizer and head over to Contact Page Settings to begin customizing your newly created Contact page.
Customization Options:
- Contact Details Section: Here you can change the text for Location Title, Description, Mail Title, your email address, Phone Us heading title, and your phone number.
Ensure that the changes are reflected on the Contact Us page by publishing the changes and refreshing the page.
As expected, we can see the changes on the page.
- Google Map Section: You can embed Google Maps of your location via this section. You can always disable this section by toggling the Google Map Settings button off.
To add a new embed for your location, go to Google Maps and enter your location. For this demo, we’ll input the following address: Empire State Building, West 34th Street, New York, NY, USA
Click on the Share button.
And on the Share page, go to Embed a Map tab. Copy the link shown.
Go back to your Contact Page Settings, and enter the embed code you just copied in the Embedded Google Map field.
Refresh the page to see the changes.
- Contact Form Section: Contact forms are essential components of a Contact page. You can add a contact form to your page by creating and configuring a form in Contact Form 7, which is a plugin we’ll use. If you don’t have the plugin installed, please refer to Installing Recommended Plugins section to learn how to install it.
You can change the form title in the Contact Form Title field. For this demo, we’ll keep it as it is.
To get a shortcode for a form configured in Contact Form 7, follow the steps below:
Note: You must have the Contact Form 7 plugin installed.
Step 1. Go to your WordPress dashboard and go to Contact page from the sidebar.
Step 2. Click on Add New to add a new contact form. Enter your form title in the given field.
Step 3. You can configure the form as you please, but for now we’ll use the default template.
Step 4. Configure the Mail settings to make sure the contact form is fully functional and sends mail to the right email address.
You can configure other settings for the form as well. For now, this will do for us. Hit the Save button.
Step 5. Copy the shortcode shown on the top.
Go back to the Contact Us Form settings, and paste the code in the Contact Form Shortcode field as shown below.
Hit Publish and refresh the Contact Us page to see the changes in action.
Recommended Image Sizes
Image sizes can impact the performance of your website, which is why we suggest you use the following sizes for images on the website (in pixels):
- Featured Video Section (1st Post): 648px * 581px
- Featured Video Section (2nd to 5th Post): 317px * 287px
- Featured Posts Section: 718px * 487px
- Latest Post Images (1st and 2nd post): 693px * 464px
- Latest Post Images (3rd to 5th post): 446px * 293px
Further Support
If you have any issues about how to install the theme, set up the pages, or customize the website elements, please submit an inquiry ticket at the Support page. You can also directly mail us at [email protected]
Theme Installation Service
If the theme installation process is a little too technical for you, we offer theme installation services at an extremely affordable price. Check out our Theme Installation service page for more info.
Theme Customization Service
If you want professionals to customize the theme for you, or make internal changes to the theme’s core elements to better suit your liking, our Theme Customization service might just be the right service for you.