Theme Documentation

*Below instructions assume you have already have WordPress and WordPress e-Commerce plugin installed. If not go here to download WordPress and here to download WordPress e-Commerce Plugin or here to download WordPress WooCommerce Plugin.


Theme Installation Option 1 (Quick Way)

* For first time new installation only. For updates, see Info & Tips section.

  • Download the theme zip file from your Splashing Pixels member dashboard to your computer.
  • Log in to your WordPress Admin Panel (Dashboard)
  • Click on the Appearance tab
  • Click on Themes link
  • Click on the Upload link on top
  • Click on the Browse and select the zip file you downloaded
  • Click on the Install Now button
  • Now click on the Activate link
  • Enjoy, your theme is now ready to go!

Theme Installation Option 2 (Manual Way)

  • Download the theme files from your Splashing Pixels member dashboard to your computer.
  • Unzip the theme folder
  • Connect to your server with a FTP client program (more info about FTP below)
  • With your FTP program navigate to the WordPress theme folder and upload your Splashing Pixels theme folder there.
  • Now log-in into your WordPress
  • Admin Panel (Dashboard)
  • Click on the Appearance tab
  • Click on the Themes link
  • Click on the Activate link underneath the newly uploaded theme
  • Enjoy, your theme is now ready to go!

What is SP Home?

The page SP Home was automatically created for you when you activated the theme. This page template drives the homepage like you see on our demo. It is recommended that you retain this page for your homepage to enable all the homepage features. You can easily just rename the title of “SP Home” to anything else you want in the WordPress dynamic menu. Although it is recommended you keep this as your homepage, if you want a totally different custom homepage of your own, you can easily do that by doing the following:

  • Log in to your WordPress Admin Panel (Dashboard) and go to Settings->Reading
  • Under “Front page displays” section, set the “Front page” dropdown to a custom page you would prefer to show as your homepage.
  • Click “save changes” and you are done.

Frontpage Settings


About FTP

In order to install your theme you’ll need to connect with your server with an FTP client program. FTP client programs allow you to access to your server and upload, download or erase the files of your site. You must obtain the FTP login information from your hosting provider. Here are some FREE FTP client program you can use for this process:

  • PC: Filezilla
  • Mac: Filezilla, Cyberduck, Transmit or Fetch.

Child-Theme

Child Theme is used when you want to customize/modify template files beyond just the CSS. It is used so that any changes you make will not affect the parent theme thus any updates to the theme will not be overwritten. You will see that within the theme zip file you downloaded, there will contain a folder called YOURTHEME-child folder. You simply copy this folder to your WordPress theme folder. Also make sure the main theme folder is also inside the WordPress theme folder. So now you should have 2 folders within the WordPress theme folder, one called YOURTHEME and the other YOURTHEME-child. Now in your WordPress backend, go to Appearances/themes and you should also see two new themes and one is denoted by CHILD. You want to activate that one.

Now you can start making changes to the template files within the child folder. You can copy individual templates from the parent theme folder to your child for modifications. Please note you do not have to copy all of the parent’s CSS styles into your child theme CSS file. You only copy what you want to modify.

Additional information on how child theme works, go here -> WordPress Child Theme Codex
Frontpage Settings


More on WordPress

If you bought this theme you most likely know what WordPress is and perhaps you already have it installed in your server. But in case you are new to WordPress and need some additional help, click here to learn more about WordPress.


Don’t Worry, Be Happy

As soon as you activate your theme you may notice that some things may appear misaligned in the frontend, don’t worry as it’s only because you don’t have any content in it yet. So just follow the rest of this theme instructions and get set up.


Uploading Your Logo

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click on the Theme Settings under your theme name
  • Click on the General Settings tab on top
  • Click on the Header section on the left sidebar
  • From there you can upload your logo or enter a valid URL that points to your logo image. You can also type your shop name and style it with the text options.
  • When you are ready, click Save All.

Uploading Your Favicon

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click on the Theme Settings under your theme name
  • Click on the General Settings tab on top
  • Click on the Header section on the left sidebar
  • Upload your favicon (Favicons need to be 16x16px images with extension .ico / .jpg / .png or .gif
  • When you are ready, click Save All.

If you need a favicon Generator click here.


Setting Up Portfolio

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click on Portfolio Entries to expand the menu
  • Click on Portfolio Categories
  • Create your portfolio category
  • Click on Portfolio Entries and add new to create your portfolio entries
  • Put in tags you want associated with this portfolio entry and these tags will serve as a group
  • Select the portfolio category you want this entry to be in
  • Click on featured image to load your portfolio image
  • Click on save
  • Go to pages and create a page you want associated with your portfolio
  • In the template dropdown, select Portfolio Template
  • Click on save so the portfolio options will appear
  • Scroll down to portfolio options and set your options there

Building Your Navigation Menu

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click on the Appearance tab
  • Click on the Menus link
  • Now you need to activate the Navigation Menu. In this example I’ll create one for the Main Menu (the menu place in the header on the top) and one for the Footer Menu but keep in mind that every theme support a different number of menus. This is just a general direction. Type in a name for the first menu (only you will see this) and click Create Menu.
    Create Menu
  • Now create the second menu by clicking the plus icon (+), type in a name for the second menu and click Create Menu.
    Create Footer Menu
  • In the Theme Locations module, under Top Menu (Primary Menu), select the title of the custom menu you want to activate, then under Secondary Menu select the title of the custom menu you want to activate and click Save.
    Assigning Menu
  • Now that your navigation menu are active you can start adding menu items to them. You have the ability to create menus out of pages, blog categories, tags and so on. From the module on the left just check-mark the items you wish to add to the menu and click Add to MenuAdding Pages to Menu
  • To display some more options to create pages from products categories, product variations, products tags (and more) click the Screen Options drop down at the top right of your screen and check the boxes you wish to use, those modules will appear in the custom menu editor. (We recommend enabling the “Categories” as it will come in handy to build the shop pages out of products categories)
    Menu Screen Options
  • At any time, you can change the order and placement of menu items. Drag and drop the items up and down to change the order of menu items. Drag and drop the items left and right to create sub-menu items.Reordering Menu Items
  • When you are ready, click Save Menu.

For additional information about WordPress Menus, click here.


 

Alternate Homepage Layout

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click on Pages tab
  • Find and edit the page SP Home
  • Click on the Template dropdown in the right hand sidebar
  • Select the layout you want to use. The available homepage layouts are denoted by the template name (SP Home) and suffixed with a version number like (v2)

NOTE: Different layouts have different options. Once you click save after having selected the template layout, you may see new options on the edit page. For example a box for alternate text if the page contains two different areas where you can enter text.


 

Setting Up the Homepage Welcome Text

  • Log in to your WordPress Admin Panel (Dashboard).
  • Click the Pages Tab.
  • Find the SP Home page from the page list (This page is automatically created for you when you activated the theme)
  • Edit the content you wish to display here. (To make the text display in 2 columns like in our demo, refer to using our grid system shortcode)
  • When you are ready, click Update.

Homepage Welcome Text


Footer Widget Configuration

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click on the Theme Settings under your theme name
  • Click on the General Settings tab on top
  • Click on the Widgets section on the left sidebar
  • Select the number of widgets you want to display in your site footer
  • Click Save All
  • Click the Appearance tab
  • Click the Widgets Link
  • Now drag the widget from the Available Widgets or Inactive Widgets area on the left into the Footer Widget modules on the right (if closed click on the triangle on the right side to open the module). When you see a dashed line appear, you can drop the widget into place.
  • Now your selected widgets are available in the footer of your site.

For additional information about the WordPress widgets click here.


Custom Page/Post Layout

With custom page/post layout, you’re able to override the global settings of whether you want to display sidebars or not for that particular page. This gives you unlimited control over the display of your pages. The below image shows a page layout but it works for posts too! You will find these settings in either page or post edit view.
Custom Page Layout


 

Custom Post Excerpt Truncate Feature

What the heck is this!? Ok let me explain. Have you ever wanted to be able to control how much text is displayed on the blog listings per post level? Well this is your chance because we have incorporated this awesome feature that gives you fine grain control over how much text to display. In addition, you can even specify what “denote” character you want to use like ellipsis..etc. If this is not set, all posts will simply use the global settings of the theme. Or you can even elect to turn this feature off and it will not truncate any text. Talk about fine grain control! You will find this setting in the post edit view.
Excerpt Truncate


 

e-Commerce Plugin Installation

  • If you don’t already have a WordPress e-Commerce plugin installed, log in to your WordPress Admin Panel (Dashboard)
  • Click on the Plugin tab
  • Click on the Add New link
  • Search for either “WP e-Commerce” in the search field or “woocommerce” and click the Search Plugins button
  • After, Click the Install Now button
  • Click Activate Plugin
  • The plugin is now ready to be used!

Frontpage Settings


 

Creating a Product Category

This will vary slightly depending on the e-commerce plugin you’re using. We’ll go over each one for you here.


 

Creating a Product

This will vary slightly depending on the e-commerce plugin you’re using. We’ll go over each one for you here.


 

Navigation Menu Tips

1. Changing Menu Item Titles – You can change the label and the hover-over text of menu items independently from the page name itself. To edit a page or category title, click the down arrow to the right of the item.Expand Menu
Once expanded, enter the new label name and any desired hover-over text. The underlying page will always show its name in the original section of the menu item.
Expanded Menu

2. Two Columns Dropdown – If you have many items in a drop-down and it gets too long you can enable a two columns drop-down we created for this purpose. To do so click the Screen Options drop down at the top right of your screen and enable the CSS Classes, now click the down arrow to the right of the parent page that is on top of the drop-down, and in the CSS Classes (optional) text field type the word ”categories”.
Two Column Dropdown
Now your menu items will split in two columns. Remember to always click Save Menu.
Two Column Menu

3. Adding Third Level Dropdown

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click the Appearance Tab
  • Click the Menus link
  • Click on the Main Menu Tab
  • Create the menu items you need
  • Drag the desired menus under the third level. The third level dropdown functions only with regular (non “Two Columns”) dropdown. (Check the Navigation Menu Tips to see how the “Two Columns” dropdown works)
  • When you are ready, click Save Menu

4. Static Menu Button – To leave a menu item static so that even if clicked does not link anywhere (for example the parent menu item of a drop-down) create the item with the Custom Links module and in the URL text field simply type an #.
Static Menu Link


 

Creating One-Column Pages (No Sidebars)

  • Log in to your WordPress Admin Panel (Dashboard).
  • Click the Pages tab
  • Click the Add New link
  • Start filling the page title and content.
  • Select in the Page Attributes module the “One Column Page” to have a full width page (“Default Template” includes the side widgets)One Column Page
  • When you are ready, click Publish.

For additional information about pages, click here.


 

Basic Theme Customization

There may come a time where you want to enter your own CSS styles or to override a theme style. To do so simply follow the steps here.

  • Create a CSS file and name it custom_styles.css
  • Add in the styles you want
  • Upload the newly created style to your theme root folder
  • The theme will automatically use your newly created stylesheet

NOTE: This is the best way to add in your own style as this is upgrade friendly when new versions of your theme is released. And keep in mind that only the styles you add in will be used and the rest will still reference the default style.


 

Advance Theme Customization

Ok so now you think you’ve gotten the hang of things and want to customize your theme even more — beyond just CSS. Now you are all ready to saddle up and play with the big boys or big girls! Well, we have just the thing for you. Our themes are equipped with child-theme capability and ready to rock. Follow the steps below to get your child-theme up and activated.

  • Within the theme zip file you downloaded, you will see a folder named YOURTHEME-child. Copy that folder into your themes folder. So now you should have both the regular parent theme and it’s child theme in the theme folder.
  • Go to your WordPress backend -> Appearance->Themes.
  • In here you should see both the parent theme and it’s child theme. The child theme is denoted by having Child in the title and you can also see it on the screenshot. Go ahead and activate the child theme.

That is it, now you’re ready to rock. For any custom changes you want to make, simply copy out the theme file in question from the parent theme and move it to the child theme folder. Any changes you make to the theme file within the child theme folder will now be protected from any updates of our theme. In addition you can also create custom_styles.css file if you want to make CSS edits. Have fun!


 

SP Auto Paragraphing

SP Auto Paragraphing, otherwise known as the WPAUTOP in WordPress helps you to “tame” your pages. By default WordPress generates linebreak and paragraph tags in your pages and this feature sometimes breaks the layout of your page when you want to utilize HTML code. Therefore we have created this feature to aid you in getting back the control of your pages or posts. Simply scroll down towards the bottom of the page and you should see a section called “Splashing Pixels WP Auto Formatting”. Checked the box if you want to disable the auto formatting being applied by WordPress. Leave it unchecked for the default behavior.
Page AutoP


 

How to Back Up

Before making any update to your theme or framework, always make a full backup of your site in case something goes wrong. There are many options to backing up your site. The recommended way is to consult with your hosting provider to see if they provide daily backups of your site files and of your database. Many times you can find this option in the hosting control panel. If this is not an option, then simply use a FTP program to download all your site files. Please note that some servers have 2000 files limitation so you will need to use another method of download if that is the case as you will not be able to see all your files on the server. Don’t forget to backup the database as well.


 

Exporting Theme Settings

Did you know you can export your theme settings to a safe place? Well you can! By doing so, you can experiment around with different settings and still be able to go back to your last saved settings. But please note you can only go back one previous saved settings. Each time you export, it will be the newest one.
Export Theme Settings


 

Custom Functions

To use your own custom functions, simply create your PHP file and name it custom_functions.php and place it within the theme root folder. The theme will automatically detect this file and include it.


 

Updating Your Theme

Your theme is accompanied by our Splashing Pixels Framework. So most of the time when you update your theme, you can also update your framework at the same time if newer version is available. When there are new versions of your theme or framework available, you will see this notice on the top of the control panel. This does not mean you must update but it is highly recommended because the update may be addressing bug fixes or even security fixes. In addition, new versions may even include new features. But before you do anything, please backup all site files and database. Once that is done, you may head over to your Splashing Pixels Member Dashboard to download your new versions (same place where you downloaded the theme the first time). From there you simply copy all the files contained within the zip file to your site’s WordPress your theme folder via FTP. So if you have a theme named Massimo, then you want FTP all files into that folder.

NOTE for Child Theme Users: Be sure not to forget to copy over the child theme folder within the newly downloaded theme zip file.
Theme Update


 

Updating Your Theme Framework

Your theme is accompanied by our Splashing Pixels Framework. So most of the time when you update your theme, you can also update your framework at the same time if newer version is available. When there are new versions of your theme or framework available, you will see this notice on the top of the control panel. This does not mean you must upgrade but it is highly recommended. New versions may accompany with new fixes or new features that your current files do not have. But before you do anything, please backup all site files and database. Once that is done, you may head over to your Splashing Pixels Member Dashboard to download your new versions. If you are updating your framework only, you can simply extract the sp-framework folder from the zip file and upload that directly to your site’s theme folder via FTP.
Framework Update


 

Flushing Permalinks

Sometimes when dealing with many changes to your site, permalinks become unsync’d. And symptoms of that would be finding page not found errors like 404 errors. To remedy this, you have to flush your permalinks so it is in sync again. To do so, following the below procedure.

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click the Settings tab
  • Then click on Settings link
  • Click on Save Changes two times. Yes twice!

 

Add Menu Icons

  • Log in to your WordPress Admin Panel (Dashboard)
  • Click the Appearance Tab
  • Click the Menus link
  • Click on the Main Menu Tab
  • Click the Screen Options drop down at the top right of your screen and enable the CSS Classes
  • Click the down arrow to the right of the menu item you want and in the CSS Classes (optional) text field type the class name like ”arrow”
  • When you are ready, click Save Menu

You can find the list of class names for the icons on our demo site under “Menu Icons”.


 

FAQ

Help! Every page is going to page not found!

Go to WordPress settings->permalinks and click on save TWICE.

Product pages don’t seem to be using the theme style.

Go to WordPress settings->store->presentation tab and on the right hand side, click on flush theme cache.

I don’t see additional images in quickview or in single product view.

First make sure you have Gold Cart plugin installed and activated. Also make sure you have entered your API key and username for the plugin in WordPress dashboard->store upgrades. Then make sure you have turned on “show thumbnail gallery”.

None of the images on the site are displaying.

First check to see what permission your timthumb cache folder is set to. Go to your theme folder->sp-framework->timthumb->cache. That folder needs to be set to either 755 or 777 depending on your host. If trying both and it does not work then check with your host if Timthumb script is allowed by default. If no, ask them to put it on whitelist. After doing that if it still doesn’t work, ask your host if GD library is installed on your PHP. Also note that Timthumb script will have trouble finding your images if you’re under a temporary site url such as http://hostingserver.com/~username. If you fall under this category, then all you need to do is get a parked domain and point your domain nameservers to your hosting account and have them set it to this parked domain temporarily so you can work on the site.

How do I update the theme and framework?

Go to your Splashing Pixels member dashboard by logging in. Download the latest version of your theme. Be sure to backup your existing site files and database prior to updating. It is also best practice to update it on a test/staging server prior to your live site. Unzip the newly downloaded zip file which now you should see your theme folder. Within this folder consists of the framework as well. Using a FTP program login to your site via FTP. Put the contents of the theme folder to your current site’s theme folder. So the path should like similar to this /public_html/wp-content/themes/yourtheme/.

How do I customize the CSS without it being overwritten on updates?

If you’re just manipulating the CSS, simply create a file called custom_styles.css and place this file inside the theme folder root level. The theme will know to look into this file for any styles you may wish to add or change.

How come some product or blog post images are displaying an icon with a shopping basket that says no image available?

When you see this image, that means you have not set an image for the product or featured image for the blog post.

Help! I seem to lost all the image size settings in the presentation tab.

First try going to the theme options->general settings->reset settings->reset all settings. If this does not reset all image sizes, then you can manually input them by opening the file config.xml within your theme folder and scrolling all the way down to the bottom and you should see the default image sizes for the whole theme.

I setup a category but when I click on it to see the products, it goes somewhere else!

WordPress is very sensitive to slugs when using permalinks. So be sure you’re NOT naming for example a blog category Products and also a product category named Products. By doing this WordPress will get confused and not display as expected. Don’t confuse slugs with titles. Titles can have the same name but not slugs. Slugs is what you see in the permalink URL in the address bar. In addition, make sure there are no duplicates even if they are in the trash. You must also clear your trash for this to work.

What the heck is this SP HOME page your theme created?

SP HOME is what drives your theme homepage and is IMPORTANT so please don’t delete this. Also make sure in your settings->reading you have Frontpage displays set to SP HOME. Don’t worry too much about the title SP HOME, you can name this whatever you want. You may ask why this was not named HOME from the beginning. That’s because we are forward thinking people and considered and did not want to inadvertently delete a page in your site that is already named HOME when you installed our theme.

I am using WPEC plugin and I am stuck on a certain view settings, what gives?

First don’t panic, let me explain. Ok there are 3 views, list/default/grid…That is what WPEC plugin names them but it’s actually kind of confusing. The icon switcher is for ONLY default/grid but take note, default is actually called list in the icon switcher. List in the system of WPEC is more for wholesalers…90% of people will only use default/grid. Whatever you set up your settings to be IS what people will see by default. Once they click on the switcher, it will remember each user’s settings from page to page so it is very likely you see something different from the next guy. But just know what you set in the backend settings is the default of what they see first if they have never been to your site.

What is this SP Truncate box in my post settings?

This truncate function allows you to customize how many characters you want to display in the excerpt view/blog list view. Along with that, you can choose to set a denote character to hint there are more information and to set whether you want to cut the characters exactly or to preserve whole word. This is really an awesome feature as you can set different levels of text post by post control!

My theme settings does not seem to be saving!

First check that when you click on the SAVE button, you see the spinning logo and a checkmark indicating your changes have been saved. If you do see the spinning logo and checkmark but it still doesn’t save, check if you have other conflicting plugins by deactivating one by one to see which one is the culprit. If you do not see the checkmark but instead see the no can do sign, then try logging out and logging back in as this will flush your authentication.

How come my images are blurry!?

First check the settings within the theme options->global image options. This area sets the quality of the images being shown amount many other options. If after checking these settings properly and you’re still getting blurry images, it could mean your image resolution size is too small. A general size to have for your images before uploading is around 800×800. You don’t want it to small or too large.


Shortcodes

Have a look here