Magneto Theme Documentation

Introduction

Thanks for purchasing our theme. This documentation consists of several parts and shows you the entire process of setting up WordPress theme from scratch.

What is WordPress?

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It enables you to build Websites and powerful on-line applications and requires almost no technical skills or knowledge to manage. Many aspects, including its ease of use and extensibility, have made WordPress the most popular Web site software available. Learn More

What is a WordPress theme

A WordPress theme is a skin for a website built with the WordPress CMS platform. In other words, you can easily change your WordPress Web site appearance by installing a new template in a few easy steps. With all its simplicity, a WordPress template is provided with all the necessary source files and you are free to edit or extend it the way you need.

Help and Support

Theme installation

Theme installation is very easy using WordPress theme uploader. You need to have a latest version of WordPress installed onto your server in order to install the theme.

You can install WordPress themes using: WordPress theme uploader or FTP.

Step 1. Installing Theme with the Uploader

To install theme with the WordPress theme uploader:

  1. Download the "magneto.zip" file from the Member Area
    • Note: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As". This will allow you to download the theme as a zip file.
  2. Login to Wp Admin.
  3. Go to the menu Appearance > Themes and click the Add New Theme button.
  4. Click on Upload button.
  5. Click the Browse button and navigate to the zipped theme package on your computer.
  6. Look for a file called magneto.zip. Click on it to select, then click OK.
  7. Click the Install Now button and wait until the installation is complete.
  8. Click the Activate to activate the theme.

Congratulations, you have just installed the theme.

Step 2. Installing Theme with FTP

If the WordPress theme uploader fails, you may install the theme with a FTP software. To install themes via FTP, you need to have a FTP software. If you don't know how to use a FTP software, follow the tutorial on FTP. Here are the basic steps on uploading themes to your server:

  1. First, extract the theme zip
  2. Connect to your server via FTP
  3. Go the the WordPress root folder on your server, then go to "wp-content > themes" folder
  4. Upload the theme folder that you extracted from the zip onto the "themes" folder
  5. Click the Install Now button and wait until the installation is complete.
  6. Then login to WordPress admin, go the Appearance > Themes
  7. You should see all the uploaded themes. Click on the "Activate" link to activate the theme (see screenshot below)

Homepage Setup

Preparation

How to Set up Home Page?

  1. WordPress Admin > Settings > Readings > Your Latest Posts

Setup Header

Follow these steps to setup header.

  • Go to Appearance > Theme Options > Basic Settings Tab

How to change Slider Settings?

  1. Go to WordPress Admin > Appearance > Theme Options > Homepage Slider Tab
  2. You can change Slider Effects and Timing.
  3. You can change Slider Effect.
  4. You can change Slider Animation speed.
  5. You can change Slider pause time.
  6. You can change Slide Controllers.
  7. You can change Slider Hide/Show Direction Naviagtion of slider.
  8. You can change Slider Hide/Show pager of slider.
  9. You can change Slider Pause Slide on Hover.

What We Do Section

Homepage sections manage from Appearance > Theme Option > Section

Kindly go to Appearance > Theme Option > Section Tab

Homepage 4 service Boxes

Kindly go to Appearance > Theme Option > Section Tab

  1. First create the pages then select that pages from dropdown
  2. Select the page from dropdown and set the thumbnail that page from below
  3. All images size should be same
  4. Then Click on Save Option Button Note:after any changes click on save button
  5. You can manage read more button text from that section
  6. Can manage boxes excerpt lenght
  7. Can hide four services boxes section

Get a quote section

Kindly go to Appearance > Theme Option > Section Tab > Section 1

Shortcode for the button

[button align="center" name="Get a Quote Now" link="#"]

Who We Are section

Kindly go to Appearance > Theme Option > Section Tab > Section 2

Portfolio/Gallery Setup

  1. Kindly go to Appearance > Theme Option > Section Tab > Section 3
  2. Shortcode:
    [photogallery filter="true" show="8"]
  3. Click on Photo gallery from dashboard click on add new then add the title and set the featured image from right side for gallery
  4. Then publish the photo gallery
  5. All gallery images size should be same

