theme documentation

This page is a comprehensive set of documentation on how to use this theme. It’s intended for theme-users, but we’re also making this fully public so you can get a feel for how our theme works before you pick it up. We honestly believe this theme is one of the easiest you’ll ever come across, but don’t just take our word for it, read up!

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. We’ve added our own “MDNW Candy” skin on top, but you can always disable our custom CSS skin from the theme options panel in the event that you don’t like it, or you want to white-label it with your own custom skin.

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, the primary background colors, and a default highlight color from this panel. This is what the admin panel looks like:

The full set of options includes:

3 Header Layouts
8 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
Custom Javascript

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.

Theme Customizer

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:

If you have problems with not seeing the Theme Customizer options, make sure that you have successfully installed the “Styles for WordPress” plugin and the “Styles: Sidewinder Package” that the theme will prompt you to install upon activation.

The Frontpage

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.

For our demo, we used a standard page template using the “blank” layout option (see below for details) so that it displays just one large background slider without any content overlays. You can setup your own custom front-page using the same options that we used, or your own custom design!

The Menus

This theme has three primary menu spaces, and you must setup each from the Appearances > Menus panel. Once you’ve added a few pages, this will likely be your next stop in the theme-setup process. Just visit the Menus manager, create a new menu for each space (you’ll likely want at least 2 or 3), and assign them to the space you want them to show up at. Reference the following two images to see how our demo is setup:

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 chose to only use the “Ultimate Posts” widget (available free in the Plugins > Add New directory). You can choose to use this, or any of your own widgets that you wish.

This theme also comes with a handful of “Bonus Sidebar” spaces that you can use with the Visual Composer “Dynamic Widget Area” module.

The Page & Post Options

Every Page & Post on the theme has a custom set of options that allow you to set things like:

Layout
Page Title & Breadcrumbs Toggles
Background Slider
Page Template Options (right-side panel / for the blog & grid templates)
Custom Posts Highlight Colors

This panel is located underneath the standard “content editor” field on any post or page. If it’s not there for some reason, you can open it up from the Screen Options tab at the top right of the dashboard by checking the box for “Theme Page Options”. Here’s what the Theme Page Options panel looks like for a standard page:

The Background Slider

You can assign a background image slider to each page & post on the theme. Simply turn the “Custom Background Slider” toggle on, then upload your images:

The Revolution Slider (an alternative to the default background slider)

As of version 1.1, Sidewinder now supports the Revolution Slider plugin as an alternative to the default theme background slider. Using it is pretty easy, here’s the short version:

Create the slider. Make sure it’s fullscreen and full width.
Add your slides. Images should be high enough resolution to fill big screens (1920×1080 or bigger).
Copy/paste the shortcode for your slider to the page that you want it shown on.

And here’s the longer version, with screenshots:

Step 01. Create a slider. Open the Revolution Slider panel in the left sidebar of your dashboard, click the “Create New Slider” button, and use the following settings:

Note that we’re forcing the “full-width” option, and the slider is “fullscreen”. Those are the most important options. We also recommend that you open the “Troubleshooting” tab in the right sidebar of that same panel and click the option to include JS in the body of the page (this isn’t required for everyone, but it’s generally a good idea just to be safe):

Step 02: Add your slides. You can do this by clicking the “Add Slides” or “Edit Slides” button. Then just add some slides using whatever images/media that you’d like. The images that the demo is using are 2100×1200. You can theoretically also use HD video, fancy layer compositions from Photoshop, and lots more. Check out the full description & documentation for Revolution Slider here.

Step 03: Copy the slider shortcode to the Page or Post that you want it to display (in the custom field reserved for the background slider). It should look like this:

That’s it!

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.

Visual Composer

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 Features

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.

Charles A. Jones

Personal Portfolio