The Blog - Wordpress Theme Solution for Blogging

The Documentation

For support please checkout CACTUSTHEMES SUPPORT FORUM

THE BLOG - WORDPRESS THEME SOLUTION FOR BLOGGING

Welcome to The Blog!

Thanks for Buying

First of all, thank you for buying our theme. We are a team of developers making awesome WordPress Theme - The Blog - A blogging theme with lots of useful, unique and awesome features especially for daily or hobby bloggers who love to share their stuff, whether it’s about life, fashion, travel, or just a simple personal blog. Featuring a clean, elegant and typography focused design, The Blog is guaranteed to bring a satisfying reading experience to your readers. It’s highly customizable so it can match your personal taste and be quickly converted into a multi-purpose theme as well. Both experienced developers and users with no programming background can customize this theme with minimal effort. To make your experience pleasant, we have added as much information as needed in this documentation.So, you should be able to find answers to all problems regarding using the theme.

Created By: CactusThemes

Support Site: http://ticket.cactusthemes.com

Version: 1.0

THE BLOG LAYOUT

MAIN LAYOUT

There are 2 Main Layouts with many variations, including:
  1. Standard

    2. Layout 1

    layout1

    Layout 2

    layout2
  2. Left Navigation

    3. Layout 3

    Layout 4

    layout4

HEADER LAYOUT

Choose one of 5 Header Layouts:
  1. Background Slider
    hd1
  2. Static Text Biography
    hd2
  3. Bottom Posts Carousel 
    hd3
  4. Posts Tab
    hd4
  5. Top Posts Carousel 
    hd5

BLOG LAYOUT

Choose one of 7 Blog Layouts:
  1. Grid
    bl_l1
  2. Masonry
    bl_l2
  3. One Column
    bl_l3
  4. Normal Classic
    bl_l4
  5. Wide Classic
    bl_l5
  6. Modern
    bl_l6
  7. MasonryModern
    bl_l7

Installation

The Full Package includes these following files and folders:
  • Documentation folder - Contain this document and other materials
  • Installation Files folder - Contain all installable files, including theme & plugins
    • themes/theblog.zip - WordPress Theme Installation file
    • plugins/plg-theblog-shortcodes.zip - WordPress plugin to enable shortcodes
    • plugins/plg-background-slider.zip - WordPress plugin to enable Background Slider feature
    • plugins/plg-c-project.zip - WordPress plugin to enable Project/Portfolio management
    • plugins/plg-visual-composer.zip - Visual Composer plugin, a drag&drop page builder (Premium)
  • Sample Data folder - Contain sample data files
OptionTree plugin is required for the theme to work properly

INSTALL VIA WORDPRESS

  1. Login to WordPress Admin
  2. In the left menu panel go to Appearance > Themes > Add New to install theme, or Plugins > Add New > Upload to install plugins
  3. Click Upload
  4. Browse your download package to select installation files
  5. Click Install Now button
  6. Once it's uploaded, click the Activate link

INSTALL VIA FTP

  1. Use your FTP software to browse to wp-content/themes folder to install theme or wp-content/plugins folder to install plugins
  2. Extract the installation files to their corresponding folders, for example theblog.zip to theblog and upload to server
  3. Once it's uploaded, go to your WordPress Admin, browse to Appearance > Themes or Plugins > Installed Plugins
  4. Click the Activate link
After the process of installation is finished, your page will be displayed in form of a blog page

Note: You can install optional plugins if needed. We recommend using these extra plugins (free). All have been tested and used on our demo page.
Go to Plugins > Add New to install and activate plugins
  • Contact Form 7 - Simple but flexible contact form plugin
  • WP PageNavi - Add a more advanced paging navigation to your WordPress blog
  • Custom Sidebars - Allow you to create widgetized areas and custom sidebars. Replace whole sidebars or single widgets for specific posts and pages.
  • Categories Images - Allow adding image to category
  • TinyMCE Advanced - Enable advanced features and plugins in TinyMCE
  • WP Twitter Feeds - Add latest tweets on sidebar to your WordPress blog

Update Theme

  1. Deactive current theme by going to Appearance > Themes and activate any other themes such as the default Wordpress 3.8's Twenty Fourteen.
  2. Delete older version by clicking on Delete link. Confirm to delete.
  3. Update and re-install new version.

All posts and settings will be saved. This is data-safe method.

Auto Update

  1. Go to Plugins > Add News > Upload, find and install /plugins/envato-wordpress-toolkit.zip file (in the download package)
  2. To establish an Envato Marketplace API connection navigate to the Envato Toolkit page and insert your Marketplace username and secret API key in the designated input fields. To obtain your API Key, visit your "My Settings" page on any of the Envato Marketplaces
  3. Once the API connection has been established you will see a list of themes that can be auto installed. If you don't see any themes and are certain you've done everything correct, there is a good chance the theme author has not updated their theme to be available for auto install and update. If that's the case, please contact the theme author and ask them to update their theme's information
  4. Note Only theme is updated. Related plugins must be updated manually. Please check release logs to see if you need to update plugins

