Pinmaister

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

TIP: More info on how to download and install a theme here.

Image Sizes

The minimum recommended image sizes for Pinmaister are:

  • Post thumbnail: 360x450px
  • Default featured image: 817px wide, no height requirement in place
  • Narrow featured image: 750px wide, no height requirement in place
  • Fullwidth featured image: 1140px wide, no height requirement in place
  • Masonry thumbnail: 360px wide, no height requirement in place
  • Header image: 1600x255px
  • Slider image: 1600x860px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • User Submitted Posts: this plugin will allow your users to submit content to your site, you can then approve it to have it appear live.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Pinmaister by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the pinmaister_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. add categories to the post,
  5. add any tags  you might need,
  6. and move to the Post Options metabox.

 

pm_new_post

In the Post Options metabox, under the Appearance tab you can select whether you want to show the post’s featured image on the single view and in the Header tab you can set and configure the post’s header image.

post_options

Once you are done click the Publish button to publish your post.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

 

pinmaister_customizer

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo, footer logo and site icon.

  • Layout Options

    Here you can configure the length of the automatic excerpt, choose between numbered and older/newer pagination, select between 3 and 4 columns for the post listing page layout and toggle the masonry effect.

  • Posts Options

    Here you can toggle various aspects of the single post’s appearance, such as dates, categories, excerpt, comment & like count, featured image, tags, social sharing buttons, author box, related posts and comments.

  • Appearance

    Under the appearance tab you will find four panels. The Global Colors which will help you fine tune the color scheme of the main content areas, the Header panel which allows you to set the global header image and modify the colors of the header elements, the Sidebar Colors which will allow you to customize colors for sidebars and the Typography tab which allows you to modify heading sizes.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Titles

    Set the section title for the blog, search, and 404 pages. Additionaly modify the title of the related posts section and author box.

  • Menus

    Here you can create and assign your main menu to the theme. To learn more about menu creation check out the Codex’s menu user guide here.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features eight sidebars. The main sidebar, the pages sidebar, the homepage sidebar, the prefooter sidebar and four footer ones.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab you can select the User submission page, set the footer text, add custom CSS and set your Google Analytics Tracking ID.

Theme pages

The contact page

For the contact page on the theme’s demo we used a page with the Narrow Page template applied to it and pasted in a contact form created with the Contact Form 7 plugin.

User submission page

To accept user submissions for content start by installing and activating the User Submitted Posts plugin. Next create a new page, apply to it the Narrow Page template (if you want it to look like the one on the theme’s demo) and in its content area paste the following shortcode:

[user-submitted-posts]

Publish the page and make sure you have it set as your User submission page under Customize > Other. Now users can click the sign that appears on the right of the menu bar to get to the submission page and send you their content.

The Home Page

To create a homepage go to Pages > Add New and create a new page using the Homepage Template. Then go to Customize > Static Front Page and set the newly created page to be your static front page. The page is fully widgetized so you need to navigate to Customize > Widgets and add the widgets of your choice to the Homepage sidebar.

Recreating the demo’s homepage layout

The entire front page template is widgetized to provide you with maximum flexibility. Below we list the widgets used on the demo’s home page.

  • Theme – Slider: This widget creates the slider. You can either select to display posts from a certain category or hand pick your posts by placing their IDs in the corresponding box. Set the time out and animation speed and save your slider.
  • Theme – Post type items: This widget displays four hand picked posts in a four column grid layout.
  • Theme – Latest Posts: This widgets displays the latest six posts from a pre-set post category in a three columned carousel layout.
  • Theme – Newsletter: The widget contains an HTML form for newsletter submissions.
  • Theme – Latest Posts: This widgets displays the latest eightposts from a pre-set post category in a four columned grid layout.
  • Theme – Instagram (homepage): This widget displays the latest 8 images from a preselected Instagram account.

Widgets

Along with WordPress’s widgets we have created 7 custom ones. They are really simple and they let you display various important info around the site.

pinmaister_widgets

 

You will find a small description in each widget detailing its usage.

Please note that the Theme Instagram (homepage) widget will only appear if the WP Instagram Widget plugin is installed and activated.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Palermo

 Theme installation

To install the theme, access your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

TIP: Visual instructions can be found here

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The recommended image sizes for the Palermo theme are:

  • Post Thumbnail: 630x350px
  • Listing Thumb: 400x400px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • CSSIgniter Shortcodes you can use our custom made shortcode plugin to help you create a variety of layouts and elements on your site. Instructions can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • Ninja Forms  this is an alternative to Contact Form 7 and it has been used on the theme’s demo to create the form found on the booking page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.

Importing sample content

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assign the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Palermo by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the palermo_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Creating theme pages

Let’s start by adding pages you are going to need. Go to Pages > Add New and create the following pages:

  1. Home this will serve as your homepage if you want to recreated the demo’s appearance. Create the page and in the Page Options metabox, disable the appearance of the content in the Options tab and in the Background one set MaxSlider Slideshow as the background type and select the slideshow you have created for the homepage. For info on how to create slideshows using MaxSlider please have a look here.
    home_options
  2. Blog this will be your posts page. Just create it, no further action needed.
  3. Contact here you can place your contact form which you will create using the Contact Form 7 plugin or Ninja Forms. On the demo we have used the CSSIgniter Shortcodes plugin to create the map and Contact Form 7 to create the contact form.
  4. Booking your booking form can be placed here. On the demo we have used a form created with the Ninja Forms plugin.
  5. Room Listing this page will display your rooms. Apply the Rooms Listing template from the page attributes panel and proceed to the Room Listing Options panel to select which room categories to display (if not all), set whether or not to display only rooms on offer, and finally the number of rooms per page.
    room_listing_options

(TIP, all page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

ReadingSettings

2) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the content in the editor, upload a featured image by clicking “Set featured image” on the Featured Image panel, add a category and/or tag to the post, if you so desire, from the respective panels and publish the post by clicking “Publish”.

3) Adding Rooms

To create a new room item go to Rooms > new Room, set the room’s name as a title, enter relevant information in the content editor, and set a featured image. Then move to the Room Settings panel.

