Welcome to our customers, here is the theme’s documentation.
- Install the theme
- Setup after installation
- Update the theme
- Manage Menus
- Social icons
- Share buttons
- Add Designed Latest Posts Widget
- Make an advertise widget
- Create Post with Lead text
- Responsive Video embed into a Post
- Create an Image Gallery into a Post
- Customize the theme
- Make a translation for the theme
Install the theme
- Make sure that you have the latest version of WordPress installed.
- You can upload Recipe to WordPress in one of two different ways:
- Extract the themename.zip and upload the extracted theme folder to the /wp-content/themes/ directory on your FTP server. Help Video
- OR go to Appearance > Themes and click on the Add New link at the top
and click Choose File, then select themename.zip and click Install Now.
- After you upload the theme, activate it by going to Appearance > Themes and place your mouse over the theme and click the Activate button underneath.
Notice: If you had any content before you installed the theme, maybe you need to regenerate the thumbnails of the posts to work fast the theme. Here is a tutorial.
Update the theme
From time to time, a theme update will be released that either fixes a bug and/or adds new features to the theme. You can update the theme in one of three ways:
- Remove the old version of the theme by going to Appearance > Themes and activating another theme (you may want to place your site in Maintenance mode via a plugin). Then, hover your mouse over the theme image and click Theme Details. Then click delete in the lower right corner of the window that appears. Then, follow the installation instructions above to install the new version of the theme.
- OR you can upload the new /Theme folder from the themename.zip file via FTP and overwrite the old files.
- OR you can use the Envato Market plugin which you can update the items automatically.
NOTE: Updating the theme will overwrite any changes you made to any of the core theme files (index.php, style.css, header.php, etc), but you will not lose any changes you made to the Customizer, Menus, Widgets, etc.
To use the theme menu function firstly you have to define menu, than you can add menu items, and than you can make submenus.
You must define a menu before you can add items to it.
- Login to the WordPress Dashboard.
- From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option to bring up the Menu Editor.
- Select Create a new menu at the top of the page
- Enter a name for your new menu in the Menu Name box
- Click the Create Menu button.
Add menu to the site
To apper the menu on the site you have to choose the position of the menu with ThemeLocations.
- In the top of the page click the ‘Manage locations‘ button.
- Select your menu with the dropdown selection in column Assigned Menu.
- Click save changes.
Adding items to the menu
You can add different link types into your menu, these are split between panes left of the menu you’re currently editing.
- Locate the pane entitled Pages.
- Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
- Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
- Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
- Click the Save Menu button once you’ve added all the menu items you want.
Your custom menu has now been saved.
Multi level menus
When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.
The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.
To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.
- Position the mouse over the ‘child’ menu item.
- Whilst holding the left mouse button, drag it to the right.
- Release the mouse button.
- Repeat these steps for each sub-menu item.
- Click the Save Menu button in the Menu Editor to save your changes.
To make a social menu just create a menu, and make a position to social menu.
- click the “Custom Links“
- Add url to your social profile like: https://www.facebook.com/envato/
- Add link text the social platform name like: facebook ; twitter or instagram… etc. (lowercase, no somicolon). See the full list a little further down.
- Save the menu
Brands icon list
You can use all Font Awesome icons for example:
- 500px, adn, amazon, android, angellist, apple,
- bandcamp, behance, bitbucket, btc, black-tie, bluetooth, buysellads,
- cc-amex, cc-diners-club, cc-discover, cc-jcb, cc-mastercard, cc-paypal, cc-stripe, cc-visa, chrome, codepen, codiepie, connectdevelop, contao, css3,
- dashcube, delicious, deviantart, digg, dribbble, dropbox, drupal, edge,
- eercast, empire, envira, etsy, expeditedssl,
- font-awesome, facebook, firefox, first-order, flickr, font-awesome, fonticons, fort-awesome, forumbee, foursquare, free-code-camp,
- get-pocket, gg, git, github, gitlab, glide, google, google-plus, google-wallet, gratipay, grav,
- hacker-news, houzz, html5,
- imdb, instagram,
- internet-explorer, ioxhost,
- joomla, jsfiddle,
- lastfm, leanpub, linkedin, linode, linux,
- maxcdn, meanpath, medium, meetup, mixcloud, modx,
- odnoklassniki, opencart, openid, opera, optin-monster,
- pagelines, paypal, pied-piper, pinterest, product-hunt,
- qq, quora,
- ravelry, rebel, reddit, renren, rebel,
- safari, scribd, sellsy, shirtsinbulk, simplybuilt, skyatlas, skype, slack, slideshare, snapchat, soundcloud, spotify, stack-exchange, stack-overflow, steam, steam-square, stumbleupon, superpowers,
- telegram, tencent-weibo, themeisle, trello, tripadvisor, tumblr, twitch, twitter,
- viacoin, viadeo, vimeo, vine, vk,
- wechat, weibo, whatsapp, wikipedia-w, windows, wordpress, wpbeginner, wpexplorer, wpforms,
- yahoo, yelp, yoast, youtube
Share Buttons on the articles
The theme has a great social engagement, it programmed to make your content viral.
To add share buttons, you need to Install the Simple Share Buttons Adder plugin, but when you activate the theme, the system draws attention to installing the plugin.
After you install and activate the plugin, please follow these steps:
- Navigate to WordPress Admin => Settings => Simple Share Buttons
- Add the buttons that you want on the top (just pull them down)
- Check that there is no location is selected
- Click the styling and set it up like the screenshot:
Important to delete the text from Call To Action
- Save the settings with this button on the upper right:
Sidebars play an important role in designing the layout of a WordPress website to display content other than the main articles of a website. For example, a short list of recent articles, recent comments, a list of pages, or popular articles on a website can easily be displayed across the entire site.
It can also be used to display advertisements from third-party websites. Users can drag and drop items into sidebars from Appearance » Widgets in the admin panel. Some WordPress themes come with highly configurable options to create dynamic layouts for different sections of a website, which allow users to add their own sidebars from a drag and drop interface.
This video explains how to use wordpress sidebar.
Add Designed Latest Posts Widget
The theme has a custom latest post widget called: “WeartStudio: Latest Posts”. This widget displays the chosen number of fresh posts in the sidebar.
Add the widget
The setup is need to add a widget to to the sidebar.
- Navigate to WordPress Admin => Appearance => Widgets
- Find the “WeartStudio: Latest Posts” widget on the left, and add to the Sidebar
- Set up the widget Name & Number of posts
- Save the widget.
Make an Advertise Widget
Follow these steps to make an advertise widget such as in the demo.
- Navigate to WordPress Admin => Appearance => Widget
- Find the Text widget in the list on the left, and add it to the Sidebar
- Add a title if you want (but it has no title in the demo) and click the text button on the upper right.
Add your banner code into the field
Save the widget.
Create Post with Lead text
Tons of oportunities to write a post. Here is a little video tutorial to show the basics:
Lead or Excerpt (important to use)
To create a lead text in WordPress it has two way, but this theme supports only one way, the excerpt.
In the post edit mode the top right corner click the Screen options button. And check the Ecxerpt (only once you have to do this).
Scroll down the Excerpt section and type the lead text.
Save or Publish.
Featured image for the posts
The theme supports the Featured image function, this means you can able to display images on the home screen and the archive pages.
In the post edit mode scroll down to the “Featured image” section on the right.
To add a featured image in a WordPress post, simply click on “Set Featured Image” link inside the featured image meta box shown in the screenshot above.
This will open the WordPress Media Uploader. You can use that to upload an image from your computer or use an existing image from your media library. Once you select the image, simply click on Set Featured Image button.
The image will appear in the Featured Image meta box, like this:
Lastly don’t forget Update or Publish the post.
The posts and Pages has many layouts, to use them follow these steps:
- In the editor view (when you writing the content) scroll until you find a section on the right, named: Post Attrbutes, if you don’t see it, than you just turn on in screen options (upper right of the page).
Choose a template.
Save the Post/Page
Make a video post
To make a video post like this, you just need to follow these steps:
- Find the video embed code what you want to insert the article, for example in a case of a YouTube video:
- Click the share above the video
- Click the embed button, and copy the code:
- In the article edit in WordPress Admin (where you want to insert the video) scroll down the Video Audio Embed section
- If it you do not find the section, than it need to turn on the section on the top. Click the Screen Options Button and check the Video, Audio embed option.
- If it you do not find the section, than it need to turn on the section on the top. Click the Screen Options Button and check the Video, Audio embed option.
- Add the code.
- Save the article.
- Click the share above the video
Responsive Video embed into a Post
All you need to do is paste the video URL into the content area and the theme will make the embed responsive automatically.
Make sure is that the URL is in it’s own line and not clickable (hyperlinked). For example:
Create an Image Gallery into a Post
Once you are on the post edit screen, you need to click on the Add Media button.
To add images to the gallery, you can either upload the images from your computer or choose existing images from your media library (images that you have previously uploaded to your site). All you have to do is select the images you want by clicking on them.
Once you have selected all the images that you want to add in your gallery, click on “Create New Gallery” button in the media uploader. Media uploader will then show your selected images in the Edit Gallery view. Here you can add captions to your images, change gallery settings, and rearrange the order of images by simply dragging and dropping them in the order you want them to appear in.
Clicking on Insert Gallery button will close the media uploader and insert the gallery code inside your WordPress post.
If you want more prettier gallery try the Jetpack plugin Gallery module.
Customize the theme
With the WordPress Theme customizer you can personalize how the theme seems.
Open WordPress Administration panel, and navigate Appearance => Themes, roll over the theme and click the Customize button. After you have done the customization just click the save, and refresh your site.
Almost all Our templates support this functions:
- Header logo, or title You can add Logo Image instead of Text Logo .
- Background image, or color Fixed or tiled background image, is up to you.
- Layout, several layout options for the theme elements
- All colors are changeable: Font, Meta, Border and Link colors
- Most of theme blocks are turnable.
- Advertises Banner sections.
- Favicon the site logo for browsers. For example: Browsers page left corner, or the mobile home screen icon.
- … etc. Just head over and explore the opportunities.
The homepage has different sections with different layouts. Each section is capable to display latest posts and you can filter by category, or tag or both.
- Go to the Customizer (WordPress Admin => Appearance => Customize => Home Layout)
- You see four sections ( 0, 1, 2, 3 ).
What you need to setup is the layout, choose one or off the section, after this you can setup a post filter (if you not setup anything than the section will display the latest posts). Just type the name of the category or the tag (not slug, the name like: Tech or Cars).
- Don’t forget to save the theme.
Open a WooCommerce store
WooCommerce is an open-source, completely customizable eCommerce platform for entrepreneurs worldwide. Go beyond the confines of traditional eCommerce solutions, and be limited only by your own imagination.
More information about the plugin.
Full user guide about the usage.
Mega Menu (category articles dropdown)
The mega menu only works with categories, and top level menus only.
- Open the WP Admin > Appearance > Menus
- Enable the CSS classes on the top right Screen Options button.
- Choose the Desktop Menu to edit, if it not chosen by default.
- Add a category what you want to the menu from the categories.
- Add weart-megamenu class to the CSS classes option in the category.
- Save the menu.
Make a translation for the theme
The theme has a themename.pot file which contains all strings in the template which means this theme is fully translateable.
Here is a detailed help to make a translation for any of our themes.
FONTS – Change the default fonts
To change the theme’s fonts, you need to install Easy Google Fonts plugin.
( If you use the One Click Demo import, and you had activated plugin when you import, than the font controls are imported, so you skip these steps and you only need to go the usage part )
After you installed the plugin, please follow the steps:
- Go to WPAdmin > Settings > Google Fonts
- Write the control name field to “Meta”, and click “Create Font Control”
- The “Add CSS Selectors” field paste this and hit enter:
.f-meta, .article-content .post-password-form input[type=submit], .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count, .woocommerce .orderby, .woocommerce-page .orderby, .woocommerce .woocommerce-pagination .page-numbers, .woocommerce-page .woocommerce-pagination .page-numbers, .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce div.product form.cart input.qty, .woocommerce-page div.product form.cart input.qty, .woocommerce div.product form.cart button.button, .woocommerce-page div.product form.cart button.button, .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .related ul.tabs li, .woocommerce-page div.product .woocommerce-tabs ul.tabs li, .woocommerce-page div.product .related ul.tabs li, .woocommerce .sidebar .mini_cart_item, .woocommerce .sidebar ul.product-categories, .woocommerce-page .sidebar .mini_cart_item, .woocommerce-page .sidebar ul.product-categories, .woocommerce .sidebar .woocommerce ul.cart_list li .amount, .woocommerce .sidebar .woocommerce ul.cart_list li .quantity, .woocommerce .sidebar .woocommerce ul.product_list_widget li .amount, .woocommerce .sidebar .woocommerce ul.product_list_widget li .quantity, .woocommerce-page .sidebar .woocommerce ul.cart_list li .amount, .woocommerce-page .sidebar .woocommerce ul.cart_list li .quantity, .woocommerce-page .sidebar .woocommerce ul.product_list_widget li .amount, .woocommerce-page .sidebar .woocommerce ul.product_list_widget li .quantity, .woocommerce .sidebar .woocommerce-mini-cart__total, .woocommerce-page .sidebar .woocommerce-mini-cart__total, .woocommerce .place-order .button.alt, .woocommerce .place-order .button.alt:hover, .woocommerce .wc-proceed-to-checkout .button.alt, .woocommerce .wc-proceed-to-checkout .button.alt:hover, .woocommerce-page .place-order .button.alt, .woocommerce-page .place-order .button.alt:hover, .woocommerce-page .wc-proceed-to-checkout .button.alt, .woocommerce-page .wc-proceed-to-checkout .button.alt:hover, .f-meta-nosize, .sidebar .widget_tag_cloud a, #weart-comments .comment-list .comment .comment-meta, .woocommerce ul.products li.product span.onsale, .woocommerce-page ul.products li.product span.onsale, .woocommerce div.product span.onsale, .woocommerce-page div.product span.onsale, .woocommerce div.product p.price, .woocommerce-page div.product p.price, .woocommerce .sidebar .button, .woocommerce-page .sidebar .button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-page .wc-proceed-to-checkout a.checkout-button, .woocommerce-page .wc-proceed-to-checkout a.checkout-button:hover
- Click Save Font Control
- Repeat the step #2, #3, #4 with this settings:
- Name: “Title”
.f-title, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .article-content #review .review-summary-title, .article-content #review .review-title, .woocommerce div.product .woocommerce-tabs h2, .woocommerce div.product .related h2, .woocommerce-page div.product .woocommerce-tabs h2, .woocommerce-page div.product .related h2, h6, .h6, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title, .article-title, .single header .lead::first-letter, .single header .article-content blockquote p::first-letter, .article-content blockquote .single header p::first-letter, .article-content #review .review-summary-title, .article-content #review .review-title, .woocommerce .sidebar .woocommerce ul.cart_list li a, .woocommerce .sidebar .woocommerce ul.product_list_widget li a, .woocommerce-page .sidebar .woocommerce ul.cart_list li a, .woocommerce-page .sidebar .woocommerce ul.product_list_widget li a,
- Name: “Text”
.f-text, #weart-comments .comment-list .comment, .article-content #review li, .woocommerce .woocommerce-info, .woocommerce .woocommerce-notice, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-notice,
- Name: “Title”
After you done with the senttings (upper there), navigate WPAdmin > Appearance > Customize > Typography > Theme Typography. Here you can change the font family, if you need you can setup laguage specific options (subset, script etc…).
One Click Demo import
After you installed the theme, and all the plugins what you need, install one more the ‘ One Click Demo Import ‘ and navigate the WPAdmin > Appearance > Import Demo Data .
Click the Import demo data button, wait 5-10 minutes and all the demo content will be imported.
Notice: Maybe you get some error messages, this is because the woocommerce import, this is normal and won’t disturb the usage.
The basic wordpress content will be there, so you need to setup the widgets (delete the basic widgets), and you need to delete the Hello World! post from articles.
Instagram Feed in Footer
To show your instagram pictures on the footer, you need to follow these steps:
- Install the WP Instagram Widget if is not installed when the theme was installed (video about the plugin installation).
- Add the Instagram widget to the Instagram sidebar in ‘WordPress Admind > Appearance > Widgets’.
- Setup the instagram account name and the number of pictures (any number, but we prefer the 9).
- Save the widget settings
For the NewsLetter subscriber section (just like the demo):
- Install the the MailChimp for WordPress plugin (video about the plugin installation)
- Add your MailChimp Api key
- Create a form with these code
<div class="text-center " id="weart-newsletter"> <h5 class="h4 w-title"> Join the Family</h5> <p class="c-meta w-text">Recive the latest news via email.</p> <div class="w-input"> <div class="input-group"> <input type="email" name="EMAIL" class="f-text rounded-0 form-control" placeholder="Your Email address"> <div class="input-group-append"> <button class="btn btn-sm btn-dark rounded-0" type="submit" value="Subscribe">Subscribe</button> </div></div> <i class="far fa-envelope "></i> </div> </div>
- Add the MailChimp widget to a sidebar section
- Save the Widget