Theme documentation

1. Theme installation

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex.

You have two options for uploading the theme - to use FTP application or upload tool in WordPress admin panel. Once you have uploaded the theme you must activate it.

1.1 Upload theme via FTP application

  • First you must unzip the file you downloaded from Themeforest.
  • There you will find a file named planetshine-magellan.zip. Now unzip this file.
  • You should see a folder named planetshine-magellan
  • Upload this folder to /wp-content/themes/ location in your WordPress installation.

1.2 Upload theme via WordPress admin panel

  • Open your WordPress admin panel, go to Appearance and choose Add New
  • Click Upload Theme and choose the planetshine-magellan.zip You can find the planetshine-magellan.zip file by un-zipping the file you downloaded from ThemeForest.

Upload only the planetshine-magellan.zip file. If you have a "missing stylesheet" issue, then you have not un-zipped the original file and you are uploading the wrong one!

If you are seeing a "Are you sure you want to do this?" warning, then this usually means, that the theme file is too large for your server to upload using wp-admin. In this case you must use the FTP method instead.

1.3 Activation

Once upload has finished, activate your theme in Appearance / Themes in WordPress admin panel.

1.4 Install required plugins

Magellan relies on number of plugins for various theme features. Without out them you will not be able to use many of the theme features. You absolutely must install Planetshine Magellan Theme Extension plugin. This plugin powers a lof of the key features you see in the demo. See Installing required plugins.

1.5 Set up Home & Blog pages or import full theme demo

If you wish to import a full theme demo then follow the instructions here.

If you only wish to only have home and blog pages setup, then you can use the dialog window that should be visible on top your wp-admin offering this. It will take you to a page that allows to pick a version of homepage and install it. Also you will get the option to install blog, contact and some other pages. You can later edit home and blog page settings under Magellan > Visual editor > Static Front page. If you install these pages, they will NOT be overwritten by full demo import.

Warning: You should only import content after all the required plugins are installed and activated

1.6 Regenerate post thumbnails

If you are installing the theme on a WordPress site where you already have posts and pictures it is bly advised that you regenerate thumbnails! That can be achieved with Regenerate Thumbnails plugin which is already bundled with the theme. Once you have activated the plugin, go to Tools / Regenerate thumbnails in WordPress admin and run the regeneration process.

2. Installing required plugins

Magellan relies on number of plugins for various theme features. Some are required - without them important theme features will not be available. For example, you need Planetshine Magellan Theme Extension, Visual Composer to use static home page or Attachments in order to have the galleries. Other plugins are just recommended - they provide extra functionality that the theme supports, but it is in no way essential. For example, if you don't need a shop, then you can avoid installing WooCommerce.

Installing plugins is easy. Right after you activated the theme a prompt will appear asking you do this. Click the Begin installing plugins link (see images below).

Some of the plugins, like Visual Composer and Slider Revolution might offer you the option of registering them. This is not required to use them and you have to dismiss these options because plugins that where acquired via bundles can't be activated. This feature is reserved only for plugins that where bought separately. Regardless this will have no effect on the plugins functionality and you will be able to use all of the features.

3. Check theme status

Once you have installed Planetshine Magellan Theme Extension plugin you will get access to theme admin which includes the Status Page. It will help to ensure that Magellan will work great on your server

It will show you if your Wordpress and hosting are set up appropriately for running Magellan. Status page can be accessed by opening Magellan Theme Settings and selecting Status & Import.

3.1 Troubleshooting status page issues

There are 7 things that are checked in the status page:

3.1.1 Install and activate theme
If you see this message, you have already succeeded. Yay!

3.1.2 Install required plugins
See Installing required plugins.

3.1.3 Import or setup home and blog pages
See Creating homepage and blog pages and Importing theme demo.

3.1.4 Resize thumbnails for pre-existing posts
See Resize thumbnails for pre-existing posts.

3.1.5 Make the uploads directory writable
See Changing File Permissions.

3.1.6 Enable PHP file_put_contents and file_get_contents functions
To achieve this you have to edit your servers php.ini file. Chances are that this can be only done by your hosting administrator so you should contact them and ask for enable these two functions. For advanced users - this thread details how to disable functions in PHP. Enabling them is the exact reverse process.

3.1.7 Set PHP allocated memory limit to at least 128mb
This article details approaches that can be taken to achieve this: Increasing the WordPress Memory Limit.

4. Theme settings

Open admin section for your WordPress blog. You can find it by typing your domain name + /wp-admin/. Once you have opened the admin, you have to click on Magellan at the top left corner of screen. There you will find theme settings.

There are 8 sections in the theme settings:

  • General settings add logo, setup themes header, footer blog, post etc. settings.
  • Visual editor edit visual settings. This takes you to WordPress theme customiser that allows you to change various colors, fonts and images and see the results immediately.
  • Register Theme allows you to insert all the necessary info to enable theme updates via WordPress admin
  • Status & Import see the theme setup checklist; import full theme demo or just couple of pages and load style presets.
  • Advertisement create and manage banners and google ads.
  • Sidebar Manager create new sidebars and assign them to different locations.
  • Google Fonts select which Google Fonts should be made available for use in Visual Editor
  • Help & Support view theme documentation and Planetshine support contact info.

Go to theme settings and open the General tab. There you will find section called "Logo". It offers you two types of logos - textual and image.

If you select Image logo you will see an upload field and alt text field. Click on the "browse" button and select your logo from your computer. The theme will offer you the option to restrict the image width by entering a size value in pixels. Use that if you logo is too large. Click save on the bottom of page and that's it! You should also provide an ALT text which will be show if your image ever fails to load on the front page.

If you select a Textual logo the theme will display your site name as the logo. You also have the option to display a colorful label above it that contains the name of currently open post category.

5. Importing theme demo

If you are starting a brand new WordPress site you can take benefit of Magellan demo import feature. What this does it creates pages, posts, product menus etc. that you can see in the theme demo site. This can simplify taking the first steps towards customising the site to your needs.

To import theme demo go to Magellan / Status & Import / Demo Import in your sites wp-admin. Pick one of the demos and click import.

Please make sure you have installed and activated all the required plugins before importing the demo content. Also it's recommended to complete the WooCommerce setup wizard.

Once you have imported the demo you can also try any of the other ones. All you have to do is uninstall the current demo and pick another one.

Warning: uninstalling a demo will delete ALL the content that was created during the install even if you modified it afterwards.

An alternative for importing demo content is to use WordPress XML files. We have provided you with sample content that you can import in your wordpress site. It is located in the folder you downloaded from Themeforest. There you will find 4 files - everything.xml, pages.xml, posts.xml and galleries.xml. Everything.xml will hold all of the posts, pages, images, woocommerce products etc. The other 3 will just contain posts, pages and galleries as indicated by their name. You can import it using wordpress admin. Go to Tools > Import. From the list select "Wordpress". Choose the aforementioned file and upload it.

Sample XML content method will not produce a fully working demo page since it only inserts the content but does not set up things like menus, sidebars, colors etc. They will also not contain any images since those can't be supplied due to licensing reasons.

7. Setting up homepage

If you used the auto page install feature after activating the theme, Magellan will have created and set up a homepage for you. This page will be called Homepage and you can find it and edit it under Pages in your wp-admin. To create a homepage like the one seen in theme demo, Visual Composer plugin must be enabled!

Homepage layout is made with Visual Composer plugin (also included with Magellan for free, but normally has to be bought seperately). It's a extremely powerful tool that allows you to build custom layouts by dragging and dropping elements. If you imported the demo content the theme will have already placed everything for you, but you can edit it easily using Visual Composer (learn more about it by checking out the Visual Composer documentation.)

Always make sure that you have selected the "Page Builder Layout" template for the page that you are building with Visual Composer

7.1 Homepage Visual Composer Blocks

This section of documentation will give examples of all the homepage Visual Composer blocks that are available in this theme. To add an item to homepage click Visual Composer "Add New Element" button (looks like large + sign). This will open a popup with all the composer elements. Select tab "Magellan". You will see the following element selection dialog window.

Home slider

See section about Homepage slider for detailed description.

Post category slider

Full width homepage element. Select post categories to show. Uses Ajax to switch between visible categories

Post category with large featured item

2/3 width recommended. This element has a large featured post on the left side and scrollable post list on the right.

Post list with heading

Large featured post followed by list of smaller posts. The featured post can be set by checking "This post is featured" in post settings.

Large post slider

Large slider with 2 columns. 2/3 width recommended.

Latest photo galleries

List of latest photo galleries. 2/3 width recommended.