room_options

  • In the Appearance tab you can set a subtitle for the room if you wish and toggle the room’s featured image.
  • In the Amenities tab you can fill in all room amenities, set the general amenities title, and add amenities by typing in the box and clicking Add New to add more. Once done paste the [room-amenities] shortcode in the content area to display them.
  • In the Pricing tab you can fill in the room’s price and toggle the offer banner. Make sure you include currency symbols in the box. You can also use the strong tag in the box to make the price appear bolder.
  • Finally in the Background tab you can select what sort of background the room will display. This can be the default set in the customizer, a single color, a MaxSlider slideshow or a YouTube/Vimeo video.

4) Creating your menu

Now that your content is in place, you need to set up the menu.  Go to Appearance > Menus and create your menu. Customize it by adding menu items and then go to “Manage Locations”, to set it as  your main menu.

(TIP, for more info on creating and managing menus, please read the WordPress Menu User Guide here)

5) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

palermo_customizer

Let’s take a look at the options each tab gives you.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon. You can also toggle the title, tagline and modify the logo’s padding.

  • Layout Options

    Here  you can configure the length of the automatic excerpt and choose between numbered and older/newer pagination.

  • Posts Options

    Here you can toggle the date, categories, featured image, tags and comments for single posts.

  • Appearance

    In this tab you can modify items related to Palermo’s appearance.
    palermo_appearance

    • In the Global Background tab you can set a default background color or image. You can also chose to set a MaxSlider slideshow or YouTube/Vimeo video as your default background.
    • In the Sidebar tab you can customize the sidebar’s background and color scheme.
    • In the Content tab you can set a background for your content and modify content colors such as text, link, border and more.
    • In the Typography tab you can set font sizes for all headings, body text, widget titles and widget content. You can also chose to make all titles uppercase.
  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Titles

    This tab allows you to modify the titles for the blog, search results page and 404 page.

  • Menus

    Here you can create and assing menus to the theme.  To learn more about menu creation check out the Codex’s menu user guide here.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features six sidebars, the blog, the homepage, three footer sidebars and the header ad sidebar.

  • Static Front Page

    Use this tab to make the Home page your static front page so you can recreate the demo’s layout.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Additionally you can place your Google Analytics ID.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Mavika

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. WORDPRESS In this folder you will find the zip file which contains the theme, called “mavika.zip” also you will find the child theme called mavika_child.zip and finally, a subfolder called sample content which contains the sample content files, these are the mavika.xml and mavika.wie

Installing the theme

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Add New button.
add_new
Click upload and Choose File. Select the mavika.zip located in the WORDPRESS folder and click Install.
upload_theme

mavika_install
Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and congratulations! You just installed the Mavika theme!

mavika_activate

 

Next, follow the exact same procedure to install the child theme. Upload the mavika_child.zip, install it and activate it. This is very important if you plan on making any changes to the theme’s templates since it will help you keep these changes across updates. More info about child themes you can find here.

Notice: In order to setup the theme as seen on our preview you need to keep reading. Even If you are an experienced WordPress theme user do read this documentation in order to understand our approach on various things around the theme.

Installing WooCommerce

To enable eCommerce functionality for your website you need to install and activate the WooCommerce plugin by WooThemes. You can download the plugin free of charge from the WordPress Plugin Repository.

Go to Plugins > Add New and search for WooCommerce. Once the results come back, click the Install Now button.

wc_install

Once the installation is finished, click the Activate button to activate the plugin.

wc_activate

For detailed installation and usage instructions please refer to the plugin’s documentation.

Once you have installed and activated the WooCommerce plugin please install its pages by clicking on the button that WooCommerce provides on its banner. This will likely create a duplicate of some pages along with the pages install by the sample content but its a needed step. You can delete the old pages that came with the sample content or use them instead by going to WooCommerce > Settings > Pages and assign them anew.

Installing Visual Composer

The theme comes bundled with the very popular Visual Composer plugin to help you create awesome layouts. To install the plugin navigate to Plugins > Add New and click the Upload Plugin button.

upload_plugin

Importing sample content

To get the sample content file go to the /wordpress/sample content/ folder of the zip file. Additionally you can click the link in the notice that will appear on your dashboard immediately after activating the theme.
download_sample
Extract the zip file you downloaded to get the sample content & widgets files.

Importing the sample content is easy. Go to Tools > Import and select the last option called WordPress.

If the Importer is not installed, a popup window will appear asking you to install it. Click the Install button on the right and click Activate Plugin & Run Importer

Click Browse, select the mavika.xml file you extracted earlier and click Upload file and import. It will ask you to import one or more authors. Just assign the posts from all of them to your existing user account by selecting it from the drop down menu. Check the Download and import file attachments. Click Submit.

NOTE 1: This will take a while. It could even take minutes because of importing all the placeholder images etc. So if you are out of coffee, go for a re-fill :)

NOTE 2: Demo Images are under copyright so you can’t use them.

NOTE 3: You need to set your permalinks at Settings > Permalinks > “Post name”
option.

NOTE 4: If you get a SERVER TIME OUT you need to contact your hosting provider. It’s not a fault with the theme :) more info here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the mavika_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Adding a new post

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. add a category and/or tag to the post,
  5. once finished click the Publish button to publish the post.

new_post

Creating a page for your posts

To setup your blog page you can go to Pages > Add New and create a page named Blog. Then navigate to Settings > Reading and set that page as your posts page.

settings_reading

Now you can add that page to your menu to give your visitors easy access to all your posts.

Adding Products

Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.

new_product

  1. First we need to fill in the product title,
  2. next we will add the product’s description,
  3. click Set Product Image to add the product’s featured image and Add product gallery images to upload additional photos for the product,
  4. add categories and tags to your product to make filtering easier,
  5. in the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
  6. in the Product Appearance metabox you can disable the zoom on product thumbnails and add a video to the product’s gallery if you have one,
  7. fill in a short product description and finally
  8. Publish the product.

This is a brief overview of adding products to your site, the product post type is a complex one, if you haven’t worked with it before please consider reading the official documentation on how to add and manage products here.

Setup the shop page

Once you install and activate WooCommerce all the default pages will be created, including the shop listing page. To make sure this was properly configured go to WooCommerce > Settings > Products > Display and check if the Shop page is selected in the Shop Page drop down.

wp_shop_page

If the drop down is empty, locate the Shop page and select it.  If you can’t find a page named Shop, just go to Pages > Add New create one and then set it as your shop page. Add this page to your menu to give your visitors access to the product listing.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using Visual Composer which comes bundled with the theme.

Creating menus