INSTALL SAMPLE DATA

ONE + CLICK INSTALL

Before starting, it is noted that

  • It is better to install sample data on a fresh Wordpress installation. Therefore, you may want to reset your site to default settings. Install and use Wordpress Reset plugin to do that. After installed, go to Tools > Reset
  • The import process may take several minutes due to large data and your server capacity. If your server setting "Max Execution Time" is too low, increase it (as your hosting provider). Please do not close the browser until it finishes. If it fails, you can run this process again until seeing the "Success Message". Demo Images are not installed due to some copyrighted licenses
  • If you have to run the process more than once, menu items may be duplicated. Just go to Appearance > Menus and edit/delete Main Menu items
  • Feature images are not imported (We use licensed photos on our demo page)

Go to Tools > Cactusthemes Import Sample Data. Click that and confirm to install sample data.

IMPORT MANUALLY

Alternatively, you can use traditional way to import data. In /Sample Data/ folder, you can find there are:
  • theblog.xml All Data
  • theme-options.txt Theme Options Settings
  • theblog-widgets.json Widgets Settings
To install sample data as seen on our demo page, following these steps

Step 0. Make sure you have installed the blog theme and all recommended plugins

Step 1. Go to Tools > Import, then click on Wordpress

Step 2. If it is not yet installed before, you have to install it. On the popup window, click on "Install Now"

Step 3. After installed successfully, click Activate Plugin & Run Importer

Step 4. Browse for [path-to-your-downloaded-package]/Installation File/Sample Data/theblog.xml or theblog.xml.gz and click Upload File and Import.

Step 5. After uploaded, the confirmation page appears. Check the Download and import file attachments option and click Submit.  If you have trouble with importing (it might breaks in the middle due to long execution time), try again with this option Unchecked! Or, try to import separate files as they are smaller

Step 6. After uploaded, the confirmation page appears. Check the Download and import file attachments option and click Submit

Step 7. When you see message "All done. Have fun!", you will know that the import is done.  Note: you may need to re-import the second time if the data is large. Back to Step 1. until you see the message below

Step 8. Go to Settings > Reading, set Front page displays to A Static page. Choose Home Page page as Front page and Blog as Posts page

Step 9. Go to Appearance > Menus, choose Main Navigation menu as Prim

ary Menu


Step 10. Install Widget Settings Importer/Exporter and go to Tools > Widget Settings Import to import Sample-data/theblog-widgets.json file

Step 11. Go to Option Tree > Settings > Import and paste content of Sample-Data/theme-options.txt into Theme Options text field, then click Import Theme Options button.

Step 12. OK, done!

HOW TO CREATE MENU

There are two menu locations in the theme:
  • Primary Menu
  • Footer Menu
In which, you can turn on Mega Menu feature for Primary Menu (beside the Multi-Level Dropdown Menus style) in Theme Options > General > Enable MegaMenu. Mega Menu has 3 sub-level-menu styles including List Style, Column Style and Preview Mode. Please check next sections to see how to configure the Mega Menu.

If you have imported demo content, follow Existing Menu or else follow Creating a New Menu to create a new menu.

  1. Go to Appearance > Menus
  2. In the Manage Locations area, under Main Navigation, select a menu for in the dropdown box labeled Primary Menu or Footer Menu. Click Save

menu

  1. Go to to Appearance > Menus

  2. Click Create a new menu. Enter a menu's name and click Create Menu

  3. Check the menu item in the boxes in the left column, click Add to Menu to add items to the menu and drag/drop to arrange them.

    4. createmune

  4. If you would like to use this menu in navigation, in the Manage Locations area, assign your newly created menu to Primary Menu or Footer Menu. Click Save

  5. Click Save Menu and that is all

MEGA MENU

To turn on Mega Menu mode, go to Theme Options > General > Mega Menu first and choose ON, then go to Appearance > Menus to configure the menu structure. Mega Menu can contains three sub-menu styles: List Style, Column Style and Preview Mode

List Style is the traditional dropdown-menu style.

list

We call Parent Level Menu Level 0. Then, next levels are Level 1, Level 2...

  1. Add Menu Level 0, Level 1... normally by using drag & drop
  2. Click on a Menu Level 0 (Parent Level Menu ) item and select List Style in Menu Style selectbox (this selectbox is only displayed for Menu Level 0)
    list_stylemenu1
  3. You can configure Display Logic option to control the appearance of this menu item
    • Always visible - Always display menu for Guests and Admin Users. It is visible
    • Only Visible to Guests - Menu is only displayed for Guests when they visit your website, but not display for Admin Users
    • Only Visible to Members - Menu is only displayed for User Members, but not display for Guests
  4. "Click Save"