Compact post columns

Columns with post titles and small thumbnails. 2/3 width recommended.

Slider that contains the current popular post titles

Exclusive Post

Embed a specially styled singe post block.

Post list with large items (text below image)

Blog like post list with large items that have text below image. 1/3 to 2/3 width recommended.

Post list with large items (text on side)

Blog like post list with large items that have text on side. 1/3 to 2/3 width recommended

Title block

Insert a Magellan styled title in page

Always make sure that you have selected the "page builder layout" template for the page that you are building with Visual Composer

7.2 Setting Visual Composer elements to full screen width

By default all Visual Composer rows will be limited in width to 1170px - the size of content box. To have them be as wide as browser window you can add the CSS class "full-width".

7.3 Homepage slider

Magellan has it's own purpose built slider that you can use in homepage (alternatively you can use revolution slider). The slider can easily be setup using Visual Composer. If you imported demo content then you already should have the basic slider elements in place and now you just have to set correct post IDs. If you are starting from empty page then you first have to click Visual Composer "Add New Element" button (looks like large + sign). This will open a popup with all the composer elements. Select tab "Magellan" and pick "Homepage slider".

This will add a new block to the homepage. This block is the slider. Inside it you can now place the actual slides. To do that click on the plus icon in the middle of the slider element.

In the dialog window that opens select "Home slider item".

Insert the ID of the post you want to link to this slide item and select image. You can find the ID of a post, by opening it's edit page in wp-admin and scrolling to the bottom of it. There will find a bolded text with something like this "Post ID: 283"

Click the save button and you have successfully created slider with one slide. Now you can use the same process for adding more slides.

8. Setting up and using Ads

Magellan provides all the necessary features for displaying custom banner ads and google ads on your site. Ads can be managed by going to Magellan theme settings page in wp-admin, then clicking Advertisement in the sidebar. Magellan supports 4 different ad sizes - 970x90px, 728x90px, 468x60px and 300x250px. For each of the sizes you can create as many ads as you want - there are no limits.

Advertisement section has two sub sections - Manage and Locations. The Manage section is used to create, update and delete ads. Locations section allows you to assign these ads to any one of the predefined theme locations. On top of that you can also insert banners ads in sidebars using widgets, or in pages using visual composer content blocks made especially for the Magellan.

Manage section is divided in sub sections according to ad sizes. For each of the ad sizes there is an existing default one that you can edit right away. You enable/disable individual ads, give them titles (useful when managing ad locations), upload banner image and set banner link. If you wish to use Google ad instead of regular banner, select "Type of ad" to be Google AdSense and then paste the Google AdSense code in the text field.

Location section list all the supported locations for ads in the theme. You can enable the location by checking it in. After that you also have to enable ads in by checking them in as well. If you have multiple ads check in a single location, they will be randomly rotated.

Below each banner size there is button Add new image banner or Google AdSense. Click this to add a new ad for this size.

The Ads section will not work if you have Ad Blocking plugins installed on your browser

Alternatively you can also include ads into pages using Visual Composer blocks provided by the theme.

9. Galleries

Magellan offers the possibility to create photo galleries. That can be achieved by going to Galleries section in wp-admin and clicking "Add new" button at the top of the page

First set a title and description just like you would for any regular post or page. Then scroll down to Gallery section right below the description text field. Note: plugin Attachments has to be installed and activated for this to work!

Click the Attach images button and add any number of images either by selecting them from your WordPress media library or uploading them from your computer. Once that's done you can adjust the order of images and add captions where necessary.

If you have enabled "pretty" wordpress permalinks, then you can view the gallery by going to http:// YOUR_SITE_URL + /gallery/.

10. Layout

This theme has a Responsive layout with one or two columns (varies for different sections). It's based on Bootstrap 3.3.5 and it's markup is structured according to bootstrap best practices. This theme has 4 different layout modes:

  • Large (for 1170px or wider screens)
  • Medium (for 970px to 1170px screens)
  • Tablet (for 768px to 970px screens)
  • Mobile (for screens smaller than 768px)

Adjust your browser window size to explore them closer. Magellan uses lots of HTML5 and CSS3 features, so it will NOT support legacy browsers such as Internet Explorer 6, 7 & 8.

11. LESS & CSS files

Magellan stylesheets are created using LESS technology. LESS files are located in /theme/assets/less folder. After editing LESS files theme will automatically compile them in one CSS file. There is also a /theme/assets/css folder, but these files are only used as a backup in cases where because of problems with server configuration it's impossible to compile LESS.

The main LESS file is magellan.less which includes all the other files. All the color variables are defined in variables.less however by default they are commented out because the theme will inject live color settings in the LESS file right from the Visual Editor. Specific sections of theme have their separate LESS files, for example, magellan-bbpress.less, magellan-woocommerce.less and planetshine-buddypress.less.

If you wish to edit the themes styling, it's best if you do this using WordPress child theme. That way you will simplify updating the theme in future.

12. Javascript files

All the Javascript files are located in theme/assets/js/ folder. This theme uses jQuery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in theme/assets/js/theme.js. Code that handles behaviour of the mega menu is located in theme/assets/js/planetshine-mega-menu.js.

It is comparatively easy to find what you need to edit in theme.js. Just open the file and look for init function. It initialises all other functions which you can recognise by the name.

All of the third party Javascript files used by the theme are located in theme/assets/js/vendor/ folder. These you should avoid modifying in any way.

13. Translating the theme

Magellan can be translated using the same tools and methods as the rest of WordPress - using POT language files. The language file for this theme can be found in languages folder in theme files. There you will find a file called default.pot

Once you have the POT file, you’ll need to open it in a program like POEdit, and translate the English language into your preferred language. When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your country and language code. For example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo. When that’s done, simply upload the files to your themes languages folder.

Finally head over to Settings > General in wp-admin and select your desired language using the "Site Language" option and save the changes.

14. Setting up newsletter

We are using MailChimp to configure our newsletter form, but there are a lot of services and plugins you can use. Follow these steps:

  • Go to http://mailchimp.com
  • Register and account if you do not already have one, and log in.
  • Go to section "lists" and click on "create list"
  • Fill in all nedded fields and click on Save at the bottom of the page.

  • Now open your new list and select the "Signup forms" tab. Click on "Embeded forms".
  • In the page that opens, click on "Naked" tab.

  • Copy the code found at the bottom of page and paste it into text editor like notepad.
  • In the text, find a line that' similar to this one "<form action="http://planetshine.us7.list-manage1.com/subscribe/post?u=c908dbcccecb685633e7e0458&id=314fef872f">"
  • Copy the action value (it will be similar, but NOT the same as in the example above). To clarify. Action value is only this part: http://planetshine.us7.list-manage1.com/subscribe/post?u=c908dbcccecb685633e7e0458&id=314fef872f
  • Now open your wp-admin, and go to Appearance > Widgets. Insert "Magellan Newsletter & Social Networks" into "Default" sidebar.
  • Now move on to Theme settings and open "Footer" section. Paste the form action value into the "Newsletter form action" field.
  • Select form action value "Post"
  • Enter "email field name" value "EMAIL"
  • Click save

15. Updating the theme and bundled plugins

15.1 Automatic theme update

To update the theme automatically, follow these steps:

  • Head over to Magellan / Register Theme in your wp-admin
  • Follow the instructions there to register your theme
  • Go to Appearance / Themes and update your theme by clicking the update link

15.2 Updating theme manually

To update the theme, follow these steps:

  • Head over to Appearance / Themes in your wp-admin
  • Activate a different theme (for example twenty twelve)
  • Delete the current version of Magellan
  • Download the update from Themeforest and get the planetshine-magellan.zip file. If you downloaded the “All Files & documentation” from Themeforest, then you need to unzip the archive file you received, the planetshine-magellan.zip will be inside of it
  • Click on Install themes and upload the planetshine-magellan.zip file.
  • Activate it and install updates for bundled plugins where necessary.

If you get a “Are You Sure You Want To Do This” message when installing update, it means you have an upload file size limit. Install the theme via FTP if this happens, or increase the PHP file update size limit.

15.3 Updating plugins

WooCommerce, Contact Form 7 and other regular plugins can be updated using WP plugin section. However the premium plugins - Revolution Slider, Visual Composer, Ultimate Addons and Planetshine Magellan Theme Extension can only be updated together with the theme. After installing a theme update you will be presented with a notification message offering to install the updates. It will be very similar to the one you used to install the plugins when you first activated the theme.

See Installing required plugins.

Thank you so much for purchasing this theme!