Mavika offers three menu locations. The Main, Top and Footer. You can customize these menus any way you like to make navigation easier for your visitors. For info on how to create menus in WordPress, please have a look at our guide here.

Customizing the theme

All the theme’s options can be accessed via WordPress’ customizer. Navigate to Appearance > Customize and you will be presented with this panel.

mavika_customizer

If you have used any theme from the WordPress.org theme directory you should be familiar with the usage of the customizer, if not you can read more about it here. Below we will take a look at the options each section offers.

Header Options

Header bar

header-bar

Here you can toggle the header bar, add a promo text on its left side and toggle the social network icons that appear on its right side.

Appearance

header-appearance

Under the appearance tab you can customize the header’s appearance. There are three layouts available, the Default with logo on the left and menu on the right, the Centered menu and Centered logo ones. If you want a sticky header you can enable it by checking the Sticky Header box. Finally here you can toggle the various shop related tools, like the account/login/register link, the shopping cart icon and search icon.

Using this tab you can create new or modify existing menus. For more info on menu creation please check the Creating Menus section above.

Site Identity

mavika-siteidentity

Here is where you take care of your site’s branding. You can set a logo, the site’s title and tagline and add a site icon which will be used on browsers and as an app icon on mobile devices.

Layout Options

mavika_layoutoptions

In this tab you can modify the layouts of various pages on the site. You can globally toggle between a boxed or fullwidth layout, you can choose if you want a sidebar on your blog page and other listing pages. Additionally you can control the number of words on the automatic excerpt and toggle between numbered and previous/next pagination styles.

Post Listing Options

post_listing

In this tab you will all options related to the appearance of post listing pages, such as the category listing ones. You can toggle featured images and the category hero section on and off if you so desire. You can also select the category hero text color and background.

Posts Options

mavika-posts-options

As you might imagine, this tab helps you configure the layout of single posts. You can toggle the featured image, the categories, tags, comments, author box, post navigation and related posts. You can also modify the title of the related posts section.

WooCommerce

Shop

wc_shop

This tab allows you to customize the appearance of all shop listing pages. You can toggle the appearance of the hero section and set a hero text color and background. The shop’s layout can be customized by moving the sidebar to the left or right side of the products or even off-site. The number of columns and products on each listing page can also be customized here. You can also toggle WooCommerce’s breadcrumbs and select to show a second product image on hover. Finally you can set your shop to catalog mode which will disable the add to cart buttons and hide the prices.

Shop

wc_product

Under this tab you can toggle various sections of the single product, such as review, up-sells, related products and social sharing buttons.

Colors

Global

color_global

This is the go to tab when you want to modify colors on your site. Here you can set a background image or color, a global page hero text color and background and modify the color of text, buttons and borders.

Header

color_header

Here you can modify the header image and background color. You can also change the navigation colors.

Footer

color_footer

The footer strip’s background and text colors can be modified throug the footer color tab.

Sidebar

color_sidebar

the last tab in the colors section allows you to change sidebar background color, text, link and border colors.

Typography Options

mv_typography

The typography options tab allows you to modify the size of all content headings, body text and widget titles and text. You can also set page, section and widget titles to be all uppercase.

Widgets

Through this tab you can access all the available theme sidebars and add widgets to them.

Social Networks

social_networks

Fill in the links to your social profiles and use them on the header bar or in any sidebar using the social icons widget.

footer_options

In this tab we can upload the credit cards icons to let people know which payment methods are accepted on your site. You can also toggle the reveal effect on the footer and the appearance of the Instagram carousel.

Static Front Page

static_front_page

Using this tab we can choose what gets displayed on the front page of our site. For example if we want to create a homepage using Visual Composer we will need to create a new page using the Page Builder template, name it home and set it as our Front Page above. The Posts Page is the page that will display our post listing, as discussed earlier in the post creation section.

Other

other_settings

This tab contains the custom CSS box which allows you to add custom styling if you need it and an input box where you can place your Google Analytics Tracking ID so you can monitor your site’s activity.

Custom Widgets

The theme comes bundled with three custom widgets. Let’s take a look at each one.

About Me

ms_about_me

Using this widget you can create an author profile in just a couple of minutes. Add it to a sidebar, upload your author image, about text, greeting, signature & signature image and save.

Social Icons

mv_social_icons

This widget will display the social icons which you configured earlier under Customize > Social Networks.

Latest Posts

mv_latest_posts

The latest posts widget will display a selected number of latest posts on any sidebar you want. You can optionally set it do display posts from a single post category, or display random posts.

Oxium

About

Oxium is a WordPress theme for DJs, Solo artists, Bands, Collectives, Club Owners, music producers, events producers and anyone in the music industry.

WordPress theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

After activation, you will be redirected to the CSSIgniter Settings panel (accessible from Appearance > CSSIgniter Settings) to start customizing your brand new theme.

Image Sizes

The recommended image sizes for the Oxium theme are:

  • Post Thumbnail: 546x546px
  • Fullwidth Page – Slider: 750x400px
  • Listing thumbnail: 546x300px
  • Masonry Thumbnail: 546px width, not restricted in height.

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • AudioIgniter use our free audio player plugin to create playlists and display them on the discography items or anywhere else on your site.
  • CSSIgniter Shortcodes you can use our custom made shortcode plugin to help you create a variety of layouts and elements on your site. Instructions can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediatelly after activating the theme.

sample_link

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Oxium by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the oxium_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Creating theme pages

  1. Homepage: Create a page named Home  and apply to it the Homepage Template from the page attributes panel on the right.
  2. Discography listing: This page will list your discography items. Create a new page and apply the Discography Listing template to it. From the Discography Listing Options panel that appears below the main text editor, you can select the column number for the listing page and modify the number of items displayed on the page at once. Additionally you can select a Base Category for the listing page, meaning that you can use the template to display only one of your discography categories, instead of all of them.
  3. Artists listing: This page will list your artists. Create a new page and apply the Artists Listing template to it. From the Artists Listing Options panel that appears below the main text editor, you can select the column number for the listing page and modify the number of items displayed on the page at once. Additionally you can select a Base Category for the listing page, meaning that you can use the template to display only one of your artist categories, instead of all of them.
  4. Events listing: This page will list your events. Create a new page and apply the Events Listing template to it. From the Events Listing Options panel that appears below the main text editor, you can toggle the appearance of future or past events and modify the number of items displayed on the page at once. Additionally you can select a Base Category for the listing page, meaning that you can use the template to display only one of your event categories, instead of all of them.
  5. Gallery listing: In this page you will display your galleries. Create a new page and apply the Galleries Listing template to it. From the Galleries Listing Options panel that appears below the main text editor when you select the Galleries Listing template, you can select the column number for the listing page and modify the number of items displayed on the page at once. Additionally you can select a Base Category for the listing page, meaning that you can use the template to display only one of your gallery categories, instead of all of them.
  6. Videos listing: This page will list your videos. Create a new page and apply the Videos Listing template to it. From the Videos Listing Options panel that appears below the main text editor, you can select the column number for the listing page and modify the number of items displayed on the page at once. Additionally you can select a Base Category for the listing page, meaning that you can use the template to display only one of your gallery categories, instead of all of them.
  7. Blog: This page will display your posts, apply the default template to it.