Our Team Section

  1. Our Creative Team Section Manage from Appearance->Themes Options-> Section Tab -> Section 6
  2. Shortcode:
    [our-team show="4"]
  3. Paste this shortcodes where(page or posts) you want team section

Why Do You Choose Magneto? section

Kindly go to Appearance > Theme Option > Section Tab > Section 5

Shortcode for Why Do You Choose Magneto? Section

[column_content type="one_half"][tabs]
[tab title="Design"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar nisi nisi, in hendrerit tellus vulputate ac. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet justo nibh. Phasellus eu auctor lectus. Cras ullamcorper dui a ex sollicitudin interdum.

Ut sed tincidunt metus, laoreet mi. Donec suscipit elit nec fringilla porttitor. Etiam lobortis lacus augue, et mollis augue rutrum id. Mauris gravida quis felis at volutpat. Nullam lobortis et lorem a interdum. Nam ac consectetur lorem. Aliquam eleifend metus eros, id tempor nisi tristique sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pharetra diam risus, vitae ornare massa blandit ut.
[/tab]
[tab title="Company"]
Simple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar nisi nisi, in hendrerit tellus vulputate ac. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet justo nibh. Phasellus eu auctor lectus. Cras ullamcorper dui a ex sollicitudin interdum.

Ut sed tincidunt metus, euismod laoreet mi. Donec suscipit elit nec fringilla porttitor. Etiam lobortis lacus augue, et mollis augue rutrum id. Mauris gravida quis felis at volutpat. Nullam lobortis et lorem a interdum. Nam ac consectetur lorem. Aliquam eleifend metus eros, Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pharetra diam risus, vitae ornare massa blandit ut.
[/tab]
[tab title="Support"]
Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar nisi nisi, in hendrerit tellus vulputate ac. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet justo nibh. Phasellus eu auctor lectus. Cras ullamcorper dui a ex sollicitudin interdum.

Donec suscipit elit nec fringilla porttitor. Etiam lobortis lacus augue, et mollis augue rutrum id. Mauris gravida quis felis at volutpat. Nullam lobortis et lorem a interdum. Nam ac consectetur lorem. Aliquam eleifend metus eros, id tempor nisi tristique sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pharetra diam risus, vitae ornare massa blandit ut.
[/tab]
[/tabs][/column_content]

[column_content type="one_half_last"][accordion]
[accordion_content title="In vestibulum felis nec metus fermentum ultricies"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum justo in eleifend lacinia. Donec tincidunt, odio sit amet suscipit pulvinar, ante sem varius erat, in finibus nibh justo et eros.

Aliquam varius purus ut ligula pellentesque convallis. Pellentesque ornare ut sem sit amet varius. Vestibulum felis ex, sollicitudin mattis nibh a, tristique ultrices dui. Donec vel purus purus. Etiam fringilla
[/accordion_content]
[accordion_content title="Praesent consectetur in lacus ut sollicitudin"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum justo in eleifend lacinia. Donec tincidunt, odio sit amet suscipit pulvinar, ante sem varius erat, in finibus nibh justo et eros.

Aliquam varius purus ut ligula pellentesque convallis. Pellentesque ornare ut sem sit amet varius. Vestibulum felis ex, sollicitudin mattis nibh a, tristique ultrices dui. Donec vel purus purus. Etiam fringilla
[/accordion_content]
[accordion_content title="Etiam rhoncus nisi ac urna euismod mollis"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum justo in eleifend lacinia. Donec tincidunt, odio sit amet suscipit pulvinar, ante sem varius erat, in finibus nibh justo et eros.

Aliquam varius purus ut ligula pellentesque convallis. Pellentesque ornare ut sem sit amet varius. Vestibulum felis ex, sollicitudin mattis nibh a, tristique ultrices dui. Donec vel purus purus. Etiam fringilla
[/accordion_content]
[/accordion][/column_content]

Testimonials Section

  1. Testimonials Section Manage from Appearance->Themes Options-> Section Tab -> Section 7
  2. Shortcode:
    [testimonials]
  1. Enter title, description and set the featured image for client thumbnail
  2. all client thumbnail size should be same in square

Latest from the blog

  1. Shortcode:
    [latest-news showposts="4" comment="show" date="show" author="show"]
  2. latest news post manage from wordpress default posts
  3. Click on add new post. give the title, description and set the featurd image from right side.
  4. latest news comments,date and author can show / hide
  5. Also manage latest news Excerpt length and read more button text from theme options -> basic settings tab

Our Clients Section

  1. Our Clients Section Manage from Appearance->Themes Options-> Section Tab -> Section 8
  2. Shortcode: 
    [client_lists][client image="http://localhost/magneto/wp-content/themes/magneto/images/logo1.jpg" link="#"][client image="http://localhost/magneto/wp-content/themes/magneto/images/logo2.jpg" link="#"][client image="http://localhost/magneto/wp-content/themes/magneto/images/logo3.jpg" link="#"][client image="http://localhost/magneto/wp-content/themes/magneto/images/logo4.jpg" link="#"][client image="http://localhost/magneto/wp-content/themes/magneto/images/logo5.jpg" link="#"][/client_lists]

Page Templates and Sidebars

Page Templates

  • Default Template (the default page template with Right Sidebar)
  • Full Width Page (a page template with one column without a sidebar)
  • Left Sidebar (a page template with left sidebar position)
  • No Sidebar (a page template have space on left and right)
  • Contact Us (Helps in setting up the contact page)

Posts, Categories and Post Formats

Adding category

Review the following article for more information on adding categories: http://codex.wordpress.org/Manage_Categories_SubPanel

  1. Log into your WordPress Administration Panel (Dashboard).
  2. Click the Posts tab.
  3. With that done, click Categories for blog posts.
  4. Type in the name of your new category.
  5. After that, click the Add New Category button.
Click the Publish button.

Creating a Blog post

  1. Log into your WordPress Administration Panel (Dashboard).
  2. Click the Posts tab.
  3. Click the Add New tab.
  4. Type in your post content. For more information on adding posts, please check the following link http://codex.wordpress.org/Posts_Add_New_SubPanel.

Creating a blog page

  1. Set up by using Page Template Blog on any page to show blog posts
  2. Blog Full Width, Blog No Sidebar, Blog Left Sidebar, Blog Right Sidebar blog templates

Set up Blog Sidebar

  1. Go to Appearance->Widgets->Blog Sidebar
  2. Drag and Drop a text widget or any other widget.

Disable Comments

  1. All you need to do is go to that page after Log into WordPress dashboard. Scroll down and check the section: Discussion (if not able to see check above Screen Options to show Comments).
  2. Uncheck the box: Allow Comments and click on Update.
  3. If you want to remove comments sidewide on Pages use this plugin: “Disable Comments”: https://wordpress.org/plugins/disable-comments/

Shortcodes

A shortcode is a powerful content building tool http://codex.wordpress.org/Shortcode. Shortcodes are easy to use. First of all, make sure that the editing mode is set to Visual.

All Shortcodes available here kindly Go to Appearance > Themes Option > Shortcode Tab

Columns

2 Column Content
[column_content type="one_half"]
	Column 1 Content goes here...
[/column_content]

[column_content type="one_half_last"]
	Column 2 Content goes here...
[/column_content]

Description: used to display 2 column content. You can also use type="one_third OR one_fourth OR one_fifth" make sure to add _last for the last column.


3 Column Content
[column_content type="one_third"]
	Column 1 Content goes here...
[/column_content]

[column_content type="one_third"]
	Column 2 Content goes here...
[/column_content]

[column_content type="one_third_last"]
	Column 3 Content goes here...
[/column_content]

Description: used to display 3 column content.


4 Column Content
[column_content type="one_fourth"]
	Column 1 Content goes here...
[/column_content]

[column_content type="one_fourth"]
	Column 2 Content goes here...
[/column_content]

[column_content type="one_fourth"]
	Column 3 Content goes here...
[/column_content]

[column_content type="one_fourth_last"]
	Column 4 Content goes here...
[/column_content]

used to display 4 column content.


Custom classes
[column_content type="one_fifth"]
	Column 1 Content goes here...
[/column_content]

[column_content type="one_fifth"]
	Column 2 Content goes here...
[/column_content]

[column_content type="one_fifth"]
	Column 3 Content goes here...
[/column_content]

[column_content type="one_fifth"]
	Column 4 Content goes here...
[/column_content]

[column_content type="one_fifth_last"]
	Column 5 Content goes here...
[/column_content]

used to display 5 column content.


Elements Shortcodes

Photo Gallery
[photogallery filter="true" show="8"]

Description: used to display filterable photogallery. You can increase or decrease the number of images to display by changing the value of show=""


Testimonials Rotator
[testimonials]

Description: used to display rotating testimonials.


All Testimonials Listing
[testimonials-listing show="10"]

used to display all testimonials without rotation.


Sidebar Testimonials Rotator
[sidebar-testimonials]

used to display testimonials in sidebar.


Client Rotator
[client_lists]
[client image="Enter here client image logo url with https:" link="#"]
[client image="Enter here client image logo url with https:" link="#"]
[client image="Enter here client image logo url with https:" link="#"]
[client image="Enter here client image logo url with https:" link="#"]
[client image="Enter here client image logo url with https:" link="#"]
[/client_lists]

used to display our clients in rotation.


Contact Form
[contactform to_email="test@example.com" title="Contact Form"]

used to display contact form.


Our Team
[our-team show="4"]

used to display team.


Latest News
[latest-news showposts="4" comment="show" date="show" author="show"]

used to display latest news.


Our Skills
[skill title="Coding" percent="90" bgcolor="#65676a"][skill title="Design" percent="70" bgcolor="#65676a"][skill title="Building" percent="55" bgcolor="#65676a"][skill title="SEO" percent="100" bgcolor="#65676a"]

used to display skill bars. You can change the color and percentage.


Custom Button
[button align="center" name="View Gallery" link="#" arrowname="fa-chevron-right"]

used to display custom button.


Search Form
[searchform]

used to display search form.


Social Icons
[social_area]
[social icon="facebook" link="#"]
[social icon="twitter" link="#"]
[social icon="linkedin" link="#"]
[social icon="google-plus" link="#"]
[/social_area]

used to display social icons. You can find more social icons here FontAwesome


Tabs
[tabs]
	[tab title="TAB TITLE 1"]
		TAB CONTENT 1
	[/tab]
	[tab title="TAB TITLE 2"]
		TAB CONTENT 2
	[/tab]
	[tab title="TAB TITLE 3"]
		TAB CONTENT 3
	[/tab]
[/tabs]

used to display tabs.


Toggle Content
[toggle_content title="Toggle Title 1"]
	Toggle content 1...
[/toggle_content]
[toggle_content title="Toggle Title 2"]
	Toggle content 2...
[/toggle_content]
[toggle_content title="Toggle Title 3"]
	Toggle content 3...
[/toggle_content]

used to display toggle content.


Accordion Content
[accordion]
	[accordion_content title="ACCORDION TITLE 1"]
		ACCORDION CONTENT 1
	[/accordion_content]
	[accordion_content title="ACCORDION TITLE 2"]
		ACCORDION CONTENT 2
	[/accordion_content]
	[accordion_content title="ACCORDION TITLE 3"]
		ACCORDION CONTENT 3
	[/accordion_content]
[/accordion]

used to display accordion content.


Custom Widgets

Widgets

Theme Options

The following theme contains the Settings option. These settings allow you to change the theme’s color palette, order of items, turn items on/off and do lots of other things. In order to use these settings, please go to Appearance → Cherry Options.

Basic Settings

  • Upload and set up Logo
  • Change Font Family, font size, font colors, background-image, background color, border colors, Slider controls Colors
  • Change navigation font family and font size
  • Change navigation hover and active color
  • Change Link and link hover color
  • Can manage Blog Single Layout
  • Can manage Woocommerce Page Layout
  • Can Manage Social Icon Style
  • Can Manage Custom Word Lenth

Sections

  • You can add content in the section for homepage.
  • You can show/hide sections
  • Can change background image or color of the section

Homepage Slider

  • You can set slider images upto 10.
  • You can set the inner banner
  • You can manage Slider Effects and Timing
  • You can manage Slide Controllers

Shortcodes

  • All shortcodes available here