Getting Started

Alright, let's get to work. First, we need to make sure that you have all the necessary things to install Vogue. You'll need to perform the following steps:

Theme Requirements

First, make sure you have the latest WordPress installation, by checking the update panel within your current WordPress installation. If you don’t have WordPress already, you can download it from the WordPress repository. While Vogue will work with older versions of WordPress, it is recommended to have the latest version of WordPress.

Next, download the theme ZIP file, and save it somewhere handy on your computer, as you will be using the included files for the rest of the installation process. Unzip the downloaded ZIP file onto your computer, but don’t upload the unzipped folder to your WordPress installation just yet.

Theme Files

Vogue includes a variety of files, including the necessary theme files, as well as some other useful files. We'll cover what files are included with a description now:

• Assets
  • Dummy Data— Contains an XML file that you can import into your WP instance to populate your site with dummy data.
  • PSD Files— Vogue includes Photoshop (PSD) source files (only with our Developer license) that make it easy to change or customize more complex elements of your theme. Basic design changes can be done through the options panel, but as a courtesy, the original PSD source files are included as well. Home.psd and Single.psd are the Homepage design and Single Page design respectively, and included layered source files that may be edited in Adobe Photoshop.
  • Pre-Defined Layouts— Contains different .txt files that you can import into your WordPress theme instance to populate your site with different unique styling as shown on Demo site.
• Documentation— The documentation file you are currently reading is included with Vogue and is designed to help you get started quickly and easily.
• License Information— A .txt file that contains the information on Vogue's usage license.
• WordPress Theme Files— Also included are the necessary WordPress theme files, which we will be using for most of the remainder of this document, as a ZIP file that may be extracted as a folder.

Step 1: Upload and Activation

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/5-how-to-install-a-mythemeshop-wordpress-theme/

For installing the Vogue theme in WordPress, you have two options. You may either upload the theme ZIP file using the WordPress theme installer (Recommended), or you can upload the unzipped theme folder via FTP (Advanced).

Method 1: Install Using the WordPress Theme Installer

1. Log into your WordPress site and open the admin dashboard.
2. Navigate to the 'Appearance' tab.
3. Choose the 'Themes' tab.
4. Click 'Install Themes'
5. Select 'Vogue.zip' from within the extracted folder on your computer, and click upload.
6. Wait for it to complete, click Activate once the upload has finished and you're ready for the next steps.

Method 2: Upload and Install Using File Transfer Protocol (FTP)

1. Extract the 'Vogue.zip' file into a folder within the extracted folder on your computer.
2. Either using your FTP client or via your site's FTP panel, upload the extracted folder 'Vogue' to your /wp-content/themes/ directory.
3. Wait for the upload to complete.
4. Now, we're ready to activate Vogue. Back in your WordPress admin panel (yoursite.com/wp-admin/), navigate to Appearance → Themes → Manage Themes. Next, under "Available Themes", click "Activate" for Vogue.

How to Import the Demo Content?

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/14-how-to-add-dummy-content-to-your-website/

Important: You have purchased a WordPress theme, and not the example content as seen in the theme demos). You are more than welcome to import the example content into your site to help you get going, but the images can not be used on a live site, nor redistributed.

Importing Demo Content:

The demo content is located inside Assets → Dummy Data folder. You need to only upload the .xml file in WordPress.

What you need to do is follow the instructions that are taken from the Importing Content page from the WordPress website. To import from a WordPress export file into your blog follow these steps.

How to Use the XML File to Import the Demo Site’s Content

1. Log into your site as an administrator.
2. Make sure you activated your new theme before proceeding.
3. Go to Tools → Import
4. Choose “WordPress” from the list.
5. Upload the demo content dummy_data.xml using the form provided on that page.
6. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
7. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.
8. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus are imported. You will need assign the menu a theme location & you’ll need to configure widgets. This is a limitation of WordPress’ import system.
9. Enjoy!