Column Style is a multi-column style menu to display menu items (such as posts, pages, categories) and widgets like below figure
column
  1. Column Style MUST HAVE Level 0, Level 1 (also called Heading of Column), and Level 2 menu items. 
    menu1
  2. Click on a Level 0 menu item and select Column Style in Menu Style (Menu Style is only displayed for Menu Level 0)
    menu2
  3. To put a widget into a column, (widget is only put into Level 1), prepare a sidebar to contain widgets first. It is recommdended to use Custom Sidebar plugin to register new sidebar for this purpose. Then, drag widgets that you want to display the ⁄ your menu to the new Sidebar.

    After widgets are set up, go back Menus and click on a Level 1 menu item. Choose sidebar in Display widgets area.

    Note: Display widgets area is only displayed in Menu Level 1

    menu3
  4. You can configure Display Logic option to control the appearance of this menu item
    • Always visible - Always display menu for Guests and Admin Users. It is visible
    • Only Visible to Guests - Menu is only displayed for Guests when they visit your website, but not display for Admin Users
    • Only Visible to Members - Menu is only displayed for User Members, but not display for Guests
  5. "Click Save"
The Preview mode looks like below figure. In this mode, visitors will see latest posts in a category or a tag
preview
  1. In this mode, menu only has 2 levels (Level 0 and Level 1). Level 1 MUST BE one of the following type: Categories, Tags, Posts, Pages and WooCommerce/JigoShop Product Categories
  2. Click on Level 0 menu item and select Preview Mode in Menu Style (Menu Style is displayed for Menu Level 0)
    menu4
  3. You can configure Display Logic option to control the appearance of this menu item
    • Always visible - Always display menu for Guests and Admin Users. It is visible
    • Only Visible to Guests - Menu is only displayed for Guests when they visit your website, but not display for Admin Users
    • Only Visible to Members - Menu is only displayed for User Members, but not display for Guests
  4. "Click Save"

HOW TO CREATE HOME PAGE

  1. Create two new pages in WordPress (under Pages > Add new), and publish them 

    For the purpose of demonstration, we’ll call these “Home” (for the Front, or Home page) and “Blog”
  2. Go to Settings > Reading Settings, and under “Front page displays”, click the radio button for A static page 

    Select “Welcome” in the first drop down (for Front page), and select “Blog” in the second one (for Posts page). Save the changes

FRONTPAGE TEMPLATE