(TIP, all page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

ReadingSettings

Notice: if you have selected the Blog – Fullwidth template, do not set the blog page as your static posts page, leave that drop down empty.

2) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the content in the editor, upload a featured image by clicking “Set featured image” on the Featured Image panel, add a category and/or tag to the post, if you so desire, from the respective panels and publish the post by clicking “Publish”.

3) Creating slider items

The slider on the front page is created by the Theme – Slider widget. You can access it either under Customize > Widgets or Appearance > Widgets. Add the widget to the Front Page sidebar, select the slideshow speed and toggle the automatic slide functionality and press the Add Item button to add your first slide.

new_slider_item

 

Fill in all the required information, like title, subtitle and link URL and click the Select Image button to upload the slider image.

slider_item

 

Next click the Add Item again to add another slide, continue as needed and once done click the save button.

4) Creating event items

Now you can start inserting your events from Events > Add New. Start by giving the event a title. We leave the main editor empty and we move a bit lower in the Event Settings section, here you can fill in the event’s info, details, status, location and links. Each tab provides some information concerning its usage.
TIP: If you leave the coordinate boxes empty the map won’t appear in the single event view

5) Creating discography items

Go to Discography > Add new. Set the album title and upload the album’s cover in the featured image section. Now in the main editor you can write anything you want PLUS you can display the tracklisting of your album with the ability to let the users review your tracks! For this we are going to use our tracklisting system.

In the Discography Settings panel, you can fill in the album’s info, details and links.

To create playlists and display your tracks on the discography items, or anywhere else on your site use our AudioIgniter plugin. It’s documentation can be found here.

6) Adding video items

Go to Videos > Add New, give a title and a featured image to your video and move to the Video Settings panel. Here you can add a date, location and any other information you want for your video. In the Video URL box you will need to place your video’s URL, which is hosted on one of WordPress’s supported providers.

7) Adding gallery items

In order to create a new photo gallery go to Galleries > Add New, give a title and a featured image to your gallery and move to the Gallery Settings panel.

Here you can give your gallery a subtitle, select the number of colums and finally click the Add Images button to upload your photos. Once done you can toggle gallery image randomization if you want.

8) Adding artist items

In order to insert a new artist just visit Artists > Add New. Add the artist’s name as a title, upload the featured image and fill in any information you want in the text editor. In the Artist Settings panel you can fill in a subtitle for the artist i.e. Vocals, Drums etc and any other related information, then publish the item.

9) Creating your menu

Now that your content is in place, you will need a menu. Go to Appearance > Menus, check the pages you want on your menu and add them, give your menu a name and save it. Finally you will need to set your menu as “Main” menu, this can be done either by checking the “Main menu” box in “Menu Settings” just below your menu items in Menu Structure, or by going to the “Manage Locations” tab and selecting the menu you just created. The theme also features a Footer Menu which you can create and assign in the same manner. The secondary menu will appear above the main menu and to the right. Please note that the footer menu does not support sub menu items.

(TIP, for more info on creating and managing menus, please read the WordPress Menu User Guide here)

10) Setting up your homepage

The homepage on Oxium consists exclusively of widgets placed in the Front Page widgets area. We saw earlier how we can create slider items. The widgetized area of the homepage can be accessed under Appearance > Customize > Widgets or Appearance > Widgets.

Duplicating the demo’s homepage

Below are the widgets found on the demo’s homepage here

  1. Theme – Slider widget with three slider items
  2. Theme – Latest Discography widget displaying the latest discography item
  3. Theme – Events widget displaying four upcoming events (recurring events are enabled)
  4. Theme – Latest Galleries widget displaying two gallery items
  5. Theme – Latest Videos widget displaying four videos
  6. Theme – Latest Posts widget displaying two blog posts

11) Custom Widgets

The theme features seven custom widgets which are displayed below to help you display your content better.

oxium_widgets
All widgets can be accessed from Appearance > Customize > Widgets or Appearance > Widgets.

Below each widget you will find a small description explaining their functionality.

The Customizer settings panel

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

oxium_customizer

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can configure the length of the automatic excerpt and choose between numbered and older/newer pagination.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the footer automatically.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, date, comments etc.

  • Related Items

    Here you can toggle the appearance of related items for each post type and also modify the section’s title.

  • Menus

    Here you can create and assign menus to the theme. See below for more info on how to add items to your menu. To learn more about menu creation check out the Codex’s menu user guide here.

  • Footer Options

    Here you can modify the theme’s footer text.

  • Static Front Page

    Set the Homepage created before as your static front page to take advantage of the drag & drop widgetized template we have created for you.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs, additionally you will find input boxes where you can place your Google Analytics tracking ID and Google Maps API key (if necessary).

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Potenza

About

Potenza is a single page business theme for WordPress.

WordPress theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

For a more detailed guide, please read here.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The minimum recommended image sizes for Potenza are:

  • Post thumbnail: 850x500px
  • Hero Image, used in the custom content widget: 750x550px
  • Small Square (Team & Testimonials): 260x260px
  • Slider Image: 1920x800px
  • Blog Listing Square: 400x400px
  • Clients Widget: 0x80px (at least 120px tall, not limited in width)

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content Manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediatelly after activating the theme.

sample_link

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Potenza by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the potenza_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Creating theme pages

  1. Homepage: Create a page named Home  and apply to it the Homepage Template from the page attributes panel on the right.
  2. Blog: This page will display your posts, apply the default template to it.

