Welcome to our customers, here is the theme’s documentation.
- Install the theme
- Update the theme
- Manage Menus
- Social icons
- Create Post with Lead text
- Responsive Video embed into a Post
- Create an Image Gallery into a Post
- Customize the theme
- Featured Posts
- Developer’s Guide
- 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
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.
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.
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.
In the home you can add featured posts to the top.
Make featuerd post
The default look is the small, but if you want the large you just add the “large” tag into the post in post edit mode.
In the post edit mode scroll down the Tags section, type the “featured” word into the field and click the add button.
Lastly don’t forget Update or Publish the post.
If you are a developer maybe this is useful to you.
This template has PHP, IMG, SASS, CSS, and JS files.
The root theme folder contains the PHP files, languages folder contains the .POT file for translation, include folder (for the reuseable WP elements, like share buttons, or looping article lists) and the ASSETS folder for everithing else.
- fonts: FontAwesome because we not use CDN if not necessary.
- css the stylesheet files in Sass language
Basically the template has three main different section, HEADER, WRAPPER, FOOTER
These sections are constant on all pages.
- Main menu (#mainmenu): sticky menu which indicates the sidemenu, and have a search, logo… etc.
- Featured Posts (#featured): only the home screen above the menu. Displays featured posts.
WRAPPER (#wrapper) The main section for the content is constantly changing. Every page has a grids, cols and id-s in the wrpapper. Make a col line and the content for example the home page look like this:
FOOTER (#footer) Same in every page, a footer sidebar, a footer-social, and a footer-copyright.
Footer Social The icons are from FontAwesome here are the comlete list of usable icons: ICONS
The style of the theme is written by SASS. The main file is in the main.scss and the there is sub styles wich are part of main: grid, menu… etc. All files are well commented, and transparent.
gridlex.min.css The grid system of the page, which respoinses for the good responsive looking. This grid system uses flexbox. More information about Gridlex system.
normalize.min.css For the HTML resetting. LINK for the author
main.scss All styles for the website, the scss file has a table of contents.
- FONTS importing font and make the variables for use it
- COLORS the main color variables
- GRID normalize and gridlex import, and some helper classes
- TYPOGRAPHY responsive typography and font family options
- BASIC basic styles and elements, categories, meta, andshare buttons
- FORMS all form styles, inputs, textareas, buttons
- HEADER menu, and sidemenu options
- FEATURED featured article from home
- ARTICLE-LIST article list formatting for, home, and archive
- MORE POSTS more posts buttons, for home, archive article lists, and post
- ARCHIVE – TITLE archive title and description
- AUTHOR – TITLE author title and description
- POSTS and PAGE posts, and page desings
- PAGE only the page design
- FOOTER all footer elements, sidebar, social, copyright
- RESPONSIVE queries archive title and description
Sources and Credits
- WordPress codex: https://codex.wordpress.org/
- Sass for styling, compressed by Sublime Text Sass
- Grid system based on Skeleton Sass version
- Normalize css
- Gridlex Grid System
- wp.css and other code details from underscores
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.