Your Qefood WP WordPress Theme

Download The Theme

1. Select the “All Files & Download” option to download the theme file and the sample data (the main theme file zip will be located inside the Upload folder).
2. Select the “Installable WordPress File Only” if you just want the theme.

#1. Qefood Theme Options

Theme Functionality: Custom Style, Theme core, Post Views etc.

#2. AJAX Login and Registration

Easy to integrate modal with Login and Registration features + inline form using shortcode.

#3. SearchWP Live Ajax Search

Adds "live search" functionality to your WordPress site. Uses the built-in search and jQuery.

#4. Frontend Publishing Pro

Allow your users to create, edit and delete posts directly from the WordPress frontend area.

#5. MailChimp for WordPress

Allowing your visitors to subscribe to your newsletter should be easy. With this plugin, it finally is.

#6. Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

#7. Nav Menu Roles

Hide custom menu items based on user roles.

#8. One Click Demo Import

The best feature of this plugin is, that theme authors can define import files in their themes and so all you (the user of the theme) have to do is click on the “Import Demo Data” button.

#9. WooCommerce

An eCommerce toolkit that helps you sell anything. Beautifully.

1. To create a new Main Menu go to:

This tutorial demonstrates how to create a custom menu in WordPress and how to create a menu structure.:

1. Go to your WordPress Dashboard > Appearance > Menus
2. Click on the "create a new menu" link.
3. Write a name for you menu.
4. Press Create Menu button.

2. To customize your new Menu:

1. Start to add menu items from the left panels (Homepages, Pages, Links, Categories).
2. You can manage your menus by using the drag and drop functionality and rearrange the menu items in the desired order.
   After setting up your menu, scroll down to the bottom of the page and assign the menu to the "Header Navigation" Theme Locations at the bottom. Select Header Navigation same thing you see in the photo from the below.
3. Click the Save Menu button.

3. Add Icons to your new Menu:

1. To add a font ICON: select a menu that you want to edit and paste the icon code in a menu item, then save the menu. To preview all available Font Awesome icons go to https://fontawesome.com/icons.



2. Now, edit your menu and just paste the code you've copied:
   

4. Add price/text ribbon "$59" to the menu:

1. Go to Appearance > Menus
2. Open menu and go to "Navigation Label" and add:

3. $59

   like this:
   

5. "Add Post" button / Social icons / Notifications:

1. Social Icons: - Theme Options > General Settings > Display Social Icons Header / Footer. Select "Yes" and add your links.
2. Add Post: - Theme Options > General Settings > Display Add Post Button (Header). Select "Yes" and add your link.
3. Notifications: - Theme Options > Blog Settings > Display Recent Comments Modal. Select "Yes".

Categories Settings (icons)

Categories Settings, small images that are displayed below the big search section. Image can have any size. But procure to make it as small as possible. The ones added in the demo have the size of 100x100px.

Finding the ID of a Category

In order to add an image to a category, we need to know the ID of the category. You can view your WordPress category ID by editing it. Simply open a category to edit, and you'll see the category ID in the browser's address bar. It is the same URL which appeared when there was mouse hover on your category title.

• 1. Go to Posts > Categories.
• 2. Choose the category you want to find the category ID.
• 3. Hover on the category's edit link and you will see the URL at the bottom with the category ID.

Add ID and Image to the Category

• 1. Theme Options > Categories Settings.
• 2. Now that you know the Category ID for the first category displayed below the search, add the number of the ID.
• 3. Add Category Image
• 5. Click "Published" and that's it.

Homepage with Drag and Drop Modules

Drag & Drop Homepage – by dragging and dropping the (Modules 1-2-3-4-5) custom widgets into the layout that gives your website the professional look and feel you are truly looking for:

1. Go to Dashboard > Appearance > Widgets:
2. Drag & Drop any Module Widget from the 5 custom ones: Module 1, Module 2, Module 3, Module 4 and Module 5
3. Drag the Modules to the the Custom Sidebar “Home Modules“, as is written in the description of the sidebar: “Use only the widgets that start with the name Module”.
4. Go to Dashboard > Appearance > Widgets:
5. For easy use, you can install the "Classic Widgets" by installing this plugin: https://wordpress.org/plugins/classic-widgets/