(TIP, all page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

ReadingSettings

2) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the content in the editor, upload a featured image by clicking “Set featured image” on the Featured Image panel, add a category and/or tag to the post, if you so desire, from the respective panels and publish the post by clicking “Publish”.

3) Widgets

The entire front page of Potenza is built using widgets, we have built 9 custom widgets to help you do that. You can access them either by going to Appearance > Customize > Widgets or Appearance > Widgets. 

widgets

Let’s have a look how they work.

Theme – Slider

This widget will help you create slider items. Add the widget to the Homepage sidebar, select the slideshow speed and toggle the automatic slide functionality and press the Add Item button to add your first slide.

slider_1

Fill in all the required information, like title, subtitle, button text and button URL and click the Select Image button to upload the slider image.

slider_2

Next click the Add Item again to add another slide, continue as needed and once done click the save button.

Theme – Custom Content

This widget is built to help you add content to your front page, whether it is an introductory text, a bio or any other text you might want to include. Its functionality is pretty straight forward, you add the widget to the homepage sidebar, fill in all the info you need, click the Select Image button to upload an image (optional) and save the widget.

widget_content

 

Theme – Services

Let’s see about displaying services next. Add the widget to the homepage sidebar, fill in the title, subtitle, select the text alignment and click the Add Item button.

Services_1

Give the service item a title, add the text, select an image for it from the Font Awesome set and proceed with adding your next service, once done, save the widget.

Theme – Team

Products do not create themselves so let’s introduce the people who did create them. Add the widget to the homepage sidebar, fill in title and subtitle and click the Add Item button.

team_1

Next fill in all the relevant info for each team member. You can add name, title, a small bio which will appear when the team item is clicked and links to four social profiles. Images for the profiles are provided by the Font Awesome set. Add as many items as necessary and save the widget.

team_2

Theme – Pricing Table

To create a pricing table, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button

Pricing_1

Set up the pricing item by filling all related information. Marking the item as featured will make it appear emphasized with a border surrounding it. You can add up to 8 features for each pricing item, placing a dash or minus sign before the text will display it as not available/included in the package.

pricing_widget

this is how the above pricing item will look like

pricing_table

Theme – Clients

To display your clients on the front page, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button

Clients_1

Upload your client’s logo as the image and provide the URL to their website, after you are finished adding the items, save the widget.

Clients_2

Theme – Testimonials

To display your testimonials add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button

Testimonials_1

Upload the testimonial author’s image, their name, role and testimonial text. Once you have added all testimonials, save the widget.

Testimonials_2

Theme – Contact

Use this widget to let people know how they can get in touch with you. Add it to the homepage sidebar and fill in all the required info. Follow the instructions on the widget to help you find the coordinates of your location. The contact form shortcode can be provided by a contact form plugin such as Contact Form 7 

Contact

Theme – Latest Posts

Our last custom widget will allow you to display your latest blog posts. Add it to the homepage sidebar, fill in the required information and save it.

Latest_posts

Customize the widget’s appearance.

At the bottom of each widget you will notice a blue button titled Customize. Clicking it will give you access to the widget customization panel.

Customize

Here you can toggle animation effects for the widget, change text & background color, upload a background image with optional parallax effect, apply an overlay to the background image and add extra padding if you need your widgets more spaced out.

4) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

customizer

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Options

    Here you can toggle the tagline, sticky header and logo padding. Additionally you can modify the colors of various header elements.

  • Menus

    Here you can create and assign menus to the theme. See below for more info on how to add items to your menu. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo, footer logo and site icon.

  • Layout Options

    Here you can toggle the blog sidebar, you can also configure the length of the automatic excerpt and choose between numbered and older/newer pagination.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the footer automatically.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments etc.

  • Footer Options

    Customize the theme’s footer by changing its color scheme and toggling the social icons and adding your copyright text.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Static Front Page

    Here you can change the default titles for the search results & 404 pages.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs, additionally you will find input boxes where you can place your Google Analytics tracking ID and Google Maps API key (if necessary).

5) Populating your menu

Once done adding the widgets to your homepage you will need to create a menu. To do that navigate to Appearance > Customize > Menus and create a menu.

  1. Check the box to make the menu your theme’s Main Menu
  2. Click the Add Items button
  3. Expand the Custom Links tab
  4. You will see that there are links to each of your widgets here, select one
  5. Click the Add to menu button

Repeat steps 4 & 5 until all your widgets are added to the menu. Click the Save/Save & Publish button on the top of he customizer panel to save the menu.

menu

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Brittany Light

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes.

Click the Add New button on the top of the page.

add_new

In the next screen type the theme’s name in the search box

[Brittany light search screenshot here]

When the search results appear, hover over the theme and click Install

[Brittany light search results here]

Once the installation finishes click activate and the theme is ready to use.

[Brittany light activation screenshot here]

Importing sample content

Download the sample content.

Extract the zip file you just downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the brittanylight_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. add a category and/or tag to the post,
  5. once done click the Publish/Update button.

new_post

 

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

bl_customizer

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Options

    Here you can toggle the social icons.

  • Menus

    Here you can create and assign menus to the theme. The theme features one menu location, the main menu one. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can modify the length of the automatic excerpt , toggle the excerpt display in listings and select between numbered and older/newer pagination.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features six sidebars, the blog, the pre-footer Instagram one and four footer sidebars.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

  • Posts Options

    Here you can change the related posts section title.

  • Footer Options

    Here you can toggle the credits text and the Instagram slideshow. Additionally you can modify the slideshow’s speed.

  • Static Front Page

    Use this tab to to set a static front page if you don’t wish to display your posts on the home page.

  • Upgrade to PRO

    In this tab you can see a few of the PRO version’s features and will find links to help you upgrade.

Theme pages

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form, then paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

Along with WordPress’s widgets we have created 3 custom ones.

bl_widgets

You will find a small description in each widget detailing its usage.

How to use the latest posts widget

The Theme – Latest Posts widget will help you display posts on any sidebar, let’s take a look at how to use it.

bl_latest_posts

 

We start by adding a title to the widget, next we select a post category to display on it (leaving the option empty will display posts from all categories), below we can select whether we want our posts to appear at random (default is by date from newest to oldest) and how many posts we want to display on the widget. Save and you are done!

Additional information

Useful Plugins

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.

Image Sizes

