Divogue Documentation

Thank you for purchasing this theme :)
This document covers the basic installation and use of this theme. If you have any questions that are beyond the scope of this help file, please feel free to ask your question at Webylabs Support Forum.

follow-support

Theme Installation

Top
  1. If you have not already set up your WordPress installation yet, most hosting providers offer one-click WordPress installation. Otherwise, for a manual installation you can grab a copy of latest WordPress version here. Next, go through the installation instructions inside readme.html file and set up your WordPress installation.
  2. Next, you’ll need to upload the theme files to your server.
    First, unzip the downloaded zip file you have purchased onto your computer. Then follow either of these 2 methods:

    • The theme files can be uploaded using any FTP program. Your unzipped folder contains a [FTP] folder. Upload the ‘Divogue‘ theme folder inside this [FTP] folder to your server at the following location: /wp-content/themes/
    • OR
    • Your unzipped folder also contains a [WP] folder. This contains the ‘Divogue.zip’ file. You can upload this file via your WordPress admin backend by going to WP-Menu > Appearance > Themes > (tab: Install Theme) > (tab: Upload).
  3. Once you have uploaded the theme, activate the theme via admin backend by going to WP-Menu > Appearance > Themes.

Troubleshooting: Make sure to upload the correct files otherwise you’ll get ‘Broken Theme’ or ‘Stylesheet Missing’ errors. If you are new to WordPress and have problems installing it you might want to check out the video at this link: Solving broken theme issues.

Updating Your Theme

Top

It is always advisable to use the latest theme version. When a new update is available, simply backup and delete the theme folder in /wp-content/themes/ on your server, and upload the new theme folder. None of your theme settings will be lost as all our themes are backward compatible.

Troubleshooting: Sometimes when you update an active theme’s files, you may not see ‘Page Templates’ in the Edit-Page screen. Its a thing that WordPress does sometimes. To solve this, simply *bump* your theme by going to WP-Menu > Appearance > Themes, activating any other theme, and then re-activating Webylabs theme.

1-Click Demo Content Import

Top

If you are new to WordPress and not sure where to start, then you might want to look into the ‘1-Click Demo Content Import’ feature. It will setup your WordPress site to almost identical of the theme’s demo site.

This task will
» import demo posts, pages, sliders, galleries
» contact forms(if Contact Form 7 plugin is active)
» forum and community content (if BuddyPress and bbPress plugins are active)
» It will RESET / OVERRIDE settings for Divogue‘s Admin Panel & all of Divogue‘s Layouts.

You can access 1-click import via your WordPress admin backend by going to WP-Menu > Divogue > Admin Tasks > tab:General

Note: Due to certain WordPress limitations, the widgets and menu items aren’t imported. This is why we suggest that once you finish 1-click import, you goto WP-Menu > Appearance > Widgets and add some widgets to the widget areas created by the import process.
Similarly, goto WP-Menu > Appearance > Menus and adding some menu items to the main menu.
Note: This task wont delete any of your existing site posts. However, we recommend you import dummy data on a test/empty installation to keep it separate from your production site content.

Setting up the Site

Top

Most settings in this theme are pretty straight forward. You can jump right into it by going to WP-Menu > Divogue > Admin Panel in the WP Admin Backend, and exploring and configuring the theme settings.

However if you are not familiar with WordPress, you can continue reading this documentation as a reference work as it will help you get acquainted with some ins and outs of WordPress and this theme.

Colors and Background Control

Top

Colors and Styling

Divogue intelligently applies colors to various sections once you setup your color scheme in the WordPress admin backend via WP-Menu > Divogue > Admin Panel > tab:General Styling.

Backgrounds

Divogue comes with complete background management. You can select backgrounds for the entire site, as well as the Header and Footer areas. ss-backgrounds

  • Header background can be selected via WP-Menu > Divogue > Admin Panel > tab:Header
  • Footer background can be selected via WP-Menu > Divogue > Admin Panel > tab:Footer
  • Select site and Content area background via WP-Menu > Divogue > Layout: Default > tab:Structure & Backgrounds
