The Styler

About

The Styler is a beauty, hair & spa WordPress theme. It allows you to display services available by your business, team, price lists and client testimonials as well as photo galleries related to your work.

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.
TIP: A more visual guide can be found here.

Image Sizes

The recommended image sizes for the The Styler theme are:

Post Thumbnail: 750x400px
Entry Item Image: 500x333px
Full Width Image 1140x540px
Square Item Image:230x230px
Hero* Image: 1920x250px
Home Hero* Image :1920x960px
FullWidth Narrow Thumbnail :750x450px
Widget Hero: 168x37px

* A hero image is a large banner image, prominently placed on a web page, generally in the front and center.

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.

  • MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
  • 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.
  • 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.
  • WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

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

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), asking 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 The Styler 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 the_styler_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.

Theme pages

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

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. You will notice that in your Homepage template page under the WordPress text Editor you have two sections.

The Layout section appears in all pages.

In the Subtitle tab you can

  1. Add A Page title or
  2. Subtitle and
  3. Show or hide  them depending in the use case.

In the Hero Section you can

  1. Add a background image.
  2. Add an overlay color to that background image.
  3. Control the text  color
  4. Change background image position and screen coverage.

Especially in your Homepage Template there is an extra section called Home page Hero Options

In this section you can select

  1. A Maxslider Slider for your frontpage.
  2. Add a Video (Youtube, Vimeo) as your homepage background.

Blog

this will be your posts page. Just create and publish a blank default page named “Blog” (or whatever you wish to name it) without adding any content, no further action needed for now. You cannot control the background image from the Layout Section of this page since it is registered by WordPress. You can add a generic background image that will apply here from Appearance > Customize > Colors > Hero.

In this page you will list your Gallery Items by applying the Galleries Listing template to your page. From the Galleries Listing Options panel that appears once the template is set, select the number of columns you want the template to have and the gallery Category you want to render.

Services Listing

In this page you will list your services, apply to it the Service Listing template. From the Service Listing Options panel that appears once the template is set, select the number of columns you want the template to have and the Services Category you want to render.

Team Listing

Here you can  list your services, apply to it the Team Listing template. From the Team Listing Options panel that appears once the template is set, select the number of columns you want the template to have.

Pricelist

Here you can list your pricelist by applying the Pricelist template. From the PriceList Listing Options panel that appears once the template is set, select the number of columns you want the template to have and the Pricelist Category you want to render.

Testimonial Listing

In this page you can list all your Testimonials. 

Setting up your theme

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 Settings metabox set an icon for the service by following the on screen instructions. Finally publish the item.

Adding a New Pricelist Item

To add a new Pricelist Item navigate to PriceList > Add New and add a title and a price.

Adding Team Members

To add a new Team member go to Team > Add New. Set a Role from the Team Settings panel on the bottom.

Adding Testimonials

To add a new Testimonial item go to Testimonials > Add New. Fill in a title for the Testimonial, set it’s featured image, add the content and finally publish the item.

Adding Galleries

To add new Service item go to Gallery > Add new and fill

  1. The number of columns you want to render your images.
  2. Select your images.
  3. Randomize the images order.

Customizing Your Theme

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

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

    Header Options are split into two sections. In the first one, Header Info,  you can set the business’ address & phone number that will appear on the header and also toggle the appearance of social icons


    In the second section, Fixed Header Options you can fix your header on top and change its padding.

  • 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

    To change the logo and favicon as well as the title and description and you need to go to Appearance > Customize > Site Identity and use the appropriate fields to add your information and upload your images.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features twelve sidebars, the blog, pages, one homepage sidebar, a service sidebar, a team sidebar, an after content sidebar, a footer Instagram one and four footer sidebars.

  • Layout Options

    Here you can modify the length of the automatic excerpt and select between numbered and older/newer pagination. Also you can choose if your blog listing has any sidebar and control its position.

  • Typography Options

    Through this tab you can control the font size of key theme elements, such as headings, body and widgets. If you want to change the default Theme fonts have a look here

  • Colors

    This tab allows you to customize the colors and background images for the entire site, the header, hero section, sidebars and the footer.

  • Social Networks

    In this section You can add your Social Network URLs. These icons will be displayed in the Theme-Social Icons Widget automatically.

  • Titles

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

  • Footer Options

    Here you can modify the credits text and your Footer Column Layout

  • 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. Here you can also download your sample content again.

Widgets

We have handcrafted some custom widgets to help you better display your content. You will find them under Customize > Widgets or Appearance > 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.

