This section is a comprehensive set of documentation on how to use this theme. If you are an experienced WordPress user you may not need to read any of this, but we do our best to maintain thorough documentation for anyone who has questions.
Theme Options Panel
Visit the Appearances > Theme Options panel to make changes to basic theme settings. This panel is built on OptionTree.
This panel is largely reserved for simple theme content additions, not theme skinning (see the next section for skinning), but you’ll be able to add things like your logo and a default highlight color from this panel. This is what the admin panel looks like:
The full set of options includes:
- 10 Header Layouts
- 6 Default Page Layouts
- Logo & Favicon Uploader
- Theme Highlight Colors
- Options Skin Override
- Breadcrumbs & Pagination Toggles
- Top Hat Toggles & Content Fields
- Footer Toggles & Content Fields
- Post & Page Element Toggles (date, tags, categories, etc.)
- Social Media Icons
- Custom CSS
In addition to the Theme Options panel, this theme also integrates a handful of Page & Post options. These panels will show up on any Page or Post editor, underneath the basic content editor. In the event that they do not appear, make sure that you have enabled them from the top-right “Screen Options” panel. These panels will allow you to override theme-level options on individual pages and posts.
Visit your Appearances > Customize panel to make any superficial theme style customizations.
Note! The Theme Customizer is entirely optional. You don’t need to change a single thing on it and we have not used it at all in the demo… That said, it will give you control to change everything from fonts, type sizes, type color, background colors, and lots more for every main section of the theme. Here’s what it looks like:
The theme frontpage is selected from the Settings > Reading panel. If you set it to “Your Latest Posts”, the frontpage content area will display blog posts in a traditional format.
If you would prefer to use the Static Page with custom page content (this can also include blog posts), you must first create a page from the Pages > Add New panel, then assign the page as the homepage from the Settings > Reading panel.
This theme allows you to add a menu in one of two ways:
- Theme Menus: Add these from the Appearances > Menus panel. Keep in mind that you must create a menu, then add it to the Menu Location panel. This usually covers the main menu for the theme and the “Responsive Menu” space (for if you want to craft a unique list of menu items just for mobile users that is different than the desktop menu). In some themes, a sub-menu in a special location like the top-hat, footer, etc.
- Widget Area Menus:(ie: sidebars, footer widgets, etc.) This isn’t news to experienced users, but you can add your own menus to any widget space in the theme.
Sidebars & Widgets
This theme allows you to use widgets in a few ways:
- Theme Defined Widget Areas: This theme will automatically define a handful of specific widget areas. This usually includes a default page/post sidebar and a bunch location-dependent widget spaces (such as the footer widget spaces).
- Visual Composer Widget Areas: These widget spaces are dynamic – you can add your widgets from the Appearances > Widgets panel and then drag the actual widget spaces onto a page or post from the Layout Builder on that page.
As always, add your widgets from the Appearances > Widgets panel to any of the widget-spaces provide. You can simply drag a widget (in the center of the screen) to the widget-spaces in the right sidebar of that admin panel. If you want additional widgets, you can add them by adding new plugins to your theme (which we can’t offer technical support on, so do this at your own peril/pleasure).
In the demo, we use some extra widgets that require you to install additional plugins such as the “Gallery Widget” plugin or the “JetPack Popular Posts” widget. These are used for demo purposes only, but you can add them quite easily from the Plugins > Add New panel and searching for them.
This theme integrates the “Visual Composer” plugin (you’ll install it after you install the theme). This plugin is entirely optional, but it allows you to replace the standard WordPress content area with a “drag and drop” content area with a variety of different content modules that you can add and manipulate. Please visit this page for the official documentation.
Specific Theme Notes about Visual Composer: This theme overlays some custom styles on top of the Visual Composer default styling. You can remove these custom styles if you wish by removing the corresponding lines of code from the /assets/stylesheets/theme-#-plugins.css file.
If you choose to import the theme demo data, it will also import a handful of template and page layouts that we used in the demo.
Jetpack supercharges your self-hosted WordPress site with the awesome cloud power of WordPress.com. In short, Jetpack will allow you to add a variety of new features such as:
- The Carousel Extension: This adds a ton of new Image Gallery features (including the Circles, Slideshow, and Mosaic shown in the demo).
- The Jetpack Comments Extension: (animated, socially driven comment system shown in the demo).
- Contact Forms, Sharing Options, and lots more!
- Infinity Scrolling
Adding Jetpack is easy. First install and activate the plugin. Then visit the Jetpack panel in the top left of your dashboard. Connect to WordPress.com using the button in the plugin-header. This requires a free WordPress.com account. Yes, that’s annoying, but it is the only way to include these awesome features into your site (and they work outside of this theme as well!)
Once your account is setup and connected, simply activate the modules of your choosing – we used “Carousel”, “Jetpack Comments”, and “Tiled Galleries” in the demo.
Image Sliders & Carousels
This theme allows you to use sliders in one of two ways:
- Plugin Based Sliders: (ie: Revolution Slider or Layer Slider). We will often include dedicated slider plugins with our themes. Using this method is easy: All of these plugins will allow you to build a slider using their custom admin panel on the left side of the dashboard, then they will provide you with a shortcode that you can place into a page or a custom section of the theme.
- Visual Composer Sliders: The layout builder panel (found on the page/post editor screen) allows you to drag slider modules into any space you’d like. Use their easy-to-understand visual builder to create the slider or tabs of your choice and drag them onto the canvas (ideally inside a column).
You need not limit yourself to the sliders/tabs/etc. that we provide with our theme either – in most cases, if you find a plugin that is written up to the official WordPress plugin standards, it will work seemlessly with our theme. Naturally, using additional plugins is outside of the scope of this theme and you should contact those plugin authors for assistance if you run into problems.
The Revolution Slider plugin is a powerful slider that allows you to design & create amazing multi-layered slides with a little bit of time. Once installed, the Revolution Slider can be accessed from the left sidebar. Visit this page for an overview and notes on how to use it.
Click the “Revolution Slider” button at the left sidebar of the dashboard – it looks like this:
Here is the general workflow:
- Start by creating a New Slider.
- Add a title, alias, and select “Full Width” with a Grid Width of “1280”. Set a reasonable height (ie: we use 400 for the height in the demo). The rest of the options on this page can be ignored.
- Visit the Revolution Slider main page and click the green “Edit Slides” button.
- Add a New Slider by uploading a background image. For a Full Width slider, this should be at least 1280px wide and the height should be what you set in the Slider Creation screen.
- Click “Edit Slide” once the option appears. Begin adding layers (text, images, or video) using.
- Tip: This panel can feel overwhelming at first, we know. Keep it simple, start with a few text layers, and play around for a few minutes until you get the hang of it!
- Advanced users can add elements like transparent PNG images, elegant timeline transitions, and more. Like anything with design, practice makes perfect!
- Check your theme’s Resources folder for any reference PSD templates that we might have provided (this is conditional upon licensing restrictions – we often can not include the images that we use in the demo as layered files).
- When your slider is done, just add it as a new module from the Visual Composer panel for your page or post.
Our settings for the demo slider look like this:
Updates & Support for Integrated Plugins
I’ve included a full walkthrough on updating any integrated plugin versions (ie: Revolution Slider, Visual Composer, etc.) as a PDF inside the theme documentation folder. Check it out for detailed instructions on updating your plugin versions to the latest copies supported by the theme.
A note on licensing/updates/support for integrated plugins: I do my best to keep any integrated plugins as up-to-date as possible… with that said, I always take a few days/weeks to do testing on any new plugin versions to ensure that they don’t break within the context that the theme originally used them in. I do that to protect all theme users from any bugs or unstable features, but it’s important to understand that the latest version available on CodeCanyon may not always be the version that is included with the theme. In fact, I’ll usually lag behind by quite a bit so that I have the time to adequately test out each plugin’s performance in a theme before I release it to the entire set of users (you guys)… if you want to jump into the latest version available, you’re more than welcome to pick up a license and update on your own roadmap though
I generally test out any plugins that I choose to integrate with our themes as thoroughly as possible… but with some plugins, extensive testing for every scenario/option/module/etc. just isn’t realistic. If you see something working in the demo, you can rest assured that it’s doable and doesn’t require super advanced technical knowledge. In most cases I try to avoid creating demo-content that isn’t realistic for ordinary users to create… With that said, if you find something that’s not working or that isn’t clear, I generally ask that you first contact me for support (if you think the issue is theme related), and only after that should you ask the plugin developer for support.
You can always choose to buy your own personal license to each plugin that is included with this theme – that will ensure that you have the most current version available, and in most cases, you can request support directly from the plugin creators for matters where they’ll be a better help than me. In short, I do my best to make sure that whatever I’m using the plugin for inside the theme-demo works, but I can’t always verify that 100% of the advertised features of the actual plugin will work 100% of the time.
The Skeleton Post-Grid Page Template
This is one of our favorite parts of this theme! Start by adding a couple blog posts (they can be any category, but they are required to have a Featured Image assigned to each one). You can set other options like a background slider or a custom post highlight color, but all you really need is just a handful of posts.
Once you have at least a couple posts setup, create a new page. On that new page, select the “Post Grid” template from the right sidebar panel. A new options panel will show up on that right sidebar – fill out the options (each one has a list of notes attached) to get it setup the way you want. Click the following thumbnail to see the full options for the post-grid.
The Traditional Blog Page Template
This works exactly like the Post-Grid page template up above – the only difference is that there are far fewer options because you’ll only be using this to display a standard blog-loop. Pick a category (or several), assign the post-count-limit that you want to use, and you’re off and running! Keep in mind that you can set the visibility for each main blog element (the title, date, categories, tags, etc.) from the Appearances > Theme Options panel.