WooCommerce Configuration

Whether you’re launching a business, taking brick-and-mortar retail online, or developing sites for clients, use WooCommerce for a store that powerfully blends content and commerce. WooCommerce is the world’s most popular open-source eCommerce solution.

1. Install and activate the WooCommerce plugin from here: https://wordpress.org/plugins/woocommerce/
2. Go to Appearance > Customize > WooCommerce > Product Catalog.
3. Change "Products per row" with 3 and "Rows per page" with 2, as per screenshot and click "Publish".

Using Frontend Publishing Pro without the demo content from the demo

In this section, you will learn how to install the plugin and create a simple frontend publishing form with it. Just follow these steps::

1. Go to Plugins > Add New in your WordPress site’s admin panel and click on the Upload link at the top of the screen. Plugin can be found via Qefood-wp/plugins.
2. Upload the plugin’s zip file. Once the file has been uploaded, activate the plugin.
3. Access the plugin control panel located at Frontend Publishing Pro > Forms.
4. To create a new form just enter a suitable name, description and post type and click ‘Create Form’. After a few seconds the newly created form should show up on the right side of the screen.
5. The form is now ready for use and can be integrated into any post or page. Just create a new page and add [wpfepp_submission_form form=”X”] in the content area. Replace X with the form ID. The form should look something like this:
6. On a different page use the shortcode [wpfepp_post_table form=”X”]. This shortcode will create a list of posts with edit and delete links. The list will contain all the posts of the post type supported by form X. It should look something like this:

Customizing A Form

If you want to customize an existing form then here are the basic steps that you need to follow::

1. Go to Frontend Publishing Pro > Forms.
2. In the list table located at the right side of the screen you will see all your existing forms. Hovering over a form name should make the ‘Edit’ link visible. Click on this link to start modifying the appearance and behavior of the form.
3. On the next screen you will see a list of form fields. You can drag and drop these fields to rearrange them or click on a field to change its settings.
4. Once you are fully satisfied with your form save your changes and see them in action on the frontend.

Defining Restrictions for a Field

One of the things that set Frontend Publishing Pro apart from the multitude of form plugins available on the Internet is that it allows you to define restrictions such as word range, maximum links, number of comma-separated sections and so on. A post is not created until all the requirements are met. To define restrictions for a particular form field:

1. Go to Frontend Publishing Pro > Forms and start editing the form for which you want to define restrictions.
2. On the next screen click on any field to slide open its settings. In this case, we will use the Content field as an example. This is what it looks like on the settings page:
3. Now you can drag and drop validators and sanitizers onto this field to add restrictions. For instance, you could add the Min Words validator to the field and the user will not be able to create a post until it meets the word requirement. If you do not want to define a particular restriction just leave it empty or remove it. For instance, if you don’t want to set a maximum word count limit then just leave the area empty.

Working with Custom Fields

If you want to save a user-entered value as post meta then you should create a custom field. Here’s how you can do so:

1. Go to Frontend Publishing Pro > Forms and start editing the form for which you want to create a custom field.
2. On the right side of the page you will notice a box titled ‘Custom Fields’. Its looks like this: : Enter a label along with a valid meta key and hit the Add button. Your new custom field will show up under the default form fields. Let’s say you want to give your users the ability to submit a byline along with each post. All you have to do is create a custom field by entering a label and a valid meta key like ‘byline’ or ‘about_the_author’. After that you can get the byline for each post by using something like this:

   <?php $byline = get_post_meta( $post_id, 'byline', true ); ?>

Qefood is using 9 Custom Fields

If you haven’t installed the demo content with the 1 click demo install option, you’ll need to create manually the custom fields: "Ingredient (1-5)", "Instruction (1-3)" and "Recipe Source Link".