The Blog provides a page template called Front Page to configure special Frontpage (or Home).

  1. Go to Pages > All Pages and edit “Home” page created in previous step
  2. Choose Front Page in Template. The corresponding metadata will appear in the boxes Front Page Layout, Front Page Header and Front Page Content in the left.
    fp-header
  3. Configure settings in Front Page Layout , Front Page Header  and Front Page Content boxes

    • Layout settings

      Sidebar Select "Default" to use the settings in Theme Options > Single Page > Sidebar. Otherwise, you can choose “Left” sidebar , “Right” sidebar or no sidebar (“Hidden“)
      Page Background Choose background for this page

    • Front Page Layout

      Main Layout Choose main layout, which can be (Main Layout):
      • Standard
      • Left Navigation

    • Front Page Header

      Hearder Layout Choose header style, which can be (Header Layout):
      • Background Slider
      • Static Text Biography
      • Bottom Posts Carousel 
      • Posts Tab
      • Top Posts Carousel 
      Header Posts Carousel, Posts Tab - Count Enter number of items to display
      Header Posts Carousel, Posts Tab - Category Enter category Ids or slugs to get posts from, separated by a comma
      Header Posts Carousel, Posts Tab - Tags Enter tags to get posts from, separated by a comma
      Header Posts Carousel, Posts Tab - IDs Enter post IDs, separated by a comma
      Header Posts Carousel, Posts Tab - Order by Ordered by the following conditions
      • Post date: Display posts according to published date
      • Random: Display random posts

    • Front Page Content


      Content Choose displaying contents in Body page. In which
      • This Page Content: Display content in the page content editor. In this way, you can use shortcodes, html or text to build the page layout
        ct1
      • Blog (latest post): Display all posts in form of blog (if you use shortcodes to build page content and also choose this feature, shortcodes'content will not be shown). When Content is chosen to be Blog (latest post), settings for Blog Layout, Post Categories, Post Tags, Post Ids, Order by, Post Count will appear
        ct2
      • Portfolio: When Content is chosen to be Portfolio, settings for Portfolio Layout and Show Tags Filter will appear
        portfolio
      Blog Layout Choose displaying contents in the page (Blog Layout), including:
      • Grid
      • Masonry
      • One Column
      • Normal Classic
      • Wide Classic
      • Modern
      • MasonryModern
      Post categories Enter category IDs or slugs to get posts from, separated by a comma (Display appointed posts belonging to categories)
      Post tags Enter tags to get posts from, separated by a comma (Display appointed posts belonging to tags)
      Post Ids Enter post IDs, separated by a comma. If this parameter is used, other parameters are ignored (Display appointed posts)
      Order by Ordered by the following conditions
      • Post date: Display posts according to published date
      • Random: Display random posts
      Post Count Enter number of posts to display
      Portfolio Choose displaying contents in the page
      • Modern With Spacing
        port1
      • Modern No Spacing
        port2
      • Masonry Modern With Spacing
        port3
      • Masonry Modern No Spacing
        port4
      Show tags filter Enable tags filter feature
      tag

WIDGETS

  1. The Blog - Related Posts Widget
    • Title - Title of widget
    • Category - Category IDs or slugs to query posts, separated by a comma
    • Tags - Tags to query posts, separated by a comma
    • Post IDs - IDs of posts to display, seperated by a comma. If this parameter is used, other parameters are ignored.
    • Number of posts - Number of posts to display
      • related_post
  2. The Blog - Custom Menu Widget
    • Title - Title of widget
    • Select Menu - Choose one of several layouts provided
      • custom_menu
  3. The Blog - Recent Comments Widget
    • Title - Title of widget
    • Number of comments to show - Number of comments to show
      • latest_comment
  4. The Blog - Social Accounts Widget
    • Title - Title of widget
    widget_social

    Social Accounts are configured in Appearance > Theme Options > Social Accounts

THEME OPTIONS

The blog comes with a lot of options to help you totally customize the look & feel of your site. Go to Appearance > Theme Options to configure.
Below is the detail of how to use those functions.

GENERAL

The general configuration for website
  1. Enable Search: Enable or disable default search form in every pages (it appears on Top Navigation menu bar)
    gl1

  2. SEO - Echo Meta Tags: By default, The Blog generates its own SEO meta tags (for example: Facebook Meta Tags). If you are using another SEO plugin like YOAST or a Facebook plugin, you can turn off this option
  3. Copyright Text: Appear in footer
    gl2

  4. RTL Mode: Support right-to-left language
    gl3

  5. Custom CSS: Enter custom CSS. Ex:

    .class{ font-size: 13px; }
  6. Custom Code: Enter custom code or JS code here. For example, enter Google Analytics
  7. Favicon: Upload favicon (.ico)
    gl4

  8. Logo Image: Upload your logo image
    gl5

  9. Logo Image For Sticky Menu: Upload your logo image for sticky menu
    logo_stickymenu

  10. Retina Logo (optional): Retina logo should be two time bigger than the custom logo. Retina Logo is optional, use this setting if you want to strictly support retina devices.
  11. Login Logo Image: Upload your Admin Login logo image
    gl6

  12. Scroll Top button: Enable Scroll Top button (when clicking "Top", button in the footer of the site, it will scroll to top of that page)
    gl7

  13. CTA button Text: Text on Call-To-Action button. If empty, button is hidden
    gl8

  14. CTA button URL: URL of Call-To-Action button

  15. CTA button target: If clicked, open URL in current page or new page

  16. Scroll Effect: Enable Page Smooth Scroll effect

COLOR AND FONTS

The color and fonts configuration for website
  1. Main color: Choose main color of the theme

    color1
    color2

  2. Google Font: Enable this feature to use Fonts from Google Fonts repository. When On is chosen, settings for Main Font Family and Heading Font Family below will run
  3. Main Font Family: Enter font-family name here. Google Fonts are supported. For example, if you choose "Source Code Pro" Google Font with font-weight 400,500,600, enter "Source Code Pro: 400,500,600"

  4. Heading Font Family: Enter font-family name here. Google Fonts are supported. For example, if you choose "Source Code Pro" Google Font with font-weight 400,500,600, enter "Source Code Pro: 400,500,600". Only few heading texts are affected
    font1

  5. Main Font Size: Select base font size
  6. Custom Font 1: Upload your own font and enter name "custom-font-1" in "Main Font Family" or "Heading Font Family" setting above. Remember to turn off "Google Font" settings
  7. Custom Font 2: Upload your own font and enter name "custom-font-2" in "Main Font Family" or "Heading Font Family" setting above. Remember to turn off "Google Font" settings

THEME LAYOUT

Configure some features for website such as layout settings, background changes, pagination, sidebar
  1. Main Layout: The Main Layout of theme includes Standard and Left Navigation
    • Standard: In this layout, main navigation is horizontal. Settings for Header Layout and Background slider shortcode will appear
      main_layout1
      main_layout1.2

    • Left Navigation: In this layout, main navigation is on the left. A setting Front-page Heading will appear
      main_layout2
      main_layout3

  2. Header Layout: This setting is for Standard Theme Layout only. Choose one of the following layouts (Header Layout):
    • Background Slider
    • Static Text Biography
    • Bottom Posts Carousel
    • Posts Tab
    • Top Posts Carousel
  3. Background Slider shortcode: This setting is for Standard Theme Layout only and requires Background Slider plugin to be installed. Enter background slider shortcode in the textbox to use the slider in the header slider

  4. Front-page Heading: This setting is for Left Navigation Theme Layout only. Enter heading text for front-page or leave empty if you don't want to show it

  5. Mega Menu: Enable mega menu feature, see Mega Menu section
  6. Sticky navigation: Enable sticky navigation
  7. Blog Layout: Choose default blog style for posts (blog) page, which can be (Blog Layout):
    • Grid
    • Masonry
    • One Column
    • Normal Classic
    • Wide Classic
    • Modern
    • MasonryModern
  8. Sidebar: Select style for blog
    • Right Sidebar: Archives pages with the right sidebar (default)
    • Left Sidebar: Archives pages with the left sidebar
    • Hidden sidebar: Archives pages without sidebar (These pages are full-width)

      • For example, figure below is an Author page with Right Sidebar

      sidebar

  9. Pagination: Choose type of pagination for all archives pages. There are three options: Default WordPress, Ajax, and WP PageNavi. If you choose WP PageNavi, make sure you have installed WP PageNavi plugin in advanced
    • Default WordPress
      pagi1

    • Ajax

    • WP PageNavi
      pagi3

    • Default Background: Choose default background for categories and author pages

SINGLE POST

These features are only configured for Single Post page
  1. Sidebar: Hide/show the main Sidebar. This setting can be overriden in each post
  2. Layout For Standard Posts: Choose default layout for standard posts
    • Layout 1 (Default layout)
      post_layout1

    • Layout 2
      post_layout2

  3. Author: Enable Author information
  4. Published Date: Enable Published Date information
  5. Categories: Enable Categories information
  6. Tags: Enable Tags information
  7. Social Sharing: Enable Social Sharing number
  8. Post Navigation: Enable Post Navigation
  9. Related Post Count: Number of related posts
  10. Related Posts: Enable Related Posts
  11. Related Posts by: Get related posts by categories or tags (random order)
  12. About Author: Enable About Author information
    single_post
These features is only configured for Gallery Post page
  1. Layout For Gallery Posts: Choose default layout for gallery posts
    • Layout1 (Default layout)
      gallery_layout1

    • Layout2
      gallery_layout2

  2. Gallery Slider Autoplay: Enable autoplay for Gallery Slider
  3. Gallery Slider Speed: Set speed for Gallery Slider (in milliseconds). Default: 5000 (milliseconds)
  4. Default Slider Height in Gallery Post Layout 1: Default Slider Height in Gallery Post Layout 1. Default: 800 (px)

SINGLE PAGE

These features are only configured for Single Page pages
  1. Sidebar: Hide/show Sidebar. This setting can be overriden in each page
  2. Disable Comments by default: Disable comments in single pages

404 - PAGE NOT FOUND

These features is only configured for 404 page
  1. Page Title: Enter title for the page
  2. Page Content: Enter content for the page
404

SOCIAL ACCOUNTS

Turn on/turn off Social items. Social Account icons will appear in The Blog - Social Accounts widget
    social_account
  1. Facebook: Enter full link to your profile page
  2. Twitter: Enter full link to your profile page
  3. LinkedIn: Enter full link to your profile page
  4. Tumblr: Enter full link to your profile page
  5. Google Plus: Enter full link to your profile page
  6. Pinterest: Enter full link to your profile page
  7. YouTube: Full link to your profile page
  8. Flickr: Enter full link to your profile page
  9. Email: Enter email contact
  10. Custom Social Account: Add more social accounts using Font Awesome Icons
  11. Open Social Link in new tab: Open link in new tab

SOCIAL SHARING

Turn on/turn off Social Items appearing in Single Post page and in each item in an Archive page
    social_sharing
  1. Facebook: Enable Facebook Share button
  2. Twitter: Enable Twitter Share button
  3. LinkedIn: Enable LinkedIn Share button
  4. Tumblr: Enable Tumblr Share button
  5. Google +: Enable Google+ Share button
  6. Pinterest: Enable Pinterest Pin button
  7. Email: Enable Email button

ADVERTISING

Allowing putting your advertisement in specific pages or in all pages
advertising
  1. Google AdSense Publisher ID: Enter your Google AdSense Publisher ID
  2. Top Ads Archives - AdSense Ads Slot ID: If you want to display Adsense on Top of Archive pages, enter Google AdSense Ad Slot ID here. If left empty, "Top Ads Archives - Custom Code" will be used
  3. Top Ads Archives - Custom Code: Enter custom code for Top Ads Archives position
  4. Bottom Ads Archives - AdSense Ads Slot ID: If you want to display Adsense at Bottom of Archive pages, enter Google AdSense Ad Slot ID here. If left empty, "Bottom Ads Archives - Custom Code" will be used
  5. Bottom Ads Archives - Custom Code: Enter custom code for Bottom Ads Archives position
  6. Top Ads Single - AdSense Ads Slot ID: If you want to display Adsense on Top of single pages, enter Google AdSense Ad Slot ID here. If left empty, "Top Ads Single - Custom Code" will be used
  7. Top Ads Single - Custom Code: Enter custom code for Top Ads Single position
  8. Bottom Ads Single - AdSense Ads Slot ID: If you want to display Adsense at Bottom of single pages, enter Google AdSense Ad Slot ID here. If left empty, "Bottom Ads Single - Custom Code" will be used
  9. Bottom Ads Single - Custom Code: Enter custom code for Bottom Ads Single position

AUTO UPDATE

Enable auto-update feature for the theme. Please note that only the theme is auto-updated. All related plugins must be updated manually
    auto_update
  1. Envato Username: Enter your Envato username
  2. Envato API: Enter your Envato API. You can find your API under in Profile page > My Settings > API Keys on your Envato profile page
  3. Allow Auto Update : Allow Auto Update or Not. If not, you can go to Appearance > Themes and click on Update link
    auto_updatelink

THE BLOG SHORTCODE

Shortcodes can be used in either Classic Editor or Visual Composer mode (require Visual Composer plugin installed). You can type shortcode directly in Classic Editor or use Visual Composer element to configure the shortcode
Most of the properties of shortcodes are optional. You only need to include properties when needed
Image carousel shortode is only available in Classic Editor. This shortcode should only be used in full-width (no sidebar) pages or posts. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Image carousel


  1. height - number - height of carousel (in pixels). Default is 550(px)
  2. speed - number - speed of carousel animation (in milliseconds). If empty, autoplay is turned off.
    3. image_carousel

IMAGE COLUMN

Image column shortode is only available in Classic Editor. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Image column


    image_column

TEXT BLOCK

Text block shortode is only available in Classic Editor. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Text block


  1. pos - default 'center' - Position of text block
    • center
    • right
    • left
    2. text_block

BUTTON

Button shortode is only available in Classic Editor. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Button


  1. size (optional) – default value is “small”
    • small
    • large
  2. color (optional)
    • default value is theme color
  3. href
    • Link to URL
    4. button

ACCORDION & TOGGLE

These are default elements of Visual Composer plugin.
toggle_1

Step 1: Click "plus sign" icon to add contents into Accordion
toggle_2

Step 2: If contents are Text, choose Text Block shortcode
toggle_3

Then enter contents in Text Block shortcode and save it
toggle_4

Step 3: After contents are fully added and saved, its result will appear as the image below
toggle_5

TAB

Tab: Create tabs containing post’s content.
Tab is default element of Visual Composer plugin
tab1

Step 1: Click "plus sign" icon to add contents into Tab
tab2

Step 2: If contents are Text, choose Text Block shortcode
toggle_3

Then enter contents in Text Block shortcode and save it
toggle_4

Step 3: After contents are fully added and saved, its result will appear as the image below
tab5

TOOLTIP

Tooltip shortode is only available in Classic Editor. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Tooltip


  1. title (text) - content to be appeared when text is hovered
    2. tooltip

ADSENSE

Adsense shortode is only available in Classic Editor. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Adsense


  1. pub - Google Adsense Publisher ID
  2. slot - Google Adsense Slot ID
  3. class - Custom CSS class

TABLE (HTML)

Table (html) is a factor installed in Classic Editor. In order to display shortcode table shortcode_table, users need to install it as follows: Go to Settings > TinyMCE Advanced to configure

Note: In order to get the feature TinyMCE Advanced, users need to install plugin plugins/tinymce-advanced.zip
table4
Step 1:Choose Table on the menu bar of Classic Editor, then select Insert Table and the number of columns & rows as desired

table1
or Click the icon shortcode_table, then choose the number of columns & rows as desired
table5
Step 2: Enter text's content as shown below
table2
Step 3: After the content is fully complemented and saved, its result will appear as shown below
table3

LIST (HTML)

List (html) is a factor installed in Classic Editor

Step 1: Choose the icon Bulleted list on the menu bar of Classic Editor or choose Numbered list to create a list as desired

list1
Step 2: Choose the type of list as desired and enter content. Types of list are described as follows
  1. Bulleted list - Includes options
    • Default
    • Circle
    • Disc
    • Square
  2. Numbered list - Includes options
    • Default
    • Lower Alpha
    • Lower Greek
    • Lower Roman
    • Upper Alpha
    • Upper Roman
Step 3: After the content is fully complemented and saved, its result will appear as shown below
list2

DIVIDER

Divider shortode is only available in Classic Editor. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Divider


divider

ICON BOX

Icon box shortode is only available in Classic Editor. Click the Shortcode icon shortcode_editoron formatting toolbar > choose Icon box


  1. icon - name of icon class. For example, "fa fa-camera" (see Icons List here)
  2. title - title of box
  3. icon_color (hexa color, with leading #) - color of icon - default value is #1F1F1F
  4. title_hover_color (hexa color, with leading #) - color of title text when hovered - default value is theme color
icon_box

COMPARE TABLE

There are two ways to add Compare Table shortcode
  1. Add Compare Table shortcode with "Classic Mode" editor interface
  2. Add Compare Table shortcode with Visual Composer
HOW TO USE COMPARE TABLE SHORTCODE WITH CLASSIC MODE
Step 1: Go to Pages > Add New Page > click icon "Shortcode" shortcode and choose Compare Table
compare1
Step 2: Enter values for options in Compare Table shortcode.
compare2
Step 3: Shortcode structure is appeared as follows, you need to enter the content of lines

The [comparetable] shortcode has the following variables/options:
  1. [comparetable]
    • class (text) - custom CSS class
    • id (text) - custom ID. If not provided, random ID is generated
    • color (hexa color) - main color of compare table
  2. [c-column]
    • class (text) - custom CSS class. Use "recommended" class to turn this column into special one
    • column (number) - number of columns in this compare table. It should match number of [c-columns] shortcode within [comparetable]
    • color (hexa color) - text color of column
    • bg_color (hexa color) - background color of column
    • title (text) - Title of column
    • price (number) - Price value
    • currency (character) - Currency symbol
    • price_text (text) - additional text after price
    • price_color (hexa color) - color of price text
HOW TO USE COMPARE TABLE SHORTCODE WITH VISUAL COMPOSER
Step 1: Go to Pages > Add New Page > Backend Editor
compare3
Step 2: Click Add element
compare4
Step 3: Click Row shortcode to insert a line
compare5
Step 4: Click the option to choose the number of columns you need to use, for example: the number of columns are 3
compare6
Step 5: Click "plus sign" icon, then choose Compare Table shortcode
compare7
compare8

Step 6: Enter values in Compare Table shortcode
compare15
In order to add row containing contents in Compare Table shortcode, click "plus sign" icon in Compare Table shortcode to insert line and choose "Row"
compare9
compare10

Step 7: Enter values for the Row
compare11
Step 9: In order to insert more rows, click "plus sign" icon under of Compare Table shortcode and follow the same steps as step 6,7. It is unlimited to insert more rows
compare12
Step 10: In order to insert Button shortcode, click "plus sign" icon as the image below and choose Button shortcode
compare13
After adding components for Compare Table shortcode in column 1 is completed, let's move to column 2 or 3, then follow with the above steps and save it, resulting as the image below
compare14

BACKGROUND SLIDER

This shortcode is only available when users install plugins/background-slider.zip


  1. ids: list of background slide ID, separated by a comma. If it is empty, latest slides are taken
  2. number_of_slides: number of slides, default value is 5
  3. auto_play: miliseconds of the time for moving slide. Default value is 5000 (milliseconds). To turn off auto play, set the value to 0
  4. pagination: Display the pagination of slide, default value is "0". Possible values:
    • 0
    • 1
  5. transition: default value is "fade". Possible values:
    • backSlide
    • goDown
    • fade
  6. full_height: default value is "1". Possible values:
    • 0
    • 1
  7. scroll_down_button: turn on/turn off the scroll down at the bottom of slider, default: 1, value: 0 , 1
  8. type: select either "b-slide" (default) or "post"
  9. cats: IDs or slugs of the Slider (Slide Category) if "type" parameter is "b-slide" or default Category if "type" parameter is "post". Separate values by a comma
  10. order: order items. Possible values:
    • DESC
    • ASC
  11. orderby: order by
    • rand - random
    • title - title
    • date - date
    • post__in - preserve post ID order given in the shortcode

CATEGORY PAGE

  1. Go to Posts > Categories. In order to have a background in a category, it is needed to install Category Images plugin
    Note: Layout of category is taken from Theme Options > Layout > Blog Layout
    category
  2. Users need to fill in the following parameters:
    • Name: The name is how it appears on your site
    • Slug: The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens
    • Parent: Categories, unlike tags, can have a hierarchy. You might have a Jazz category, and under that have children categories for Bebop and Big Band. Totally optional
    • Description: The description is not prominent by default; however, some themes may show it
    • Header Background height: put header background height for this category page. If empty, default background height in Theme Options will be used (Theme Options > General > Default Background Height)
    • Page Background: Choose background for this category
    • Category Background Color: Choose category background color
    • Category Background Repeat: Includes options
      • Background - Repeat (Default)
      • No Repeat
      • Repeat All
      • Repeat Horizontally
      • Repeat Vertically
      • Inherit
    • Category Background Attachment: Includes options
      • Background - Attachment (Default)
      • Fixed
      • Scroll
      • Inherit
    • Category Background Position: Includes options
      • Background - Position (Default)
      • Left Top
      • Left Center
      • Left Bottom
      • Center Top
      • Center Center
      • Center Bottom
      • Right Top
      • Right Center
      • Right Bottom
    • Category Background Size: Choose category background size
    • Image: Choose upload or add image
height_background

PAGES

PAGE TEMPLATES

LAYOUT SETTINGS

POSTS

LAYOUT SETTINGS

POST SETTINGS

Featured Post: Make this post featured. Featured posts are displayed in the header of a front-page in cases of Top Posts Carousel and Bottom Posts Carousel layout
post_setting
Representative Color: Choose a color that represents this project. It is the color of an item when hovered in a grid listing page
representative_color
representative_color2

POST FORMAT

The Blog theme supports Standard, Video, Gallery, Image and Audio Post Format

GALLERY POST

  1. Go to Posts > Add New
  2. Choose Gallery in Format
    fomat_gallery

  3. Click Add Media > Create Gallery > Upload Files > Select files > choose image from your computer to upload and click Create a new gallery, continue uploading some images to create a Gallery album
    create_gallery

  4. If you want to insert gallery into post content, click Insert Gallery. If not, just close the popup. Images will only appear on header carousel 
    insert_gallery

  5. Enter necessary information such asTitle, Categories and tags,etc...then click Publish to save
    gallery_post

OTHER SETTINGS

WIDGET CUSTOM VARIATION

In every widget, there is a textbox called Custom Variation. It is used when you want to customize the widget using custom CSS. The value entered in this textbox is added to the CSS class property of the widget box in front-end, then you can write CSS for this widget

custom1
custom2

WIDGET WIDTH

Note: When you drag widgets into Footer Sidebar, you can set Widgets manually by using Select Box (col-md-X). Make sure that the total width of each row is 12 column. For example: you have inserted 4 Widgets into Footer Sidebar, you want to split the width of the widget evenly, you need to select the width to be (col-md-3) in Widget width or a Widget named "Recent Posts", you can set its width to be (col-md-3) ​​or you can set its width randomly.
widgets_width

THE BLOG - BACKGROUND SLIDER PLUGIN

Background Slider plugin can be found in the full package(/Installation Files/plugins/plg-background-slider.zip). After installed, you can see the Background Slider menu in Admin

HOW IT WORKS

When Background Slider is completely installed, it will display as the video below:

CREATE A SLIDER

  1. Step 1 - Create Slider (or Slide Category): Go to Background Slider > Sliders

    slider_category
  2. Step 2 - Add new Background Slides: Go to Background Slider > Add New. Fill in some information
    • Title
    • Content
    • Choose Sliders
    • Update or choose an image in Featured Image box
    3. add_new_background
  3. Step 3: Put Background Slider into Homepage.
    • For default Blog page: Go to Theme Options > Theme Layout > Header Layout and choose Background Slider. Enter Background Slider shortcode in the textbox
    • For FrontPage template: Go to Page > Home, choose Front Page Template and enter Background Slider shortcode in Front Page header box
  4. Click Save

THE BLOG - C-PROJECT PLUGIN

C-Project plugin can be found in the full package (/Installation Files/plugins/plg-c-project.zip). After installed, you can see Project and Project Settings menu items in Admin

WHAT IS A PROJECT ?

A Project is a work or product that you or your company have done. A Portfolio page is used to list all projects
project
  1. Go to Project > Add New Project. Fill in some information
    • Title
    • Content
    • Project Tags
    • Choose Layout For Single Project page
        Project photo - default layout
        project_photo
        Project slide
        project_slide
  2. Click Save

PROJECT SETTING

  1. General
    • Project Slug: Change project slug. Remember to save the permalink settings again in Settings > Permalinks
    • Tag Slug: Change project slug. Change project tag slug. Remember to save the permalink settings again in Settings > Permalinks
    • Next Posts: in (select)
  2. Project Listing
    • Main Layout: Choose layout for Project Listing page, see more at Main Layout
    • Left Layout Heading: Enter text for the Heading
    • Header Layout: Choose Header Layout for Project Listing page (for Standard Main Layout only), see more at Header Layout
    • Background Slider shortcode: Enter background slider shortcode if Header Layout is set to Background Slider
    • Static Text - Line 1: Enter text for the first line (only available if Header Layout is set to Static Text)
    • Static Text - Line 2: Enter text for the second line (only available if Header Layout is set to Static Text)
    • Static Text - Line 3: Enter text for the third line (only available if Header Layout is set to Static Text)
    • Blog Layout: Choose layout for listing items, see more at Blog Layout
    • Show Tags Filter: Enable tags filter
    • Pagination: Choose type of pagination for project listing page
  3. Single Project
    • Layout: Select default layout for single project pages, see more at Single Project layout
    • Show Back Button: Enable Back button
    • Show Sharing Buttons: Enable Social Sharing buttons
    • Show Navigation: Enable Navigation buttons
    • Show Related Projects: Enable Related Projects section
    • Related Project: Enter number of related projects to show

RTL & Translation

The Blog is a WMPL compatible and multi-language ready theme. To translate this theme:
  • Download and install this tool POEdit
  • Open POEdit and load [/theblog/languages/theblog.po]
  • Translate the text and save the file
  • A file named theblog.mo is created. Save it in /theblog/languages/ folder. Rename it with Code Name of your language. For example, de_DE.mo for German - Deutsche. See language code list here http://codex.wordpress.org/WordPress_in_Your_Language
  • For WordPress 4.0 and above, go to Settings > General and choose Site Language
  • For WordPress 3.9.2 and below, open [{wordpress root}/wp_config.php] and find this line define('WPLANG', '');. Change it with your language code, for example define('WPLANG', 'de_DE');
The blog also supports RTL - Right To Left languages. If your language is RTL, go to Appearance > Theme Options > General > RTL mode and check Enable RTL

Licenses

The list might not be complete by accident. Authors who think you owe a license in this theme, please contact us at [email protected]

Support

If you face any problems with the installation or customization of our product, please do not hesitate to contact us via our support ticket system:

http://ticket.cactusthemes.com/