Advance users can specify different site and content area backgrounds for different layouts. See the Layouts section to know how the Layout Management works in Divogue

Selecting Google Web Fonts

Top

You can use any of the 600+ Google Fonts in your website body copy or Headings.

  1. Goto WP Admin Backend WP-Menu > Divogue > Admin Panel > (tab: Fonts/Text).
  2. Select Google Web Fonts Option in the select box. Extra options will now show.
  3. Goto Google Web Fonts Directory, select your font and copy-paste the ‘Standard Embed Code’ and ‘Font CSS’ for the font you want to use and Save your settings.

Finding the Embed Code and Font CSS

  1. Goto Google Web Fonts Directory.
  2. Click ‘Quick Use’ on font you like ss-google-font-1
  3. Scroll down and copy-paste the embed-code and the CSS into your admin panel ss-google-font-2

Setup Home, Blog and Archives

Top

Home page, Blog page, and Archives pages form the starting points for any site. Here is how you can set them up in various ways to suit your requirements.

Default Homepage

The default homepage can be set using the Hompage layout. In the WordPress admin backend, goto WP-Menu > Divogue > Layout: Homepage > tab:Layout Modules and start creating your homepage layout by adding modules.

In a Homepage Layout, the ‘Default Content’ module will add the blog posts list as one would normally expect in a traditional blog scenario.

Blog Page

In modern sites, most users like to reserve homepage for content and create a separate blog page. To do this, goto WP-Menu > Pages > Add New. Select Blog Page in the ‘Templates’ dropdown. This page will now show the blog posts list. Any page content that you enter in the editor will be shown as a small description right below the Page Title in the frontend.

In the Page Options box, select [Override] – Use Full Width Template to turn this blog page into a full width page (without sidebars)

Archive Page Styling

You can select the design of Archive Pages (Categories Page, Tag Pages, Blog Pages) via the WP-Menu > Divogue > Admin Panel > tab:Pages

Shortcodes

Top

The convenient Shortcode Generator is built right into your Edit Screen for easy access. Lets see an example where we add a Map shortcode to the Contact Page.

  1. Shortcode Generator can be accessed via the button with a Magic Wand in your Visual-Editor.
  2. Click the Shortcode you want to insert. In this case, lets insert a map. ss-shortcode-generator
  3. The Shortcode Generator appears in a lightbox. Fill in the options you want (There will be helpful hints to help you)
  4. You can optionally ‘Preview’ the code to manually modify it if you want.
  5. Click the big ‘Insert’ button and the Shortcode will be inserted into your text-eitor.
Tip: For some shortcodes like Buttons, Boxes, Columns etc. it can be quite convenient to first select the text in your editor and then click the shortcode generator. This will pre-fill the ‘Content’ box with the text you had selected.

Recommended Plugin Settings

Top

Most of the available plugins can be used straight out of the box. However, we recommend a few plugin settings for optimal performance.

[Plugins] WP Super Cache

Top

This is an amazing plugin which can really speed up your site. While most settings work perfectly, you will need to make a small adjustment to maintain compatibility between this plugin and Divogue

* This is a Required Step
We would like to tell Super-Cache plugin to NOT TO cache the dynamic CSS created by our theme. To do this, goto WP-Menu > Tools > WP Super Cache > Tab:Advanced. Scroll down to the area where it says: Add here strings (not a filename) that forces a page not to be cached. Add the string custom_css and click ‘Save strings’ ss-super-cache

[Plugins] Really simple Facebook and Twitter share buttons

Top

Some users saw some jumbled up screen when they installed this plugin. This is a plugin issue and the plugin author has been notified. Meanwhile, it is a simple setup error which can be very easily resolved by simply clicking the ‘Restore to Default Values’ button at the bottom of the plugin’s settings page.

This step is required only once when the plugin is installed for the very first time.ss-really-simple-share