Theme-Contact

Using this widget you can create a contact box including a title and a subtitle and your Contact Form 7 shortcode as well.

Theme-Gallery


This widget is built to help you display a gallery item in any widget area you wish.

  1. Add a title.
  2. Add a subtitle.
  3. Select the gallery item  you want to display.
  4. Select the output columns.
  5. Customize the looks of the widget.

Theme-Hero

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)   or add  an custom Icon and save the widget.

Theme-Instagram(fullwidth)

This widget will show your Instagram Feed along with some helpful options like choosing the number of your Instagram Images and the option to open them in a new window or not. This widget is specially reserved for the Footer Instagram sidebar under Appearance > Customize > Widgets or AppearanceWidgets.

Theme-Latest Posts


This widget is built to help you display your latest posts  in any widget area you wish.

  1. Add a title.
  2. Add a subtitle.
  3. Select the post type you want to get the latest items.
  4. Check if you need random posts instead.
  5. Add the number of posts.
  6. Select the output columns.
  7. Customize the looks of the widget.

Theme-Pricelist

This widget is built to help you display your Pricelists in any widget area you wish.

  1. Add a title
  2. Add a subtitle
  3. Select the pricelist category you want to display
  4. Select the output columns
  5. Customize the looks of the widget.

Theme-Social Icons

This widget displays your site’s social icons. In order to set them up, you need to visit Appearance > Customize > Social Networks and provide the appropriate URLs where desired.

Theme-Testimonials

This widget is built to help you display your latest Testimonials in any widget area you wish. You can select how many testimonials you want to show or display them in random order.

Customize Widgets

In all theme’s widgets except Theme -Social Icons, You can use the Customize button to add a background image or color. You can also create a color overlay or stretch your background image to cover the entire width of the widget. You can also enable a parallax effect for your background image or add some padding if you need extra spacing.

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

Carbone

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 Carbone are:

  • Post thumbnail: 720x400px
  • Entry items: 660x500px
  • Fullwidth featured image: 1140x550px
  • Fullwidth narrow: 950x450px
  • Menu items: 67x67px
  • Hero image: 1600x500px
  • Homepage hero image: 1600x1067px

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.
  • MaxSlider: You can use our slider plugin to generate sliders for your content.

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), 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 Carbone 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 carbone_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.  You can also download the Sample Content for Carbone by clicking here

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 a menu item

To create a new menu item navigate to Menu > New Menu Item and proceed to:

  1. Add the title for your menu item.
  2. Set the item’s price (you need to include the currency symbol as well).
  3. Add a short description about the menu item.
  4. Select the menu categories.
  5. Add a featured image.
  6. And finally publish the menu item.

Create a menu listing template

To create a listing page for your menu items go to Pages > Add New and select the Menu Listing template from the Page Attributes metabox on the right.

In the Menu Listing Options metabox that appears after you select the template you can:

  1. Select the Base Category for your menu template, this is useful if you want to just display one menu category instead of the entire meny (which appears by default).
  2. Change the number of columns of the menu listing, available options are one, two and three columns.

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.

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.

Using this tab you can create new or modify existing menus. For more info on menu creation please check our small article here. Carbone features two main menus, one left of the logo and one on the right. You will have to split your main menu in two pieces and assign each one to its respective position to recreate the theme’s default layout.

Site Identity

Here you can set your site’s logo, title, tagline, logo padding and site title.

Layout Options

Here you can modify the blog’s default layout and choose between a ‘no-sidebar’ blog and a blog with a sidebar on the right. Additionally this tab allows you to customize the excerpt’s length and choose your preferred pagination method.

Posts Options

As you might imagine, this tab helps you configure the layout of single posts. You can toggle the featured image, the categories, date, and comments.

Colors

This tab allows you to customize the colors and background images for the entire site, the header, hero section, sidebars and the footer.

Typography options

Here you can modify the size of content headings, content and sidebar text.

Widgets

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

Social Networks

Here you can fill in all links to your social profiles and display them via a custom widget on any sidebar.

Titles

In this tab you can set titles for the blog section, search and 404 pages.

Here you can modify the left and right footer texts.

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 a the homepage template we provide create a new page and apply to it the Home Page template, name it home and set it as your Front Page as shown above. The Posts Page is the page that will display our post listing, as discussed earlier in the post creation section.

Other

This tab contains the custom CSS box which allows you to add custom styling if you need it.

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 a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

Widgets

The theme comes with six custom widgets.

The Theme – Content widget allows you to display the featured image (if it exists) and the content of any post/page/menu item on your site.

The Theme – Hero helps you create custom hero sections on your homepage, just fill in the required info and save.

The Theme – Info widget is built to be used in the Pre Content & After Content widget areas. It can display a short piece of text and links to your social profiles.

The Theme – Menu widget allows you to display either your entire menu or a particular menu category on the homepage sidebar.

The Theme – Opening Hours can be used in any normal sidebar (not the fullwidth ones) to display your business hours.

Support

If you have any questions related to this theme, please let us know in the theme’s support forum here.

Specialty

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.

WP Job Manager installation

To install the job manager plugin, navigate to Plugins > Add New and search for WP Job ManagerClick the button to install and activate the plugin.

Once the plugin is installed it will create three pages, the Jobs page which is the plugin’s default job listing page, the Job Dashboard page which allows a user to see all job listings they have posted at once and the Post a Job page which allows logged in users to post new job listings. You can add the latter two to the menu to allow businesses to post job listings and also access all their postings. The default jobs listing can be skipped in favor of our custom solution.

Initial configuration

The plugin’s configuration page can be found under Job Listings > Settings, here you can configure the plugin to match your needs. We would suggest enabling Job Categories & Job Types which are by default disabled, you can also enable Multi Category & Multi Type selections, these will make your filtering system much more flexible. In the Job Submission tab you can configure the requirements for allowing users to submit job listings.

For more information the plugin’s extensive documentation can be found here.

Image Sizes

The minimum recommended image sizes for Specialty are:

  • Post thumbnail: 850x450px
  • Entry items: 264x140px
  • Fullwidth featured image: 1140x550px
  • Fullwidth narrow: 950x450px
  • Company logos: 200px wide
  • Hero image: 1920x500px

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.
  • MaxSlider: You can use our slider plugin to generate sliders for your homepage or any other page you want.

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), 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 Specialty 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 specialty_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.  You can also download the Sample Content for Specialty by clicking here

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 a new Job

To create a new Job listing go to Job Listings > Add New.

Start by adding the title, description, category, type and company logo, once done move on to the Job Data section below.

Most of the fields above are pretty self explanatory, let’s have a look at a couple that might need some explanation. The Position Filled box allows you to mark a position as filled which will disable applications for this particular job listing, filled listings can also be hidden from archives. The Featured Listing box allows to to mark the listing as such, this will make it sticky during searches and it also gives you the ability to style it differently to stand out. Finally the Listing Expiry Date allows you to set an expiration date for the job listing, after that date the listing won’t accept applications, also the content in expired listings can be set to automatically be hidden after the expiration date.

Once everything is filled in you can go ahead and publish the job listing.

Creating a Job Listing page

To do that create a new page and apply to it the Job Listing template from the Page Attributes panel. Then you can select the sidebar’s placement (or choose to not have a sidebar) from the Job Listing Options metabox.

As mentioned earlier the plugin creates a job listing page when installed, however our own listing offers a more refined filtering system as you can see on the theme’s demo, so you might want to use the custom one instead of the default.

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.

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.

Site Identity

Here you can set your site’s logo, title, tagline, logo padding and site title.

Layout Options

This tab allows you to customize the excerpt’s length and choose your preferred pagination method.

Posts Options

As you might imagine, this tab helps you configure the layout of single posts. You can toggle the featured image, the categories, date, comments, social sharing icons and related posts. You can also modify the title of the related posts section.

Colors

This tab allows you to customize the appearance of the hero section, text color, background color/image and position.

Social Networks

Here you can fill in all links to your social profiles and display them via a custom widget on any sidebar.

Titles

In this tab you can set titles for the blog section, search and 404 pages.

Using this tab you can create new or modify existing menus. For more info on menu creation please check our small article here.

Job Listing Options

Here you can toggle the alert creation box and fine tune job reporting functionality.

Widgets

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

Here you can modify the left and right footer texts.

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 a page builder 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

This tab contains the custom CSS box which allows you to add custom styling if you need it. You can also download the theme’s sample content. Here you can also set the Login Page, this is a page that will make logging in a bit easier for your users. Just create a new page, assign to it the Login template and set it as your login page here. All login links will then be redirected to this page.

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 a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

Widgets

The theme comes with three custom widgets. The Theme – Callout  which allows you to create banners easily, the Theme – Related Jobs which displays jobs similar to the one the visitor is currently viewing and the Theme – Social Icons which allows you to display links to your social profiles.

Additional Information

If you would like to create buttons on the menu you can use the menu-item-btn class. For info on how to apply it, please read this small guide. (No styling needed on your part, just add the class and save the menu).

Job Alerts Add-on

If you want to use the Job Alerts feature to allow your users to be notified on jobs they are interested in you will have to purchase the plugin’s alert add-on. More info, pricing and purchase options can be found here.

Support

If you have any questions related to this theme, please let us know in the theme’s support forum here.

Koehn

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 Koehn are:

  • Post thumbnail: 750x500px
  • Item thumbnail (used on widgets): 555x415px
  • Tall thumbnail: 555px in height
  • Fullwidth featured image: 1140x550px
  • Hero image: 1920x240px
  • Slider image: 1920x1080px

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.
  • MaxSlider: You can use our slider plugin to generate sliders for your homepage or any other page you want.

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), 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 Koehn 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 koehn_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.  You can also download the Sample Content for Koehn by clicking here

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. Toggle the post’s sidebar,
  4. add a category and/or tag to the post,
  5. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  6. and finally publish the 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 a new team member

To add a new team member navigate to Team > Add New.

  1. Fill in the title, which will usually be the team member’s name,
  2. add any related content,
  3. in the Team member options metabox you can fill in the member’s job title and major social profile links,
  4. add a featured image,
  5. and finally publish the team member.

Creating a listing page for your team members

Go to Pages > Add New, add a title to the page and from the Page Attributes metabox select the Team Listing on the Template drop down.

From the Team Listing options metabox you can select between a two or three column layout for the listing. Once done you can publish the page and add it to your menu.

Adding a new Project

To create a new project, navigate to Projects > Add New.

  1. Add a title to your project,
  2. fill in the project’s content,
  3. in the Project Options metabox you can add a location and date for your project,
  4. select or add a project category for the item,
  5. add a featured image,
  6. and finally publish it.

Creating a listing page for your projects

Go to Pages > Add New, add a title to the page and from the Page Attributes metabox select the Project Listing or the Project Listing Grid on the Template drop down.

From the Project Listing Options metabox that appears when you select a template, you can select a base category for the listing if you don’ want to display all items and an items per page number. When the Project Listing template is selected you can also select a project layout between Plain, Alternative and Alternative with no excerpt. When the Project Listing Grid is selected you can choose a column number for your grid and toggle masonry and isotope filtering.

Adding a new award

To create a new award item navigate to Awards > Add New.

  1. First add a title to the award item,
  2. fill in any related content,
  3. in the Award Options metabox you can add a subtitle, the year the award was received and the project it was about,
  4. add a featured image,
  5. and finally publish the item.

Creating an award listing page

To create a listing page for your awards you can create a new page and select the Awards Listing template from Template drop down under Page Attributes.

Using the Homepage template

To use the homepage template we have built for the Koehn theme create a new page and apply to it the Home page template from the Page Attributes panel on the right.

If you want to add a slider to your homepage you can do so by using our MaxSlider plugin. Check this article out on how to install and use the plugin. Once you have created the sliders you can select the one you want to display from the Home Page Options drop down.

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 a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

Creating menus

Neto 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.

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.

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

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

In this tab you can toggle the sticky header, control the number of words on the automatic excerpt and toggle between numbered and previous/next pagination styles.

Listing Options

Here you can make team members link to their individual pages.

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.

Colors

This tab will allow you to create unique color schemes for your site. There are four sub tabs which control different sections of the theme. The Global tab which allows you to change mostly content related colors, the Header tab, the Hero tab and finally the Sidebar tab.

Typography Options

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.

Titles

The title tab will allow you to modify the default titles for the blog, team, search and 404 pages.

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 a page builder 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

This tab contains the custom CSS box which allows you to add custom styling if you need it.

Custom Widgets

Koehn comes with five custom built widgets to help you display your content optimally. Three of the widgets are purpose built to be used on the theme’s homepage. Under each widget you will find a small description on what each one does.

Theme – Latest Posts

The latest posts widget allows you to display a number of your latest posts, you can choose to them in post order or randomly, you can also select to show posts from a single category. There are three available layouts, Plain, Alternative and Alternative without excerpt.

Theme – Post Type Items

The post type items widget allows you to display a handpicked selection of posts or custom post type items using the seven available layouts. Select the post type you want to display and click the add item button, select the item and repeat.

Shortcodes

The theme comes with its own shortcodes which can output your posts in various configurations to help you create unique layouts.

