SquidMag Documentation

SquidMag – a carefully crafted theme that lets you display your work the clean, fancy way. Some of the theme’s strong points are: unlimited colors, fully responsive, advanced admin panel (easy drag and drop interface), modern metro style look & feel, different portfolio and blog styles, lots of widgets and much more.

If you have any questions, please use the comments from the item's page. ( SakuraPixel ).


Author: SakuraPixel
Contact: SakuraPixel
Author URL: SakuraPixel
Item URL: SakuraPixel/Portfolio
Current Version: 1.1.3
Documentation Version 1.0.0
Created: 2013-05-14
Modified: 2013-06-19

NOTE!
You can change theme's look and feel from Admin > Theme Options.
You can also add or override custom CSS code from Admin > Theme Options > Custom CSS
In order to change theme's graphics please see Photoshop section.

Stylesheets

Main stylesheet files used for this theme, you can find more information opening each file:

File Name Description
main.css Styles for general elements for the template.
header_styles.css Styles for logo and menu.
wp_utils.css Handles blog pagination and comment's style.
templates/dynamic_styles.php This is a PHP file that outputs dynamic CSS code.

JavaScript Files

Main JavaScript files for this theme:

Tag Description
js/squidmag.js The main javascript file, handles the main functions of the theme (ex: menu behavior, hover effects, mobile menu events, etc.). In order to obtain best performance SquidMag makes use of CSS and not as much JavaScript.

You can find the blue icons used within the theme under the images folder.

You can download the PSD file from here: http://www.brankic1979.com/icons/

1. Install Theme

Brief information about how to install your WordPress theme from scratch

Unzip the main files (the file that you have downloaded when you have purchased the theme). The theme installer is 'theme_name'_installer.zip. NOTE! - This is the only file that you should use to install the theme.

Log in to your Wordpress Admin Panel, go to Appearence > Themes > Install Themes > Upload. Upload the zip file that was discussed in the above topic.

Once you have uploaded the theme, it automatically installs to your wordpress. Click the Activate button to activate the theme.
Please read the usage documentation below.

2. General Usage

Information about adding pages and different content type.

× Important!
Reading settings
If you plan to change the "Front page displays" from "Your latest posts" to "A static page (select below)", please only set up "Front page:" and leave "Posts page:" blank. You can add a blog style page by adding pages see @Add Pages.


How to translate

The translation file is located within languages folder (/wp-content/themes/theme_name/languages). You can edit the .po file using POEdit - use the translation field to make replacements.

After you have installed PoEdit double click on the default_textdomain.mo (it should open with Poedit). From the file menu, save file with your language name e.g nl_NL.po. It will generate both a .po and .mo file for your translation. Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

Add Pages

In order to add content to your website first you have to add Pages, pages can be added from the Admin > Pages > Add new.

Page template

Some pages must be assigned a specific page template (ex: Portfolio), regular pages don't.
You can choose a page template while you add a new page from the right menu (@see figure bellow).

NOTE! Click on the image to see the full size

You can set specific options for each page (@see figure bellow).

Video - showcase regular page extra options

Add Menu

Create the menu

After you have added at least one page you can start add it to the website's menu, go to Admin > Appearence > Menus
Add a new menu from the menu panel, save it, than select the created menu from the "Theme Location" panel and save it.

Add pages to the menu

You can add pages to menu from the Pages panel, than you can change menu items labels or order from the menu panel.

NOTE! Click on the image to see the full size

Portfolio pages

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select a 'Portfolio Template' as a Template.
3. Edit page specific settings (ex: colors, background if needed, header, subtitle...).

4. In order to add portfolio items go to Admin > Portfolio > Add new.
5. Portfolio items are grouped into categories. If you use Isotope template each portfolio item must be assigned to at least one category, you can add or assign a category from the right menu.

6. Set a featured image for the item (Featured image will be used as portfolio preview thumbnail).
7. Add Additional images/video to the portfolio item (it will be displayed on the item's page @see video bellow)

8. Each portfolio item has extra settings on it's page, you can edit those to fit your needs (@see video bellow).

9. Add this page to the menu:
Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

See portfolio options - video showcase

Blog pages

1. Create a regular page under pages.
2. From the right panel ('Page Atributes') select a 'Blog Template' as a Template.
3. You can add Blog posts from Admin>Posts>Add new.
4. You can set blog settings from the Theme Options page.
5. Add this page to the menu:
Go to Admin > Appearence > Menus, from the 'Pages panel' select the page you have just created than click 'Add to Menu'.
From the menu panel you can change menu items order (just drag the menu items up/down). For more information about creating the website's menu see Add Menu

See blog options - video showcase

Theme General Options

In order to set theme general options go to Admin > Theme Options.

See theme options - video showcase

Shortcodes

Shortcodes allows you to easily add specific content on your website through the editor.
Ex: The following shortcode will generate a theme specific button: [sk_button]Button Label[/sk_button]
The following shortcodes are available for this theme:

Row
Within the row you should add one half and one third shortcodes.

Usage example:
[sk_row]content here[/sk_row]

One half column

Usage example:
[sk_row]
[one_half]content1[/one_half]
[one_half]content2[/one_half]
[/sk_row]

One third column

Usage example:
[sk_row]
[one_third]content1[/one_third]
[one_third]content2[/one_third]
[one_third]content3[/one_third]
[/sk_row]

Two thirds column

Usage example:
[sk_row]
[one_third]content1[/one_third]
[two_thirds]content2[/two_thirds]
[/sk_row]

Header/Title

Usage example:
[sk_title subtitle="subtitle here"]Title[/sk_title]
or
[sk_title subtitle_color="5AB6E7" title_color="617783" subtitle="subtitle here"]Title[/sk_title]

Phone

Usage example:
[phone tel="+448274892489"]

Email

Usage example:
[email mailto="email@yourdomain.com"]

Address

Usage example:
[address]your address here[/address]

Button

Usage example:
[sk_button href="http://someurl.com"]Button label[/sk_button]
or
[sk_button color="e3a01b" target="_blank" href="http://someurl.com"]Button label[/sk_button]

Youtube

Usage example:
[youtube id="videoID"]

Vimeo

Usage example:
[vimeo id="videoID"]

Soundcloud

Usage example:
[soundcloud url="http://audiourl"]
or
[soundcloud url="http://audiourl" width="100%" height="75" color="ec1c4d"]

Client box

Usage example:

[clientbox]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[client link="http://link" imageurl="http://imagerl"][/client]
[/clientbox]                                                
                                                

Recent posts - spcial

Usage example:
[recent_posts_special]

This shortcode should be added only to regular pages with sidebars.

Recent projects carousel

Usage example:
[recent_projects_carousel]
or
[recent_projects_carousel max="5"]

Horizontal tabs

Usage example:
[horizontal_tabs tab1="Tab 1" tab2="Tab 2"]
[tab id="tab1" active="active"]Tab content 1[/tab]
[tab id="tab2"]Tab content 2 [/tab]
[/horizontal_tabs]

Horizontal line

Usage example:
[sk_horizontal_line]
or
[sk_horizontal_line color="CCCCCC"]