Importing Pre-defined Layouts:

Video Tutorial

http://community.mythemeshop.com/tutorials/article/22-how-to-import-your-mythemeshop-theme-options-settings/

Where to find the dummy Options Panel settings?

The demo Options Panel settings are located inside Assets → Pre-defined Layouts folder. You need to copy the content from the .txt file(s) in WordPress.

1. Log into your site as an administrator.
2. Make sure you activated your new theme before proceeding.
3. Go to Appearance → Theme Options → Import Export tab in the bottom left
4. Choose “Import Code” from the Import Options.
5. Open the TXT file in your favorite text editor like Notepad, Notepad++ or Sublime.
6. Copy the content inside the TXT file and paste it in the 'Import Code' box in theme's Options Panel.
7. Click on 'Import' button below the pasted code area.
8. Enjoy!

Step 2: Plugin Installation

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/6-how-to-install-a-wordpress-plugin/

Vogue includes nearly everything you'll need already, but there are some plugins that will make life easier and enable additional functionality that we recommend you install now.

To install a plugin, in your WordPress admin panel (yoursite.com/wp-admin/), navigate to Plugins → Add New. You may search for the name of the plugin you wish to install (names of recommended plugins listed below), which will return a list of potential plugins. Click either "Details" to read more about a plugin if you are unsure, or click "Install Now" if you wish to install the plugin. It may ask if you are sure, and you may proceed, at which point the installation with commence. You must then click "Activate Plugin" to make it available for use.

Recommended Plugins:

• MyThemeShop Connect— With this plugin you can install theme updates directly form your WP Dashboard.
• Force Regenerate Thumbnails— If you have existing content, this will help you update your image thumbnails sizes.

Step 3: Thumbnail size

If you already have had content on your site, you will want to regenerate thumbnails. Using the recommended "Regenerate Thumbnails" plugin above,
you can use the plugin to automatically do it for you.
WordPress Dashboard → Tools → Regen. Thumbnails

Navigation Setup

http://community.mythemeshop.com/tutorials/article/13-how-to-create-wordpress-theme-navigation-menu/

WordPress uses easy-to-configure navigation menus that you can set up and control the location of. To get started, navigate to Appearance → Menus in your WordPress admin dashboard.

1. Create a name for your menu.
2. Using the options on the sidebar for pages, categories, etc, check and click "Add to Menu" for the desired navigation items.
3. Drag to reorder and structure your menu in the "Menu Structure" panel.
4. Check the box for "Primary Menu" under "Theme locations".
5. Click "Save Menu" when done.

Menu Locations

Vogue has one menu, the primary menu, which is located at the top of the theme underneath the logo. You must ensure that the checkbox for "Primary Menu" is set for your navigation menu.

Adding Icons to the Navigation

To add icons in the navigation menu, go to Appearance → Menus → Edit any menu link. Then, add the icon class for the icon you wish to add in the CSS classes field. For your reference, we have a list of all icon classes.

If you don't see CSS Classes Option in edit menu, click on Screen Optionswhich is present at top right of the screen, check the CSS classes option.

Theme Options Panel

The Theme Options Panel

Once you have activated the theme, you will see a welcome message, which will show you how to use the theme options panel. The theme options panel will allow you to configure the settings of your theme.

You will find all the instructions for each setting inside the MyThemeShop options panel. Now, have fun configuring your brand new theme, and explore the various options to make your site truly customized.

To access the Theme Options panel, navigate to Appearance→ Theme Options.

Warning: Clicking the ' Reset to Defaults' button will replace your current settings with the default ones. It is advised that you use the Import / Export feature to create a backup before resetting any options.

Import / Export Options for Backup & Restore

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/22-how-to-import-your-mythemeshop-theme-options-settings/

It is highly advised to create backups of your options once you have the theme configured how you want it. It's easy to create a backup.