[Plugins] WP Retina 2x

Top

This plugin offers various methods to make your site retina ready. These methods depend on your server configuration, and have very little to do with the theme itself. We have found that the Retina.js method is the widely used and most compatible method. You can set it in your WordPress Admin Backend by going to WP-Menu > Settings > WP Retina 2x > tab:Advanced

[Plugins] Related Posts (YARPP)

Top

You can use the default templates which come pre-packed with the plugin. However, Divogue comes with an additional YARPP template which is responsive and fits much more nicely into the theme design. To set it, goto WP-Menu > Settings > Related Posts (YARPP), uncheck the ‘automatically display options. Then select the <? php option and select the yarpp-template-pw.php from the dropdown. ss-yarpp

[Plugins] WooCommerce

Top

WooCommerce creates its own images for displaying. These are the image sizes we strongly recommend for best compatibility with Divogue‘s design:

Catalog Images : 220 x 220
Single Product Image : 365 x 365
Product Thumbnails : 115 x 115

ss-woocommerce
In case you have already uploaded images for WooCommerce products, we recommend you set these new sizes, and then run the Regenerate Thumbnails plugin once to automatically regenerate these new sizes.

[Plugins] Contact Form 7

Top

Here are a few Sample Contact Form Templates as used on the demo site. You can use the default template, or create your own.

Simple Contact Us

<h3>Write To Us</h3>
[ text* your-name 37/] <span class="inputlabel">Name</span>

[email* your-email 37/] <span class="inputlabel">Email</span>

[ text your-subject 37/] <span class="inputlabel">Subject</span>

[textarea your-message 57x6]

[quiz quiz-836 3/3 "5+5=?|10" "10+10=?|20" "2+3=?|5" "1+1=?|2"]

[submit "Send"]

 

Contact Us Page

<h5>Send Us a Message</h5>
<span class="inputlabel">Name:</span> [ text* your-name 27/]

<span class="inputlabel">Email:</span> [email* your-email 27/]

<span class="inputlabel">Message:</span> [textarea your-message 47x3]

<span class="inputlabel">Human, eh?</span>
[quiz quiz-836 3/3 "5+5=?|10" "10+10=?|20" "2+3=?|5" "1+1=?|2"]

[submit "Send"]

 

Under Construction Page

Your Name (required)<br />
[ text* your-name]

Your Email (required)<br />
[email* your-email]

<p>[submit "Send"]</p>

Layouts & Sidebars (Tutorial - Custom 404 Page)

Top

Divogue comes with the ability to create and apply unlimited layouts and sidebars. Here is a small tutorial to walk you through the process and get you acquainted with layouts.

First, lets get an idea of what we are trying to acheive.

  1. A blank page with no header and footer
  2. No Content Area Background so we have only complete White Site Background
  3. Big ‘404’ text with a search field
  4. 3 more widget areas at bottom ss-404

Create Custom Widget Areas (Sidebars)

Top

For our custom 404 page, we need 4 widget areas – One for the search and 3 more below it.

You can create new widget areas in the WP admin backend by going to WP-Menu > Divogue > Layouts & Sidebars > tab: Widget Areas Manager. Click the ‘Add New Sidebar’ button 4 times to create 4 new Widget Areas. Give them names, and Save.

These Widget Areas will now appear in WordPress’s ‘Widgets’ screen where you can add widgets to them WP-Menu > Appearance > Widgets

ss-sidebar-404

Applying Custom Sidebars (not required for this tutorial)

Even though we do not require it for our tutorial, lets see how we can create Widget Areas to be used as custom Sidebars for different locations of this site.

  1. You can assign them as sidebars on the Edit Page / Edit Post screen by going to WP-Menu > Posts > Add New ss-page-sidebar-layout
  2. For Advance Users, you can go to WP-Menu > Divogue > Layouts & Sidebars > tab: Help and check the ‘Enable advance Layout and Sidebar Selections’ option and Save. The Widget Area Manager tab will now show extra options to assign the custom widget areas as Sidebars.ss-sidebar-manager

Create Custom Layout

Top

For our custom 404 page, we need a new layout which looks different from our main site.

You can create new layout in the WP admin backend by going to WP-Menu > Divogue > Layouts & Sidebars > tab: Layout Manager. Click the ‘Add New Layout’ button. Give it a name ‘Blank Page‘, and Save.

This new layout will now appear in WordPress’s left menu. Goto WP-Menu > Divogue > Layout: Blank Page.
– Make sure you add the ‘Default Content’ module in this layout in tab: Layout Modules.
– Then goto tab: Structures & Backgrounds.
– Select ‘Use custom settings for this layout’.
– Click ‘Edit Site Background’ and apply a Color Background. Set color to white #ffffff
– Click ‘Edit Box (content area) Background’ and set it to ‘None’

Applying Custom Layout

Next, lets see how we can apply custom Layouts to different locations of our site.

  1. You can assign them to Posts/Pages on the Edit Page / Edit Post screen by going to WP-Menu > Posts > Add New ss-page-sidebar-layout
  2. For Advance Users, you can go to WP-Menu > Divogue > Layouts & Sidebars > tab: Help and check the ‘Enable advance Layout and Sidebar Selections’ option and Save. The Layouts Manager tab will now show extra options to assign the custom layouts to different sections of the site.

Bringing It All Together - Create a Custom 404 Page

Top

Finally, lets create the 404 page.

  1. Create a new Page by going to WP-Menu > Pages > Add New
  2. Give it a title “Oops! You are looking for something that isn’t here”
  3. Add Text to come at the top. Use the ‘Font’ shortcode to stylize this text
    [font family="'Dosis', sans-serif" color='#000000' style="bold" size="225" lineheight="125"] 404 [/font]
    
    [font family="'Dosis', sans-serif" size="75" lineheight="75"]PAGE NOT FOUND[/font]
    
    [font family="'Dosis', sans-serif" size="25" lineheight="25"]This custom 404 page has been created using a Custom Layout and a 'Blank page' template.[/font]
  4. Next, add the search widget (this is one of the 4 widget areas we created in the previous step)
    It seems we can't find what you are looking for. Maybe searching will help…
    [widget_area id="404 page Area 1"]

    Make sure you have added the search widget in this widget area via the WordPress’s ‘Widgets’ screen WP-Menu > Appearance > Widgets

  5. Now add the 3 remaining widget areas in 3 columns created using shortcodes
    [ one_third][widget_area id="404 page Area 2"][/ one_third]
    [ one_third][widget_area id="404 page Area 3"][/ one_third]
    [ one_third_last][widget_area id="404 page Area 4"][/ one_third_last]
  6. Now apply the White background layout we created in previous step (called ‘Blank Page’) to this page by selecting the layout in the ‘Select Layout for this page’ dropdown option below the Editor.
  7. Lastly, apply Divogue‘s ‘Blank Page’ Page template. This template does not display the theme header/footer and only displays the content. Publish this page. ss-page-404
  8. Finally, lets tell our theme to use this page as the 404 page. Goto WP-Menu > Divogue > Admin Panel > tab:Pages. Under ‘404 Page’ option, select our new “Oops! You are looking for something that isn’t here” page, and Save

White Label

Top

If you are developing sites for your clients, you might want to remove all Webylabs branding from the backend. To do this, open the Divogue/config/config.php file and find

define( 'WF_WHITELABEL', 'false' );

Change the false value to true. Like So:

define( 'WF_WHITELABEL', 'true' );

This will remove all Webylabs branding and notifications from the backend.

Contact & Support

Top
Once again, thank you for purchasing this theme :)
This document covered the basic installation and use of this theme. If you have any questions that are beyond the scope of this help file, please feel free to ask your question at Webylabs Support Forum, and I’ll do my best to assist.

follow-support