The minimum recommended image sizes for Brittany Light are:

  • Post thumbnail: 750x460px
  • Square thumb: 300x300px
  • About me widget thumb: 360x220px

Hellomouse

About Hellomouse

Hellomouse is a premium WordPress theme designed for creative professionals. With Hellomouse you can display your works and projects in simple, yet beautiful and functional manner. This can be done primarily by using the Projects custom post type, which acts as normal post, but is boosted by additional functionality to help you reach the desired layout on your site.

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The recommended image sizes for Hellomouse are:

  • Main Thumbnail: 750×450 px
  • Wide Thumbnail: 1140×450 px.
  • Square Thumbnail: 555×555 px.
  • Tall Thumbnail: 750px in width, not limited in height.

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • CSSIgniter Shortcodes you can use our custom made shortcode plugin to help you create a variety of layouts and elements on your site. Instructions can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assign the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Hellomouse by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the hellomouse_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Creating theme pages

Let’s start by adding pages you are going to need. Go to Pages > Add New and create the following pages:

  1. “Home”: this will serve as your homepage, assign to it the “Homepage Template” from the “Page attributes” panel. Publish the page and set it as your static Front Page as described below.
  2. “Projects Listing”: this page will list all your projects. Apply to it the “Projects Listing” template to it and publish the page.
  3. “Blog”: this will be your posts page. Just create and publish it; no further action needed.
  4. “Contact”: (optional) here you can place your contact form which you will create using the Contact Form 7 plugin. Apply the “Contact Page” template and publish it.

(TIP: all page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

ReadingSettings

2) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the content in the editor, upload a featured image by clicking “Set featured image” on the Featured Image panel, add a category and/or tag to the post, if you so desire, from the respective panels and publish the post by clicking “Publish”.

TIP: the “more” tag is functional in posts, which means that you can directly control which part of the post will appear on the blog listing page. If, for example, on a video post format you want to display just the embedded video and no text you might have below it, you can add a ‘more’ tag between the video embed URL and your text content.

3) Adding project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill in any text you have for the portfolio item and move to the Project Options panel below.  Here you can add project Information, or Images. Each tab contains specific instructions available for quick reference. Following them will provide you with a thorough understanding of how to set up your projects.

TIP: You can toggle the appearance of related project items under Appearance > Customize > Project Options.

4) Creating your menu

Now that your content is in place, you will need a menu. Go to Appearance > Menus, check the pages you want on your menu and add them, give your menu a name and save it. Finally you will need to set your menu as “Main” menu, this can be done either by checking the “Main menu” box in “Menu Settings” just below your menu items in Menu Structure, or by going to the “Manage Locations” tab and selecting the menu you just created.

(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide here)

5) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this:

hellomouse-options

TIP: Αny changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can modify the excerpt size and select the pagination layout.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change Additionally you can modify the site’s background from this tab.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments etc.

  • Project Options

    This tab allows you to toggle the appearance of related projects and modify your project layout in project category listings.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features eight sidebars explained below.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs, also you can place your Google analytics tracking ID here.

Hellomouse comes with 8 widgetized areas (sidebars):

  1. Blog: Used to display widgets in your Blog page and all Posts.
  2. Pages: Displayed in all static Pages.
  3. Contact: Displayed in your contact page (i.e. a page that has the “Contact Page” template set).
  4. Homepage Left: First column of widgets on the Homepage. This widget area appears on your Homepage templates.
  5. Homepage Right: Second column of widgets on the Homepage. This widget area appears on your Homepage templates.
  6. Homepage Full Width: Full width area of widgets on the Homepage. This widget area appears on your Homepage templates.
  7. Footer #1: First column of the footer widgets.
  8. Footer #2: Second column of the footer widgets.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Additional Information

Creating Galleries

To create a gallery using our gallery management system follow these steps:

  1. On the “Gallery Information” panel click the Add Images button. gallery_info
  2. To upload your images, drag & drop them in the Edit Gallery window which will pop-up, or select Add to Gallery in order to select already uploaded ones. Once you are done, click the Update Gallery button on the lower right. edit_gallery
  3. Your “Gallery Information” panel will look like this gallery_w_img
  4. You can re-arrange the order of images by drag & drop. gallery_move_img
  5. If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below. gallery_remove_img
  6. By checking the Randomize order box your gallery images will appear in random order which will change on every page refresh.
  7. When done, publish the gallery item.

If you need to add images after the gallery’s creation just follow the same procedure.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Paperbag

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

TIP: More info on how to download and install a theme here.

Image Sizes

The minimum recommended image sizes for Paperbag are:

  • Post thumbnail: 775x512px
  • Slider images: 1050x550px
  • Author thumbnail: 200x200px
  • Looks template image: 775x1000px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Socials Ignited use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks, a guide can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Paperbag by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the paperbag_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. select the Post Format,
  5. add a category and/or tag to the post,
  6. and move to the Post Utilities metabox.

new_post

 

In the Post Utilities metabox you can select whether the post will feature a sidebar or will be full width. In the Secondary Image tab you can upload another image with portrait orientation which will be displayed in listing pages using the Looks template, more on the template below.

post_utilities

If you select a Gallery post format a new metabox named Gallery Details will appear below Post Utilities.
gallery_details
here you can select a layout for your gallery, it can be a slider or a tiled gallery, and upload your images to it by clicking the Add Images button. Check the Randomize order box to have the images load in random order. You can drag and drop the items to reorder them. Hovering over an image and clicking the “X” button allows you to remove it from the gallery quickly.
TIP: More info about gallery creation you can find in the Additional Information section of this document.

Once you are done click the Publish button to publish your post.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

customizer

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Bar Options

    Here you can toggle the sticky header, search bar and header social icons. Additionally you can modify the colors of various header elements. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Menus

    Here you can create and assign menus to the theme. The theme features two menu locations, one on the header and one on the footer. The footer menu does not support sub menu items. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo, footer logo and site icon.

  • Layout Options

    Here you can independently modify the blog layout, the category/tag layout and the layout for the rest of your pages. Additionally you can configure the lenght of the automatic excerpt and choose between numbered and older/newer pagination.

  • Front Page Slider

    This tab allows you to configure the homepage’s slider. You can toggle its apperance and automatic slide functionality. The images displayed on the slider are featured images pulled from your post, you can select a source post category via the drop down or fill in individual post ids in the text box below if you don’t want entire categories to appear on the slider, to learn how to find an individual post’s ID check this article. You can also limit the number of posts on it, change the effect and adjust the slideshow speed.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features two sidebars, the Blog Sidebar which appears on all posts & pages that have a sidebar, and the Footer Sidebar which can only display the widget provided by the WP Instagram Widget plugin.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments, social sharing etc.

  • Pages Options

    This tab allows you to toggle the appearance of the signature and social sharing buttons on pages.

  • Footer Options

    Customize the theme’s footer by changing its color scheme and toggling the reveal effect.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.

