Introduction
Chefex is fast, customizable & beautiful WordPress theme suitable for blogging. It is very lightweight and SEO friendly. Chefex is mobile friendly that search engines work fine with it.
This theme offers multiple layouts like grid, masonry and list, that every layout has multiple design.
Masonry
Grid
List
Chefex blog WordPress theme is customizable to suits your website as you want. Chefex offers multiple built-in widgets that you can add in widgets areas to get your website more beautiful.
Post and Page customization options give you another chance to customize each post or page.
Installation
Downloaded zip file is contain some file like original theme and documentations. Unzip the downloaded zip file.
Inside the unzipped folder you can find chefex.zip file. Install it by order of below.
In your admin panel, go to Appearance -> Themes and click the “Add New” button.
Then click “Upload Theme” button.
Browse chefex.zip from your system and upload it and install it.
After installation you will see the activation button. Activate the theme.
After activation, you will be redirected to Chefex Welcome page.
In this page you can find how to install required plugins, import demo content and customization of the theme.
Before installing Required Plugins, register your order key. This key is your “Order Number” in Our Website. It is digits that you will insert in the box to register the theme.
As you can see, after installing “One Click Demo Import” plugin from Required plugins, you can use the plugin to import demo data.
After registering your order number in the box your digits will be displayed in the box.
Required Plugins section will show you how to install and activate plugins.
Chefex Core plugin is required to add some core features. Be sure you have installed it.
As we told, after activation of the “One Click Demo Import” you can see the “Demo Import” section activated in “Chefex Welcome” page.
Import Demo Content
If you have your data on your website, we recommend you do not use Import Demo section, instead add sections and widgets manually that you can read about them in below of this page.
If your website is ready and you want to import demo, follow the steps.
In “Chefex Welcome” page that you can find it in Appearance -> Chefex Theme. Click on “Import Demo” button.
In this section you have two option.
- Import Demo by Manual Import
- Import Demo by clicking Import Demo Data button
In Manual Import, you can find the files in downloaded theme zip file from marketplace. Add theme in each section and start importing.
But if you choose automatically import, click the “Import Demo Data”.
This page offer you some plugins to install. Click on “Continue & Import” button.
After clicking the button, Importing will be started automatically.
After importing is finished, you will see the below page.
Visit your website by clicking the “Visit Site”.
Widget Areas
Chefex blogging WordPress theme has 14 widget area by default.
- Home Before Content: This area will appear only in home page before content section.
- Home After Content: This area will appear only in home page after content section.
- Before Footer: This area will appear before footer section.
- Default Left and Right Sidebar: sidebar of the blog, archive and search page.
- Post Left and Right Sidebar: sidebar of the post section.
- Page Left and Right Sidebar: sidebar of the page section
- 404 Page Left and Right Sidebar: sidebar of the 404 error page.
- and 3 Footer widget area: By default there is 3 footer widget area but you can add or remove areas in customization section.
Customization (Editing Chefex Theme)
Go to Appearance -> Customize section. In this section you can see WordPress default customization section and Chefex theme customization.
- Chefex Customization:If you visit each section, you will see more help for each item in it.
- Site Identity: Add site logo, title and description in here.
- Colors: Customize theme color, text color, title color, background color and accent color.
- Background Image: Add background image in this section for your website.
- Menus: Set menus and there items in this area.
- Widgets: In this section you will see widget areas of the Chefex theme. You can add widgets to your selected widget area to display in there place. If you add any widget in sidebars, the sidebar will be displayed, othervise it will not.
- Home Page Settings: Set home page and blog page in this area to display.
- Additional CSS: Add your custom CSS in this box.
Chefex Customization:
If you visit each section, you will see more help for each item in it.
- Layout: Layout Mode (wide or boxed), boxed size, hide or display to top button, hide or display loading page and the animation of the loading page.
- Top Header: hide or display the top section of the header, Change top header section background color, Change top header section text color (not links), Change top header section links color, Change top header section links color in mouse hover.
- Header: Hide or display the header section (main menu section and website logo), Change main menu theme, Change header section background color, Change header section text color, Change header section links color, Change header section links color in mouse hover, Change website name color in header section.
- Typography: Insert Google Font URL for embed and header fonts, Insert Google font family, Change font size of the content, Change line height of the content, Change letter space of the content and change heading (h1 – h6) font sizes.
- Slider: Hide or display slider of the website, Wide or boxed the slider, choose to display content of the slider based on latest posts, category or tag, Choose item to display in slider, Choose how many posts will be displayed in slider and more.
- Archive: Choose blog, archive and search list layout, blog theme, columns to display and more.
- Single (Post & Page): Hide or display all thumbnail from single posts or pages, Display wide or boxed all posts thumbnail and more.
- Comments: Hide or display all comment section from posts and pages, Write close comment message.
- Sidebar: Sticky sidebar. Hide or display right sidebar of the blog, Hide or display left sidebar of the blog and more.
- Footer: Hide or display website footer, Wide or boxed footer of the website and more.
- Copy Right: Hide or display website copy right section, Wide or boxed copy right section of the website and more.
Post & Page Customization
This settings is in every post and pages that you can use these options to overwrite the customize settings.
Chefex Core Plugin
Chefex Core plugin is a plugin that you can control shared buttons, Google Tag Manager and Google Analytics and built-in widgets. In this plugin you can tell the Chefex theme that which shared buttons will be displayed in post share section. In the Google section of the plugin, you can enter your Google Tag Manager code and Google Analytics code.
Built-in widgets are widgets that you can add them to your widget areas in “Appearance” menu in “Widgets” section.
Also you can edit them in the place you have been added by clicking on each widget.
1- Chefex Category Slider
Category Slider is a widget that you can add to widget areas to display posts by latest, category or tag. This widget has multiple layout.
2- Chefex About Me
This widget has multiple layout.
3- Chefex Category
This widget has multiple layout.
More Details
1- How to create mega menu in Chefex?
Chefex has built-in classes to create mega menu.
To create mega menu, go to Appearance -> Menus.
Open “Screen Options” in top of the page and check “CSS Classes” option.
Select your menu which you want to add the mega menu.
1-1- Step One
Create top menu with “Custom Links”. For example add # in “URL” and Menu in “Link Text” then “Add to Menu”.
Go to created menu and open it. The menu will be look like this.
Add “chefex-mega-menu” class name into “CSS Classes (optional)” field. This class name is the top level of the Chefex mega menu.
1-2- Step Two
Add sub menu to the menu and add “chefex-menu-title” in the class name field like above.
Now we are going to add image to the menu. Go to “Media” menu and copy the image URL that you want to add to the menu.
Create another menu like below. But this time leave the class name empty.
To create image menu you can use <img /> HTML tag like <img src="https://example.com/image-1.jpg" alt="your title" />.
Create another sub menus if it is necessary.
In this level you created one column of the mega menu. If you want more columns, repeat it from Step Two
Your final menu could be look like below.
1- How to add title to widget?
If you group a widget with “Heading” widget, Chefex couldn’t add extra styles to the title of the widget.
You have to add some style by changing the heading HTML.
Add class “widget-title” to Heading tag and <span></span> right after the title.