The shortcode is [theme-items] and has a required attribute, the ids.

For example

[theme-items ids="44, 26, 93"]

will output the items that have these ids attached to them.

Optional attributes are:

  • post_type which will make the shortcode display only items of the selected post type, for example
    [theme-items ids="1,2,3" post_type="koehn_award" ]

    will only display award items even if one of the ids selected is from another post type. Defaults to any

  • layout this attribute defines the layout that will be created. Available values are
    '', 'alt', 'alt-nocontent', 'media', 'grid-2', 'grid-3', 'grid-4'

    Defaults to ”. For example

    [theme-items ids="1,2,3" layout="grid-3"]

    this shortcode will display three posts in a three column grid layout.

Next Steps

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

Neto

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.

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.

Image Sizes

The minimum recommended image sizes for Neto are:

  • Post thumbnail: 750x500px
  • Item thumbnail (used on widgets): 540x730px
  • Fullwidth featured image: 1140x500px
  • Hero image: 1920x300px
  • About me image: 360x220px

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.
  • MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
  • 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 Neto 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 neto_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 a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

Creating menus

Neto offers three menu locations. The Main,  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.

neto_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.

Haeder

Under the header tab you can customize the its appearance. There are three layouts available, the Menu next to logo, 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

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.

Product

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

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

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

Footer

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

Sidebar

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

Typography Options

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 a page builder 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

This tab contains the custom CSS box which allows you to add custom styling if you need it.

Custom Widgets

neto_widgets

Neto comes with thirteen custom built widgets to help you display your content optimally. Ten of these widgets are purpose built to be used on the theme’s Home page sidebar to create a widgetized homepage. They are all WooCommerce related, they will allow you to showcase specific products, products from a certain category, recent, top selling, best rated products and more.

Widgetized Homepage

To create a widgetized homepage you can create a new page and assign the Home page template to it from the page attributes panel on the right. Then under Customize > Widgets you can add any of the ten custom built home page widgets to the home page sidebar and create a unique front page for your online shop.

On the theme’s demo, Homepage V10 is a widgetized one. We have used the Theme – Best Selling Products to display 6 best sellers in a 3 column layout, the Theme – Sale Products to display 6 items on sale in a three column layout and the Theme – Recent Products to display 12 recent arrivals in a 4 column layout.

Shortcodes

All WooCommerce shortcodes are available to use, you can learn more about their usage here. Some of them have been modified by us to offer greater flexibility. We have added four custom attributes to some of the shortcodes. The attributes are:

  • title allows you to set a title for the content block
  • style which toggles between two available layouts, list and carousel, defaults to list if omitted
  • show_categories displays the product categories attached to a product accepts yes or no, defaults to yes
  • show_price displays the product’s price. Accepts yes or no, defaults to yes

The shortcodes affected are the following:

  • Product categoryall four custom attributes are available on this shortcode. Example:
    [product_category category="shirts" title="Our Shirts" style="carousel" show_categories="yes" show_price="no"]
  • Product categoriesthe title and style attributes are available on this shortcode. Example:
    [product_categories number="12" parent="0" title="Shop more!" style="list"]
  • Recent products: all four custom attributes are available on this shortcode. Example:
    [recent_products per_page="12" columns="4" title="New arrivals!" style"carousel" show_categories="yes" show_price="yes"]
  • Products: all four custom attributes are available on this shortcode. Example:
    [products ids="1, 2, 3, 4, 5" title="Check these out!" style="list" show_categories="no" show_price="no"]
  • Sale products: all four custom attributes are available on this shortcode. Example:
    [sale_products per_page="12" title="On Sale!" style="carousel" show_categories="no" show_price="yes"]
  • Best selling products: all four custom attributes are available on this shortcode. Example:
    [best_selling_products per_page="12" title="Best sellers!" style="list" show_categories="no" show_price="yes"]
  • Top rated productsall four custom attributes are available on this shortcode. Example:
    [top_rated_products per_page="12" title="Top Rated" style="list" show_categories="yes" show_price="no"]
  • Featured products: all four custom attributes are available on this shortcode. Example:
    [featured_products per_page="12" columns="4" title="Featured Products" style="carousel" show_categories="no" show_price="no"]
  • Product attribute: all four custom attributes are available on this shortcode. Example:
    [product_attribute attribute="color" filter="black" title="Black is in" style="list" show_categories="yes" show_price="no"]

The theme’s built in shortcodes can also be used with Elementor’s shortcode module.

Next Steps

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

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