Theme pages

The contact page

For the contact page on the theme’s demo we used a page with the Fullwidth Page template applied to it and pasted in a contact form created with the Contact Form 7 plugin.

The Looks pages

The looks page template was created to give you more flexibility on the images you can use on your listing pages. By default the featured images on post listing pages have the landscape orientation. If you need to use images that have the portrait orientation you can create page with the Looks template applied to it. From the Looks Details metabox you can select the layout of the page, the post category it will display and the number of posts per page.

looks_details

Widgets

Along with WordPress’s widgets we have created 6 custom ones. They are really simple and they let you display various important info around the site.

widgets

You will find a small description in each widget detailing its usage.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Additional information

Creating Galleries

To create a gallery using our gallery management system follow these steps:

  1. On the “Gallery Information” panel click the Add Images button. gallery_info
  2. To upload your images, drag & drop them in the Edit Gallery window which will pop-up, or select Add to Gallery in order to select already uploaded ones. Once you are done, click the Update Gallery button on the lower right. edit_gallery
  3. Your “Gallery Information” panel will look like this gallery_w_img
  4. You can re-arrange the order of images by drag & drop. gallery_move_img
  5. If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below. gallery_remove_img
  6. By checking the Randomize order box your gallery images will appear in random order which will change on every page refresh.
  7. When done, publish the gallery item.

If you need to add images after the gallery’s creation just follow the same procedure.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Suisen

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

TIP: A more visual guide can be found here.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The minimum recommended image sizes for Suisen are:

  • Post listing thumbnail: 600x480px
  • Post single featured image: 1140x475px
  • Large thumbnail (single column layouts): 1140x750px
  • Cart thumb: 120x120px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the suisen_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

WooCommerce

To enable eCommerce functionality for your website you need to install and activate the WooCommerce plugin by WooThemes. You can download the plugin free of charge from the WordPress Plugin Repository. For installation and usage instructions please refer to the plugin’s documentation.

Once you have installed and activated the WooCommerce plugin please install its pages by clicking on the button that WooCommerce provides on its banner. This will likely create a duplicate of some pages along with the pages installed by the sample content but its a needed step. You can delete the old pages that came with the sample content or use them instead by going to WooCommerce > Settings > Products > Display and assign them anew.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. add a category and/or tag to the post,
  4. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  5. once done click the Publish/Update button.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

suisen_customizer

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Menus

    Here you can create and assign menus to the theme. The theme features one menu location, the main menu one. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can select the number of words in the automatic excerpt, select pagination style, toggle product title and layout and enable the masonry effect.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features three sidebars, the homepage one and two pre-footer sidebars.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

  • Posts Options

    Here you can toggle various aspects of the single post and post listings, like the appearance of categories, tags, date, comments, social sharing etc.

  • Footer Options

    Here you can modify the footer text.

  • Static Front Page

    Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Also here you can set the Google Analytics ID to get statistics on your site.

Theme pages

The Home page

To create your home page, create a page named Home and apply to it the Homepage Template to it.

The blog page

To create a post listing page, create a new page named Blog and publish it.

Setting the static pages

Once we have created the two pages above  you need to set them as default. To do that go to Settings > Reading and configure them as shown below.

settings_reading

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form, then paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

Along with WordPress’s widgets we have created 4 custom ones. You can see them below.

suisen_widgets

You will find a small description in each widget detailing its usage.

How to use the latest posts widget

The Theme – Latest Posts widget will help you display your posts on the front page. Let’s take a look at how to use it.

latest_posts_suisen

We start by adding a title to the widget, next we select a post category to display on it (leaving the option empty will display posts from all categories), below we can select whether we want our posts to appear at random (default is by date from newest to oldest) and how many posts we want to display on the widget. Finally you can choose to make the first item appear bigger by checking the corresponding box.

Excluding post categories from the widget

As mentioned above, if we don’t select a post category on the widget it will display posts from all categories. We can exclude some of them if we wish. In the example above we created a widget which pulls posts from the style category, now lets create another one, which displays posts from all categories apart from the style one.

latest_posts_exclude_suisen

as you can see it’s very easy, we just tick the box to exclude the category we want and we are done.

Recreating the demo’s homepage layout

If you chose not to import the default widgets, but still want to recreate the homepage layout of the theme’s demo, let’s have a look on how you can achieve it.

The Homepage sidebar

Under Customize > Widgets you can access the homepage sidebar, let’s take a look at the widgets used on the theme’s demo:

  • Text – a text widget with some introductory text.
  • Theme – Post Type Items displaying four WooCommerce products.
  • Text – a text widget with some text.
  • Theme – Product Category Images  displaying the images of two product categories.
  • Theme – Post Type Items displaying five WooCommerce products.

TIP: Info on how to use the latest posts widget can be found in the widgets section here.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Struct

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

TIP: A more visual guide can be found here.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The minimum recommended image sizes for Struct are:

  • Post thumbnail: 555x350px
  • Featured image: 848x450px
  • Fullwidth thumbnails: 1140x450px
  • Custom content thumbnails: 720x430px
  • Slider thumbnails: 1920x900px
  • Client logos: 80px in height, not restricted in width.

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Struct by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the struct_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the content in the editor, upload a featured image by clicking “Set featured image” on the Featured Image panel, add a category and/or tag to the post, if you so desire, from the respective panels and publish the post by clicking “Publish”. From the Post Options meta box below the main text editor you can toggle the appearance of the post’s featured image on the single view.

2) Adding Services

To add new Service item go to Service > Add new and fill in the title, content and featured image. Next, in the Service Options metabox set an image for the service by following the on screen instructions, you can also toggle the appearance of the item’s featured image on the single view. Finally publish the item.

