“Click Mag” Documentation by “MVP Themes” v3.0.0

“Click Mag”

Created: October 5, 2016
By: MVP Themes
Support: Support Center

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to visit the MVP Themes Support Center here. Thanks so much!

Table of Contents

Disclaimer - top

Although support is not required of ThemeForest authors, I do offer support for the theme and its core features and functionality. I cannot guarantee that this theme will function with all third-party components and plugins. Click Mag Theme is presented as is.

Installation/Homepage Setup - top

  1. Make sure that you have the latest version of Wordpress installed.
  2. You can upload Click Mag to Wordpress in one of two different ways:
    • Extract the click-mag.zip and upload the extracted click-mag folder to the /wp-content/themes/ directory on your FTP server.
    • OR go to Appearance > Themes and click on the Add New link at the top. Then click Upload Theme and click Choose File, then select clickmag.zip and click Install Now.
  3. After you upload the theme, activate it by going to Appearance > Themes and place your mouse over Click Mag and click the Activate button underneath.

After installing the theme, you can do one of two things: 1) Import the demo data, or 2) follow the instructions to set up the theme with the existing posts/data you have on your site.

Importing the Demo Data

  1. When you activate the theme, you will see a notification at the top of your WordPress Dashboard prompting you to install plugins that are included with the theme. Click the Begin installing plugins link within the notification.
  2. Click the check box next to the MVP Themes Social Fields and One Click Demo Import plugins, as well as any of the other plugins you plan to use, then within the Bulk Actions dropdown menu, select Install, then click the Apply button. Your plugins should now be installed and activated.
  3. Go to Appearance > Import Demo Data and click the Import Demo Data button.

NOTE: The XML data does not come with the images from the demo, which are not licensed to be included in the theme file.

Setting up the theme with your existing posts/data

  1. When you activate the theme, you will see a notification at the top of your WordPress Dashboard prompting you to install plugins that are included with the theme. Click the Begin installing plugins link within the notification.
  2. Click the check box next to the MVP Themes Social Fields as well as any of the other plugins you plan to use, then within the Bulk Actions dropdown menu, select Install, then click the Apply button. Your plugins should now be installed and activated.
  3. Go to Pages > Add New. Enter Home as the title and in the Page Attributes section, select Home from the Templates dropdown menu on the right. Click Publish.
  4. Go to Settings > Reading and select the A static page radio button and in the Front Page: dropdown menu, select Home. Click Save Changes.
  5. To set up the Featured Posts section of your homepage, go to Click Mag Options > Homepage Settings and select a Featured Posts Layout, and assign a Featured Posts Tag Slug that is associated with the Tag you want to use for your Featured Posts. Posts with this Tag will be displayed in the Featured Posts at the top of the homepage. You can find the slug for the Tag you want to use by going to Posts > Tags and then find the Tag you want to use for the Featured Posts section and find the slug for that Tag in the Slug column. To find more information on how to find the Tag Slug, click here.
  6. To set up the Widgets on your homepage, you can go to Appearance > Widgets and add any widgets to the Homepage Widget Area. You can view the widget layout from the demo in the Widgets section of this documentation as well as more information about how to utilize the other widgetized areas.
  7. To set up your menus, please refer to the Custom Menus section of this documentation.

Updating the Theme - top

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 two ways:

  1. 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 Click Mag 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.
  2. OR you can upload the new /click-mag folder (located in the click-mag.zip file) via FTP and overwrite the old files.

NOTE: Updating the theme will overwrite any changes you made to any of the core files (index.php, style.css, header.php, etc), however, you will not lose any changes you made to the Theme Options, menus, widgets, etc.

Also, make sure to go to your Theme Options and click "Save all changes" after each time you update the theme to make sure any new options are generated properly.

Theme Options - top

Click Mag comes with custom Theme Options to allow you to set up many of the theme features without touching the code. To edit the Theme Options, go to Appearance > Click Mag Options.

Theme Options
  1. General - Here, you will be able to select your "skin" for the theme, upload your custom logo to replace the default logo, upload a custom favicon, enter any custom CSS you need, as well as toggle the responsiveness of the theme, and the Infinite Scrolls feature. NOTE: Please click "Save All Changes" in the General Settings section once before you begin in order to register the default theme settings.
    • Logo Location - Set the location of your logo to "Small", which will only be displayed in the navigation. Or "Large" where you can
    • Logo - If you are using the Large logo layout, select a file to appear as your logo that will appear above the navigation and will replace the default "Click Mag" logo. There are no maximum recommended dimensions for this logo size.
    • Logo in Navigation - Select a file that will appear in your navigation. The recommended maximum dimensions for this logo are 250x60.
    • Logo in Navigation Width - If you are utilizing the Google AMP feature, you will need to enter the width of your navigation logo file here. Default is 250.
    • Logo in Navigation Height - If you are utilizing the Google AMP feature, you will need to enter the height of your navigation logo file here. Default is 60.
    • Custom Favicon - Upload a 16px x 16px PNG or GIF file to serve as your favicon.
    • Custom CSS - Here you can enter any custom CSS code for the theme, which will overwrite any other CSS code. You will not lose any of the custom CSS in this field when you upgrade the theme to a newer version.
    • Toggle Responsiveness - Uncheck this box if you would like to remove responsive feature of the site that alters the site based on the device it is being viewed on. By disabling this, visitors will see the desktop version of the site no matter what device they are viewing.
    • Toggle Infinite Scroll - Uncheck this box if you would like to remove the Infinite Scroll feature.
  2. Colors - Here, you can select which colors you would like to use for your site.
    • Primary Theme Color - Select or enter a hexidecimal code for the primary color of the site.
    • Top Navigation Background Color - Select or enter a hexidecimal code for the background color of the nop navigation bar.
    • Top Navigation Text Color - Select or enter a hexidecimal code for the background color of the dropdown menus.
    • Top Navigation Text Hover Color - Select or enter a hexidecimal code for the text color when you mouse over the top navigation.
    • Main Headlines Link Color - Select or enter a hexidecimal code for the link color of the headlines that appear throughout the site.
    • Primary Link Color - Select or enter a hexidecimal code for the primary link color for the site. This will only affect unstyled links.
    • Link Hover Color - Select or enter a hexidecimal code for the color of links when you hover your mouse over.
  3. Fonts - Here, you can select from over 700 Google Fonts to set the various fonts for your site. You can browse the list of Google Fonts here. You can also enter standard web fonts like Arial and Georgia as well.
    • General Content Font - Enter the font name for the general font for the content on all pages.
    • Fly-Out Menu/Top Navigation Font - Enter the font name for the fly-out and top navigation menus.
    • Featured Posts/Article Headline Font - Enter the font name the font for the headlines in the Featured Posts section and the Article title on posts and pages.
    • General Headline Font - Enter the font name the font for the general headlines around the site.
    • General Heading Font - Enter the font name the font for the general headings that appear at the top of the different sections around the site.
  4. Homepage Settings - This is where you will be able to configure the various homepage settings, including the Featured Posts section.
    • Show Featured Posts? - Uncheck this box if you would like to remove the Featured Posts section from the homepage.
    • Featured Posts Layout - Select between 3 different layouts for your Featured Posts section on the homepage.
    • Featured Posts Tag Slug - Enter the Tag Slug of the Tag you want associated with the Featured Posts section. Posts with this Tag will be displayed in the Featured Slider at the top of the homepage. You can find the slug for the Tag you want to use by going to Posts > Tags and then find the Tag you want to use for the Featured Posts section and find the slug for that Tag in the Slug column. To find more information on how to find the Tag Slug, click here.
    • Homepage Blog Layout - Select the layout between "Row" and "Column" for the blog section of the homepage.
    • Number of Posts Per Page - Set the number of posts per page that you want displayed on the Homepage Blog and the Latest News Template.
  5. Popular Posts Settings - Here you can change the settings for the Popular Posts column on the homepage, if you are utliizing that feature.
    • Number of Popular Posts - Set the number of posts to display in the Popular Posts sidebar.
    • Popular Posts Days - Number of days to use for Popular Posts. Only posts published within this length of time will be displayed in the Popular Posts column.
  6. Article Settings - Here you can toggle the display of featured images, social sharing buttons, author info, and the previous/next story section on all posts.
    • Default Post Template - Select the default Post Template layout for your articles. This feature will only affect future posts and not posts published before the theme was installed.
    • Show Featured Image In Posts? - Uncheck this box if you would like to remove the featured image from automatically displaying in all posts.
    • Show Social Sharing Buttons? - Uncheck this box if you would like to remove the social sharing buttons from all posts.
    • Show Author Info? - Uncheck this box if you would like to remove the author info from the top of all posts.
    • Show Author Email? - Uncheck this box if you would like to remove the author email link from within the author info box.
    • Show Related Posts? - Uncheck this box if you would like to remove the Related Posts from the bottom of all posts.
    • Show More Posts? - Uncheck this box if you would like to remove the More Posts from the bottom of the posts.
    • Show Previous/Next Post Links - Uncheck this box if you would like to remove the links to the previous/next posts that appear in the left/right margins of larger resolution screens.
    • Use Continue Reading Button On Mobile? - Uncheck this box if you would like to remove the Continue Reading button feature on mobile devices. This feature will temporarily shorten the article height and force the visitor to click a "Continue Reading" button in order to view the rest of the article.
    • Disqus Forum Shortname - If you want to use Disqus as your commenting system, you do not need to install the Disqus plugin. All you need to do is enter your Disqus Forum Shortname in order to activate Disqus on your site. This is the unique identifier for your website in Disqus (i.e. yourforumshortname.disqus.com). Only enter the Shortname and not the full URL.
    • Article Ad Code - Enter your ad code (Eg. Google Adsense) for the 300x250 ad area within the body of the article. The ad space can accommodate an ad of any height, but with only a maximum width of 300px.
  7. Google AMP Settings - Here, you can configure your Google AMP Settings.
    • Enable Google AMP on mobile devices - Check this box if you would like to enable the Google AMP compatibility with the theme. You will also need to install and activate the AMP plugin that comes with the theme.
    • Facebook App ID - In order to utilize the Google AMP Facebook share button, you must provide a valid Facebook App ID.
  8. Category Pages - Here, you can configure the layout of your category pages.
    • Show Featured Posts? - Uncheck this box if you would like to remove the Featured Posts section from the top of your category pages.
    • Featured Posts Layout - Select the layout of your Featured Posts section on the category pages.
    • Archive Blog Layout - Select the layout between "Row" and "Column" for the blog section of your category and archive pages.
  9. Social Media - Here you can enter URLs for several popular social media sites to activate links to each page that will appear in a floating box on the right of the browser window. Simply enter the URL and the link will appear automatically!
  10. Ad Management - Enter ad code for the optional leaderboard banner areas and/or a wallpaper ad.
    • Header Leaderboard Ad Code - Enter your ad code for the 970x90 leaderboard ad area that will appear at the top of the site. You can also place a 728x90 ad in this area.
    • Footer Leaderboard Ad Code - Enter your ad code (Eg. Google Adsense) for the 970x90 ad area just above the footer. You can also place a 728x90 ad in this spot.
    • Wallpaper Ad Image URL - Enter the URL for the wallpaper image (i.e. http://www.xyzdomain.com/xyz-wallpaper.jpg). Please do not insert the actual ad code for the wallpaper ad, just the image URL. The recommended width of the wallpaper ad is a minimum of 1400px. The recommended height is a minimum of 600px. NOTE: Due to the nature of wallpaper ads, the content of the site will sit on top of the ad and cover up the middle 1200px of the ad. The only visible area will the the left and right margins of the image which is why the ad should be wider than 1200px.
    • Wallpaper Ad Click-Through URL - Enter the URL that users will be taken to if they click on the Wallpaper Ad.
  11. Footer Options - Enter your information for the Footer Info Box.
    • Copyright Text - Here you can enter any text you want (eg. copyright text).

Click Mag supports three custom menu sections: a Main Menu for the top navigation bar that will only be visible on desktop devices, a Fly-Out Menu that will slide out from the right and will be used on all devices, and a Footer Menu that will appear at the very bottom of your site.

To set up the menus, go to Appearance > Menus. Here, you can create a new menu by clicking the create a new menu link, give the menu a name, and click Save Menu button. You will then see a Manage Locations tab appear at the top of the screen. Click the Manage Locations tab and then select your newly created menu from the dropdown list of the menu location you would like to set up and click Save Changes. You are now able to create a custom link, page or category and add it to your new menu by clicking the Add to Menu button.

If you would like to add a "Home" button, you can do so by adding a "Custom Links" menu item. Enter the URL of your site as the URL and "Home" as the Link Text.

For more information on how to use the Wordpress custom menu feature, click here.

To utilize the "Megamenu" feature for Category menu items (the Megamenu feature will only work for Categories), do the following:

  1. Go to Appearance > Menus and click the Screen Options button at the top right corner of your screen.
  2. Make sure the CSS Classes checkbox is checked, then click the Screen Options button again to close the Screen Options.
  3. In the Menu Structure box, select the Categroy menu item you would like to add a Megamenu to by clicking on the down arrow on the right of the menu item.
  4. Type mvp-mega-dropdown in the CSS Classes (optional) box
  5. Click Save Menu
Menus

Widgets - top

Click Mag comes with 7 custom widgets for use in 4 different widget areas: Homepage Sidebar Widget Area, Default Sidebar Widget Area, Post/Page Sidebar Widget Area, and the WooCommerce Sidebar Widget area if you are using the WooCommerce plugin. To activate the widgets, go to Appearance > Widgets and click and drag a widget from the Available Widgets section and drop it into any of the 4 different custom widget areas.

Widget Areas:

Available Widgets:

Images - top

Click Mag supports retina-ready images. To utilize this feature, follow these instructions:

  1. Create a second image that is twice the size of your existing image. For example, if your logo is 250x60, your retina image would need to be 500x120.
  2. Add @2x to the end of the name of the retina image. For example, if your logo is called logo.png, name your retina version [email protected].
  3. Upload the retina image in the same directory as your non-retina image. For example, if your logo is located in /wp-content/themes/click-mag/images/, you must upload the retina image in this directory.
  4. That's it!

Click Mag utilizes Wordpress' built-in Featured Image feature to handle image management. The recommended size for images to show properly within posts and in the Featured Posts area on the homapage and category pages is 1000x600px. If you plan to use the Full-Width Featured Posts option or the Full-Width Article image options, the recommend Featured Image dimensions are 1600x960px.

To set the featured image for a post, go to Posts > Add New (or edit an existing post) and click the Upload/Insert icon above the main text box. From here, choose a file and upload it. Once it is uploaded, click Use as featured image located near the bottom of the Add Media window. Then click Save all changes, close the Add Media window and you're good to go! Click Mag will take care of the rest in generating the smaller thumbnails that show up in the various places around the site.

Background - top

Click Mag utilizes Wordpress' built-in Custom Backgrounds feature to set up your custom background color and/or image. For more information on how to set up your custom background, click here.

Post Options - top

Click Mag gives you a variety of custom options for your posts, inlcuding a custom Image Gallery, a Featured Headline feature, and the ability to set a full-width posts.

Page Templates - top

Click Mag comes with 4 custom page templates: Home, Authors List, Latest News, Full-Width. In order to create a custom page template

  1. Go to Pages > Add New. Enter a title in the Enter a title here box.
  2. In thePage Attributes section, select the page template you want to use from the Templates dropdown menu on the right.
  3. Click Publish and that's it!

Reviewer Plugin - top

Click Mag comes with the Reviewer WordPress Plugin that allows you to insert reviews and comparison tables inside your WordPress blog posts and pages in a quick and easy way. Here are the instructions to install and set up Reviewer Plugin for Click Mag

  1. Go to Plugins > Add New then click the Upload link at the top.
  2. Click Choose File and select the reviewer.zip file (located in the /plugins folder of your original zip file you downloaded from Themeforest), then click Install Now.
  3. After the plugin installs, click the Activate Plugin link.
  4. Once you activate the plugin you will be prompted to verify the license. You will need to enter MVPThemes (case sensitive) for the Username and 8531e88e-5fcb-4a59-a6a3-72bc6c11b74f for the Purchase Code.

If you run into any technical issues with the plugin, please submit a ticket at the Support Center and I will get in touch with the plugin developer. But, for help in setting up the plugin and any general questions about the plugin, please refer to the plugin's documentation, by clicking here

Theia Post Slider - top

Click Mag utilizes Theia Post Slider to give you dynamic slideshows in your posts and pages. Here are the instructions to install and set up Theia Post Slider for Click Mag:

  1. Go to Plugins > Add New then click the Upload link at the top.
  2. Click Choose File and select the theia-post-slider.zip file (located in the /plugins folder of your original zip file you downloaded from Themeforest), then click Install Now.
  3. After the plugin installs, click the Activate Plugin link.
  4. To activate the plugin, go to Settings > Theia Post Slider and in the Purchase Code box, enter 781c0201-1ebc-4d23-a986-cd844ad28b9b as the purchase code and click Save.
Theia Post Slider uses Wordpress' built-in "Page Break" feature to split up each slide in the slideshow. Simply click the "insert page break" shortcode button or manually insert <!--nextpage--> to insert a page break, which will split your post into different pages/slides.

To customize Theia Post Slider to your liking, you can edit the slider settings by going to Settings > Theia Post Slider. Click here for the full documentation for Theia Post Slider.

Click Mag utilizes Theia Sticky sidebar to allow sidebar content to stay stay visible within each section as you scroll down the page. Here are the instructions to install and set up Theia Sticky Sidebar for Click Mag:

  1. Go to Plugins > Add New then click the Upload link at the top.
  2. Click Choose File and select the theia-sticky-sidebar.zip file (located in the /plugins folder of your original zip file you downloaded from Themeforest), then click Install Now.
  3. After the plugin installs, click the Activate Plugin link.

To customize Theia Sticky Sidebar to your liking, you can edit the slider settings by going to Settings > Theia Sticky Sidebar. Click here for the full documentation for Theia Sticky Sidebar.

Once you are in the Theia Sticky Sidebar Settings (Settings > Theia Post Slider), you will need to go to the General tab and enter the following into the Sidebar CSS Selector box: #mvp-side-wrap, #mvp-post-info-col

Then, in the Sidebar additional top margin (px) box, you will need to enter a value of 90, and in the Minimum width (px) box, enter 767. That's it! Your sidebars should now be sticky throughout your site!

Author Info - top

Click Mag allows you to display information about the author on each post. You can enter/edit this information by going to Users > All Users and editing any of your existing users.

Author Info

Translation Files - top

Click Mag comes translation-ready with .po/.mo files ready for translation. These files are located in the /languages folder of the main theme folder. Once you have translated the files, simply save them with the name of your language code (i.e. es_ES.po and es_ES.mo for Spanish) and place them back in the /languages folder.

For more information on how to utilize these files to translate this theme into another language, click here.

WooCommerce - top

Click Mag is fully compatible with the popular e-commerce plugin WooCommerce, which will allow you to create a store within your site. You can download WooCommerce here. Once you have downloaded the plugin, follow these instructions to install the plugin with Wordpress:

  1. Go to Plugins > Add New
  2. Select the Upload link at the top.
  3. Click Choose File and select the woocommerce.zip file that you downloaded, then click Install Now.

Once the plugin is activated, WooCommerce will need to install several pages in order for it to function properly. Click here for more information about setting up WooCommerce.

bbPress - top

Click Mag is fully compatible with the popular forum plugin bbPress, which will allow you to add a forum to your site. You can download bbPress here. Once you have downloaded the plugin, follow these instructions to install the plugin with Wordpress:

  1. Go to Plugins > Add New
  2. Select the Upload link at the top.
  3. Click Choose File and select the bbpress.xxx.zip file that you downloaded, then click Install Now.

Click here for more information about setting up bbPress.

CSS Files - top

Javascript Files - top

Support - top

If you have any questions related to setting up the theme that are not covered in this documentation or if you encounter any technical bugs, please submit a ticket at the MVP Themes Support Center. Please note that this theme is sold "as-is" and any additional custom modifications you would like to make to the theme are your responsibility.

Sources and Credits - top

I have used the following images or other files as listed.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

MVP Themes

Go To Table of Contents