1. Go to Frontend Publishing Pro > Forms and start editing the form for which you want to create a custom field.
2. First, create the “Ingredient (1)”. For the label add “Ingredient (1)” and for meta Key add “qefood_ingredient1” and click add. Note: You can change the label name, but you can't change the meta key. .
   Do this 5 times, changing the Label number and the meta key number, like this: Ingredient (2) / qefood_ingredient2, and so on until Ingredient (5) / qefood_ingredient5.
   Now you can click the custom field you've created and configured it, you'll need to do the same thing for the 5 custom fields you'll create with the name (Ingredient), like this:



3. Now, create the “Instruction (1)”. For the label add “Instruction (1)” and for meta Key add “qefood_instruction1” and click add. Note: You can change the label name, but you can't change the meta key.
   Do this 3 times, changing the Label number and the meta key number, like this: Instruction (2) / qefood_instruction2, and so on until Instruction (3) / qefood_instruction3.
   Now you can click the custom field you've created and configured it, you'll need to do the same thing for the 3 custom fields you'll create with the name (Instruction), like this:



4. The last custom field you need to create is “Recipe Source Link”. For the label add “Recipe Source Link” and for meta Key add “qefood_source” and click add. Note: You can change the label name, but you can't change the meta key.
   Now you can click the custom field you've created and configured it, like this:

Thumbnails – Fix strange looking images on blocks

This problem appears when you install the theme on a site which already has content. The theme comes with it’s own thumbnails to minimize the page size and increase the page loading speed.:

1. Install and activate the Thumbnail Regenerate plugin from here: https://wordpress.org/plugins/regenerate-thumbnails/
2. Go to Tools -> Regen. Thumbnails and press the “Regenerate All Thumbnails” button:
3. Wait until the regeneration process is 100% done and check the page (your website). Refresh the browser page to see the changes, and that's it.

Contact Form 7 Configuration

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on:

1. Install and activate the Contact Form 7 plugin from here Contact form 7.
2. Navigate to Dashboard > Contact and click Edit your first contact form.
3. Copy / paste this code:
   

   [text* your-name placeholder "name*"] 
   [email* your-email placeholder "e-mail*"] 
   [text your-subject placeholder "subject"] 
   [textarea your-message]
   [submit "Get in Touch"]

4. Now, copy the shortcode and paste it into your contact page:

How do I translate my theme to another language?

Our themes are written in English, though you are of course welcome to translate them to your language. While it's possible to go through each theme file and manually translate the appropriate text elements, we highly recommend using the program Poedit to translate your theme. It's easy and will save you LOTS of time.

1. First, go to WP Dashboard > Settings > General > Site Language > Select your language > Save.
2. Then, download & install the Poedit program.
3. Open Poedit and click the "Open" button on the top-left of the program screen. Within your theme's files, find the "languages" folder and select the "qefood-wp.POT" file.
4. A long list of text elements you may translate will appear in the box labeled "Source Text". Please note: You may not need to translate all of these elements. Many may be WordPress notification messages or similar.
5. Select the line within the "Source Text" box that you'd like to translate. When that line is highlighted, go down to the box labeled "Translation". Here, you can type the direct translation of the "Source Text" in whatever language you'll be using. Repeat this step for all of the "Source Text" elements you wish to translate.
6. When done, go to "File" and "Save as" within your theme's "languages" folder.
   IMPORTANT! You must save this new file with a name based on a specific format: aa_AA
   The first "aa" refers to ISO 639 two-letter language code (list found HERE).
   The second "AA" refers to an ISO 3166 two-letter country code (list found HERE).
   
   ( Example 1 )
   If translating to Danish, we would use the Danish language code of "da" and the Danish country code of "DK". The file name must be the language code in lowercase letters, followed by an underscore character, and lastly the language code in uppercase letters. So the finished file name would then be: da_DK
   ( Example 2 )
   If translating to Brazilian Portuguese, your file name would be: pt_BR
   Note: For the French language in Canada, please use "fr_FR". "fr_CA" is not recognized by WordPress.
7. When you save the file, it will automatically create your .po format as well as an additional .mo format file of the same name.
8. Via your FTP program, upload the .po & .mo files you just created to your theme's "languages" folder.
9. You're finished!