1. First, navigate to Appearance → Theme Options → Import / Export.
2. Next, to create a backup, click the "Copy" button under Export Options.
3. Copy the text from the text box, save it in a text file on your computer and keep it safe.
4. To restore from backup, click the "Import Code" button, paste in the code that was saved, and click the "Import" button. This will overwrite all existing settings, so use caution and create another backup before proceeding.

Transferring Theme Options

You can also use the backup created above to transfer to another site that is using this theme. You can copy the core for your settings, and duplicate it to another site, which is useful if you have a network of blogs that all need the same settings.

Setting Up Pages

Create a New Page

All pages in the demo are built using a combination of shortcodes and a page template. Take the following steps to create new pages for your site.

1. Navigate to Pages→ Add New.
2. In the Page Attributes section, select one of the Templates from the list (see list of available templates below).
3. Start adding content in the text editor, or use shortcodes to format your pages, which we'll discuss now.

Available Page Templates:

• Default Template— The default template is used to create most of the pages, except homepages, and features a sidebar.
• No Sidebar Template— This page template uses the full width without a sidebar.

Shortcodes

Using Shortcodes

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/11-complete-guide-on-how-to-use-the-mythemeshops-wp-shortcode-plugin/

Your theme comes pre-packaged with a plugin named WP Shortcode by MyThemeShop, allowing you to add styled content to your site with little effort. For your convenience, the available Shortcodes have been included in a one-click menu. Once your install the theme, you will see notification Shortcode plugin installation.

On our demo site, you can find examples of all shortcodes. When creating a page or post, choose the Visual Editor, and click the green "+" icon to reveal the list of shortcodes. Choose the functionality you wish to include, and click "insert". This will insert the necessary code for you.

Shortcode Demo

Adding Icons to Shortcode Buttons

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/29-how-to-add-icons-to-your-shortcode-buttons/

When adding a shortcode button using our shortcode interface in the post editor, it will look like this:

[button-brown url="#" target="_self" position="left"] Brown Button [/button-brown]

To add icons on the button, just add this code before the button Shortcode:

<i class="icon-remove"></i>

The final result will look similar to this:

[button-brown url="#" target="_self" position="left"]<i class="icon-remove"></i> Brown Button [/button-brown]

You can find all available icon names here: http://demo.mythemeshop.com/Vogue/icons/ Note: You must edit above code in HTML view of editor, not the visual interface.

Reference Examples: http://demo.mythemeshop.com/Vogue/shortcodes/

Sidebars & Widget Areas

MyThemeShop offers powerful custom widgets to help you easily add features and functionality to your WordPress theme without having to tinker with any code. Each widget is listed on the widgets page with a description for your convenience. You can enable Footer widget area from Options Panel >> Styling Tab

Adding Widgets:

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/10-how-to-add-widgets-in-a-wordpress-theme/

First, decide what widget you are looking to add, and where you want it to appear on your site. There are several placements available:

• Home Sidebar: Appears in homepage sidebar.
• Sidebar: Appears in single posts and page sidebar.
• Shop Sidebar: Appears in catalog page (yoursite.com/shop/).
• Single Product Sidebar: Appears in single product pages.
• Footer: Appears in footer.

To add the custom widget in your theme, navigate to Appearance → Widgets, and drag the desired widget to the right side for the desired widget space. There is a description of each included widget that you can choose from.

Translating Your Theme

Video Tutorial:

http://community.mythemeshop.com/tutorials/article/27-translate-your-mythemeshop-theme-using-in-built-translation-panel/

MyThemeShop offers Exclusive Translation panel, so you don't need to edit .po file directly, you can easily have your themes translated into additional languages. To translate your theme, perform the following steps:

1. Got To Theme Options Panel >> Translation Tab
2. Tick the 'Enable translation' option.
3. Now you can see all english words in Translation tab with option to use user own words in your own language.

Tip: You can use translation option even if you just want to replace any word in english.