3) Adding Project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill in any text you have for the portfolio item and move to the Project Options panel below.  Here you can add project Information and toggle the appearance of the featured image in single project view.

4) Adding Team Members

To add a team member go to Team > Add New, set a title for it (the person’s name) and upload a featured image, then in the “Member Options” panel you can fill in the team member’s social profiles by following the on screen instructions, you can also toggle the appearance of the item’s featured image on the single view.

5) Adding DIY Projects

To add a new DIY Project item go to DIY Projects > Add New. Fill in a title for the project, set it’s featured image, add the content and finally publish the item. From the DIY Project Options meta box you can toggle the appearance of the item’s featured image on the single view

6) Adding FAQs

To add a new FAQ item go to FAQs > Add New. Fill in a title for the item, add the content and finally publish it.

7) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

customizer_struct

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Image

    Here you can set a background color or image for the theme’s header.

  • Menus

    Here you can create and assign menus to the theme. The theme features one menu location, the main menu one. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can modify the length of the automatic excerpt and select between numbered and older/newer pagination.

  • Typography Options

    Through this tab you can control the font size of key theme elements, such as headings, body and widgets.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features ten sidebars, the blog, pages, two homepage sidebars, an e-shop sidebar, the pre-footer Instagram one and four footer sidebars.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

  • Posts Options

    Here you can toggle various aspects of the single post and posts listing, like the appearance of categories, date, comments and featured images.

  • DIY Options

    Here you can toggle various aspects of the DIY post and DIY posts listing, like the appearance of categories, date, comments and featured images.

  • Footer Options

    Here you can modify the credits text and toggle the back to top button.

  • Static Front Page

    Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you.

  • Titles

    In this tab you can change the titles for various theme pages, like the blog, DIY, search and 404.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Also here you can set the Google Analytics ID to get statistics on your site.

Theme pages

The Home page

To set up the homepage create a page named Home and set to it the Homepage Template from the Page Attributes drop down on the right. To add content to your front page go to Customize > Widgets or Appearance > Widgets and use the theme’s widgets to help you display your content.

Custom post type listing pages

In order to display your custom post types you will need to create a listing page fore each one.

DIY Projects

Create a page to list your DIY projects and apply to it the DIY Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the DIY Listing Options metabox below.

diy_listing

FAQs

Create a page to list your FAQs and apply to it the FAQ Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the FAQ Listing Options metabox below.

faq-listing

Projects

Create a new page and apply to it the Projects Listing template from the page attributes drop down.

In the Project Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing & Article layout you like and finally set the number of items that will appear per page.

project-listing

Services

Create a new page and apply to it the Services Listing template from the page attributes drop down.

In the Service Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing & Article layout you like and finally set the number of items that will appear per page.

service-listing

Team Listing

Create a new page and apply to it the Team Listing template from the page attributes drop down.

In the Team Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing layout you like and finally set the number of items that will appear per page.

team-listing

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form, then paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

We have handcrafted twelve custom widgets to help you better display your content. You will find them under Customize > Widgets or Appearance > Widgets

struct_widgets

 

Below each widget you will find a small description regarding its functionality, additionally each widget provides you with some info on each usage, please read the small text found on the widget once it’s added on the sidebar. Widgets that are custom built to be used on the homepage have the Homepage widget marking on the description.

Theme – Slider

This widget will help you create slider items. Add the widget to the Homepage sidebar, select the slideshow speed and toggle the automatic slide functionality and press the Add Item button to add your first slide.

slider_1

Fill in all the required information, like title, subtitle, button text and button URL and click the Select Image button to upload the slider image.

slider_2

Next click the Add Item again to add another slide, continue as needed and once done click the save button.

Theme – Custom Content

This widget is built to help you add content to your front page, whether it is an introductory text, a bio or any other text you might want to include. Its functionality is pretty straight forward, you add the widget to the homepage sidebar, fill in all the info you need, click the Select Image button to upload an image (optional) and save the widget.

custom_content

Theme – Pricing Table

To create a pricing table, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button

Pricing_1

Set up the pricing item by filling all related information. Marking the item as featured will make it appear emphasized with a border surrounding it. You can add up to 8 features for each pricing item, placing a dash or minus sign before the text will display it as not available/included in the package.

Pricing_2

Theme – Technical documentation

technical_doc_widget

Using this widget you can create a list with downloadable files, such as manuals, guides etc. Just fill in the title and use the Add item button to add items. Fill in the required info and save the widget.

Theme – Contact

theme_contact

Using this widget you can create a contact box with a map and any info you desire. Paste in the iframe embed code for the map and then using the Add item button fill in all the required information.

Theme – Opening hours

opening_hours

Display your business’ timetable using this widget. Click the add item button to add a new schedule section, as displayed above.

Theme – Post type items

post_type_items

Using this widget you are able to display your content on any widgetized area, whether it is a standard post, a project, a team member etc. Just select the post type you want to pull info from on the Post type drop down, select the layout you want for these items from the Item appearance drop down (different layouts are available for different post types to help optimally deliver information), set the desired text alignment and add your items using the Add item button. Save your widget and you are done.

Customize the widget’s appearance.

At the bottom of the homepage widgets you will notice a blue button titled Customize. Clicking it will give you access to the widget customization panel.

widget_customize

 

Here you can modify text & background colors, add a background image & set its repeat pattern and add extra padding if you need your widgets more spaced out.

Recreating the demo’s homepage layout

The entire front page template is widgetized to provide you with maximum flexibility. Below we list the widgets used on the demo’s home page.

  • Theme – Slider: This widget creates the slider. Add as many items as you want by pressing the “Add Item” button. Remove any item by selecting “Remove me”. The slider also supports videos from WordPress compatible video hosts.
  • Theme – Custom content: Using this widget you can display custom content on your front page.
  • Theme – Testimonials: This widget will help you display testimonials from your customers. On the demo we have three testimonials visible.
  • Theme – Post type items: Here we display three services with the Image – Title – Text layout.
  • Theme – Clients: Here we display four logos of our clients.
  • Theme – Video: Here we display a YouTube video.
  • Theme – Post type items: Here we display four services with the Icon Centeredlayout.
  • Theme – Pricing table: we used this widget to create a four column pricing table.
  • Theme – Custom content: another bit of custom content.
  • Theme – Video: Here we display another YouTube video.
  • Theme – Post type items: Here we display four more services with the Image – Title – Text – Button layout.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums