Noozbeat

Theme installation

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

TIP: A more visual guide can be found here.

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

Image Sizes

The minimum recommended image sizes for Noozbeat are:

  • Post thumbnail: 750x440px
  • Fullwidth featured image: 1140x500px

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

Importing sample content manually

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

download_sample

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

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

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

Setting up your theme

1) Populating your blog

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

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

new_post

 

 

When finished with the above, proceed to the Article Information panel, below the main text editor.

article_info

In the Feature tab you can select whether the post will appear on the front page.

In the Source tab you can provide information regarding the article’s original source, in case you are reposting it

source

Finally, if you are writing a review, you can use the Review tab to fill in the reviewed attributes along with your score

review

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

2) Customizing the appearance

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

Go to Appearance > Customize and you will see this

customizer

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these chagnes 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

    Here you can toggle the  appearance of the header bar, social icons and top navigation. Additionally you can modify the colors of various header elements.

  • Menus

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

  • Site Identity

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

  • Layout Options

    Here you can toggle breadcrumbs (a plugin is required, please read the description on the menu item), independently modify homepage featured article section layout, the blog layout and the category/tag layout. Additionally you can configure the length the small article title and 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. The theme features six sidebars, the blog, the homepage, three footer sidebars and the header ad sidebar.

  • Social Networks

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

  • Posts Options

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

  • Footer Options

    Customize the theme’s footer by changing its color scheme and modify the copy text.

  • Static Front Page

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

  • Other

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

Theme pages

The Home page

You will need to create named Home and apply to it the Homepage Template from the Page Attributes panel on the right. Next set this page to be your static front page under Customize > Static Front Page.

The contact page

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

Widgets

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

widgets

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

Recreating the demo’s homepage layout

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

The layout of the featured area can be selected from the respective drop down menu under Customize > Layout Options, select the preferred one and save your changes.

The Homepage sidebar

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

  • We start with a Theme – Homepage Content widget displaying 4 posts from a selected category using Layout #1
  • next we have another Theme – Homepage Content widget displaying 4 posts from a category using Layout #2
  • following is a standard WordPress Text widget with an ad banner inside it
  • next we have another Theme – Homepage Content widget displaying 4 posts from a category using Layout #3
  • below we have another Theme – Homepage Content widget displaying 4 posts from a category using Layout #4
  • next is another Text widget with another ad banner,
  • one more Theme – Homepage Content widget is used, displaying 4 posts from a category using Layout #5
  • another Theme – Homepage Content widget is used, displaying 4 posts from a category using Layout #6
  • next is another Text widget with another ad banner,
  • next we have another Theme – Homepage Content widget displaying 4 posts from a category using Layout #7
  • next we have another Theme – Homepage Content widget displaying 5 posts from a category using Layout #8
  • following is a Theme – Homepage Content widget displaying 4 posts from a category using Layout #9
  • and finally a Theme – Homepage Content widget displaying 4 posts from a category using Layout #10

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

Eclecticon

About Eclecticon

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

Theme installation

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

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

Image Sizes

The recommended image sizes for the Eclecticon theme are:

  • Main Thumbnail: 1000x667px
  • Wide Thumbnail: 1600px in width, not limited in height.
  • Signature Thumbnail: 200px in height, not restricted in width
  • Square Thumbnail: 120x120px (about me widget)

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

Importing sample content manually

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

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

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

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

Setting up your theme

1) Creating theme pages

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

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

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

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

ReadingSettings

2) Populating your blog

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

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

3) Adding project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill in any text you have for the portfolio item and move to the Project Settings panel below.  Here you can add project Information, Videos, Images and modify the general color, by following the instructions in each tab.

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

4) Creating your menu

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

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

5) Customizing the appearance

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

Go to Appearance > Customize and you will see this

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 chagnes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

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

  • Header Bar Options

    Here you can toggle the tagline and configure the logo padding.

  • 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 sidebar, modify the excerpt size and select the pagination layout.

  • Front Page Carousel

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

  • Typography Options

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

  • Content Colors

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

  • Sidebar Colors

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

  • Social Networks

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

  • Posts Options

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

  • Project Options

    This tab allows you to toggle the appearance of related projects and modify the project button text on listing pages.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features two sidebars, the Blog Sidebar which appears on all posts & pages that have a sidebar, and the Menu Widgets which will display widgets below your menu.

  • Static Front Page

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

  • Other

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

Additional Information

Creating Galleries

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

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

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

Next Steps

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

Roxima

About

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

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

  • Post thumbnail: 850x400px
  • Hero Image, used in the custom content widget: 750x500px
  • Latest Posts widget featured: 750x420px
  • Small Square (Team & Testimonials): 165x165px
  • Slider Image: 1920x800px
  • Blog Listing Square: 400x400px
  • Clients Widget: 0x80px (at least 80px 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.
  • CSSIgniter Shortcodes : Use this plugin to help you render a variety of custom shortcodes. These shortcodes can be seen in the Shortcode page that comes with the sample content of Roxima.
    You will find a full documentation here

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. Make sure you have all suggested plugins installed before you continue. Let install it first:

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.

 

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

custom_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_2

this is how the above pricing item will look like

Pricing_3

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 chagnes 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 assing 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_creation

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

Oscillator

About

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

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 recommended image sizes for the Oscillator theme are:

  • Post Thumbnail: 750x420px
  • Header Image: 1920x100px
  • Slider: 1920x1060px
  • Square Thumbnail: 650x650px
  • Masonry Thumbnail: 750px 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.

  • 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.
  • Socials Ignited use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks, a guide can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

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 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 sample content from 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 oscillator_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, toggle the isotope effect 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, toggle the isotope effect 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 change the events’ sections titles, toggle the appearance of future or paste events, select the column number for the listing page, toggle the isotope effect 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 or Galleries Stapel 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, toggle the isotope effect 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, toggle the isotope effect 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

Go to Slideshow > Add New. Set the title. This is the text that will be displayed inside the slide. Set the featured image which will be cropped automatically to fit the slider. In the Slider Settings you can set the slider button text & URL, set up to two subtexts and choose whether they will be rotated. Slider behavior, like autoplay and slideshow speed can be configured under Appearance > Customize > Front Page.

The music player that appears at the bottom of the slider on the theme’s demo, can be configured under Appearance > Customize > Front Page.

4) Creating event items

Now you can start inserting your events from Events > New Event. 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 sidebar placement. 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 track.

Tracklisting

Each discography item, can have multiple tracks assigned to it. Tracks can be registered through the Tracks section, within the Discography Settings section.

To add a new track, press the Add Track button. This will add a new empty line for you to fill. First, add a title and optionally a subtitle.

If the track can be purchased online, enter the URL inside the Buy URL field.

You can provide a preview (or even the full song) for your visitors to listen to, by entering the URL of the MP3 file inside the Play URL field. You can upload and/or select an already uploaded song through the WordPress Media Manager, by pressing the button located inside the field.

You may allow your users to download the track, by entering the song’s URL inside the Download URL field. Please note that for locally hosted MP3s, the theme tries to force the visitor’s browser to download the file. If the file is on another server, whether it will be downloaded or just opened, is a matter of configuration of the remote server and not the theme’s issue.

You can also add the lyrics for each track, in the big Song Lyrics field.

Tracks can be re-arranged by dragging and dropping them in the appropriate order. Track numbers are automatically updated to be in sequence.

In order to remove a track, press the Remove Me button next to the desired track. Please be careful, as there is no confirmation of removal. If you publish/save/update the post, the change is irreversible.

Displaying the track listing

Once you add your tracks you may display them by using the [tracklisting] shortcode in the discography item’s main text box. By default, it will display the tracks of the current discography item, so the simplest usage is this:

[tracklisting]

You may also display the track listing of any discography item, in any other post/page or widget (that supports shortcodes) by passing the ID or slug parameter of the discography to the shortcode. E.g.:

[tracklisting id=”25″]

or

[tracklisting slug=”the-division-bell”]

You can also selectively display tracks, by passing their track number (counting from 1), separated by a comma, like this:

[tracklisting tracks=”2,5,8″]
and can limit the total number of tracks displayed like this:

[tracklisting limit=”3″]

Of course, you can mix and match the parameters, so the following is totally valid:

[tracklisting slug=”the-division-bell” tracks=”2,5,8″ limit=”2″]

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  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, 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 Oscillator consists of the homepage slider and 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.

Duplicating the demo’s homepage

On the theme demo’s front page we have three slider items, the audio player enabled and the following widgets in the Front Page sidebar:

  • Theme – Events widget, displaying three upcoming events
  • Theme – Items widget, displaying three gallery items in a three column layout
  • Theme – Hero text widget with some text on it
  • Theme – Tracklisting widget displaying the tracklisting of a discography item
  • and finally a Theme – Latest Post Type widget, displaying the latest six discography items in a three column layout.

The theme’s footer features an area for you to enter your copyright info, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options and use the appropriate box (5th box down).

12) Default header display

You can change the default background image displayed on the header by going to Appearance > Customize >Header Image and upload your own.

13) Homepage video and music player

Under Appearance > Customize > Front Page you can select to upload and display a video on the front page. You can also set up the audio player which appears below the slide, you can use either the tracklisting from an album, or a ShoutCast/IceCast stream which outputs mpeg audio.

14) Section titles

Default titles for sections and can be modified under Appearance > Customize > Titles.

15) Custom Widgets

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

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

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

The Customizer settings panel

All of the theme’s settings have been integrated in WordPress’ customizer. You can find them under Appearance > Customize. Here you can toggle the sticky header, upload your logo, set up the front page, change the color scheme of the site, add or remove widgets, modify section titles and more.

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

Olsen Light

About

Olsen Light is a blogging WordPress theme aimed at fashion/beauty bloggers.

Video Tutorial

Theme installation

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

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

add_new

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

search

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

install

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

activate

Image Sizes

The minimum recommended image sizes for Olsen Light are:

  • Post thumbnail: 665x435px
  • Slider images: 1110x600px
  • About me thumb: 200x200px

Useful Plugins

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

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

Importing sample content

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.

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 Olsen Light 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 olsen-light-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. and finally add a category and/or tag to the post.

create_post

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

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 chagnes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

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

  • Header Options

    Here you can toggle the  social icons on the header.

  • Menus

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

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo, footer logo and site icon. You can also manipulate the padding above and below the logo image.

  • Layout Options

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

  • Front Page Carousel

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

  • Widgets

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

  • Social Networks

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

  • Posts Options

    Here you can modify the related posts’ section title.

  • Footer Options

    Customize the theme’s footer toggling the appearance of social icons, credits and the WP Instagram slideshow.

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

Theme pages

The contact page

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

Widgets

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

light-widgets

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

Formatting the newsletter widget

Most newsletter services provide an HTML form for you to place in a text widget and use in any sidebar. You can apply the theme’s default styling on that form by wrapping it in the div displayed below

<div class="widget_ci_newsletter">
<!–– Replace with form HTML ––>
</div>

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

Salon

About Salon

Salon is a beauty, hair & spa WordPress theme. It allows you to display services available by your business, the personnel providing them and photo galleries related to your work. This is done mostly by using five different Custom Post Types: Slideshow, Videos, Galleries, Team members and Services. All the above act as standard WordPress posts or pages but each of them has extra fields which differentiate them from the former. The homepage is comprised of custom widgets specially crafted to bring those custom post types together as discussed later on in the documentation.

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.

WooCommerce

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

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

Image Sizes

The recommended image sizes for the Salon theme are:

  • Post thumbnail: 750x500px
  • Blog thumbnail: 750x370px
  • Site header: 1920x160px
  • Homepage slider: 1920x850px
  • Square thumbs (widgets, listing pages etc): 750x750px
  • Masonry thumbs: 750px in width, not restricted in height
  • Blog full width listing thumbs: 1140x380px

Please keep in mind that any image uploaded should be larger than 750px for best results, and generally for each section at least larger or equal than its recommended 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.

  • 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.
  • Socials Ignited use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks, a guide can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

Importing sample content

The easiest way to get started and find your way around using this theme, is by installing it into a fresh WordPress installation, and importing our sample content.
To get it go to CSSIgniter settings > Site Options, scroll all the way down and click the Download sample content 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), 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 Salon by clicking here

Importing widgets

Notice: Please make sure you have installed and activated the WooCommerce plugin before importing widgets, otherwise the WooCommerce-specific widgets will not be inserted.

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 salon_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 basic 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:

  1. “Home” this will serve as your homepage, assign to it the “Frontpage Template” page template from the “Page attributes” panel and publish the page. In the Front Page Options panel that appears below the main text editor you can select a particular category of slider items to display on the homepage’s slider, if left empty, all slider items will be used.
  2. “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.
  3. “Contact” here you can place your contact form which you will create using the Contact Form 7 plugin.
  4. “Galleries” in this page you will list your features, apply to it the Galleries Listing template. From the Galleries Listing Options panel that appears once the template is set, select the number of columns you want the template to have, toggle masonry and/or isotope filtering and set the number of items displayed per page, then publish the page.
  5. “Videos” in this page you will list your features, apply to it the Video Listing template. From the Video Listing Options panel that appears once the template is set, select the number of columns you want the template to have, toggle masonry and/or isotope filtering and set the number of items displayed per page, then publish the page.
  6. “Services” 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, toggle masonry and/or isotope filtering and set the number of items displayed per page, then publish the page.
  7. “Team” in this page you will 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, toggle masonry and/or isotope filtering and set the number of items displayed per page, then publish the page.

(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 Slideshow items

To add items to your homepage’s slider go to Slideshow > Add New, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage, images for the slider should be at least 1920×850), then in the “Slide Options” panel you can optionally set a URL to which the user will be redirected when clicking on the slide button, change the button’s text or use a URL to a video which will be displayed on the slider item, , finally, publish the slider item. Slider speed and autoslide functionality can be adjusted under CSSIgniter settings > Homepage options.

4) Adding Video items

To add a video item go to Videos > Add New, set the item’s title, apply a featured image, add any text in the editor and move to the Video Settings panel below. In the Details tab you can set the date the video was created and add the video’s URL in the designated box. Next in the Information  tab, you can create fields with information related to the video, such as length, cost etc, finally in the Sidebar tab you can select whether you want the post’s sidebar to the left or right. Once done, publish the item.

5) Adding Gallery items

To add a gallery item go to Galleries > Add New, set the item’s title, apply a featured image, add any text in the editor and move to the Gallery Settings panel below. Here you can toggle the image captions, upload your images and select the number of columns you want the gallery item to have. For info on how to upload the images check the Additional Info section of this document. Once done, publish the item.

6) Adding Team Members

To add a team member go to Team Members > Add New, set the person’s name as a title, apply a featured image, add any text in the editor and move to the Team Settings panel below. In the Information  tab, you can create fields with information related to the person, such as job title, training etc, finally in the Sidebar tab you can select whether you want the post’s sidebar to the left or right. Once done, publish the item.

7) Adding Services

To add a service item go to Services > Add New, set the item’s title, apply a featured image, add any text in the editor and move to the Service Settings panel below. In the Information  tab you can set the service’s price and create fields with information related to the it, such as cost, session length etc, finally in the Sidebar tab you can select whether you want the post’s sidebar to the left or right. Once done, publish the item.

8) Adding products

(optional – only if you choose to use WooCommerce)
The most important thing of your e-shop are your products, to add them check this detailed guide provided by WooThemes here.

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 secondary menu which appears just above the main one, it can be created and set just like the main one.

(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 Salon consists of the slideshow items and a widgetized area to provide maximum flexibility on the content to be displayed. The widgetized area can be accessed under Appearance > Widgets > Front Page Widgets.

Duplicating the demo’s layout

The homepage on the demo consists of three slideshow items and a few widgets. These are: One CI Callout, CI Text with some introductory text, a CI Items displaying three service posts in a three column layout. One CI Split Content displaying a single page, one CI Items displaying three team members on a three column layout, one CI Items displaying three galleries on a three column layout, one CI Items displaying six products on a three column layout and a CI Items displaying two video items in a two column layout.

TIP: For a more detailed guide on how to use our widgets to structure your homepage have a look at this blog post.

The theme’s footer features an area for you to enter your copyright info, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options (5th box down).

12) Change the blog’s layout

Under CSSIgniter Settings > Blog Options you can select whether you want a blog with a sidebar or a full width one and the number of columns it will have if full width.

13) e-Commerce Options

Under CSSIgniter Settings > e-Commerce Options you can customize the number of columns and products on shop pages, enable or disable related products and more.

14) Widgets

The theme features thirteen custom widgets specially crafted to help you display your content. They can be found under Appearance > Widgets

salon_widgets

How to use the page builder template

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

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

ci_page_builder_template

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

Additional Information

Creating Galleries

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

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

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

Next Steps

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

Olsen

About

Olsen is a premium blogging WordPress theme for aimed at fashion/beauty bloggers.

Theme installation

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

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

Image Sizes

The minimum recommended image sizes for Olsen are:

  • Post thumbnail: 665x435px
  • Slider images: 1110x600px
  • Frontpage Inset image: 690x455px
  • Looks template image: 750x1000px

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

 

Setting up Woocommerce with Olsen

Setting up your theme

1) Populating your blog

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

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

 

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

If you select a Gallery post format a new metabox named Gallery Details will appear below Post Utilities.
gallery_details

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

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

2) Customizing the appearance

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

Go to Appearance > Customize and you will see this
customize_panel

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 chagnes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

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

  • Header Bar Options

    Here you can toggle the  social icons on the header. Additionally you can modify the colors of various header elements.

  • Menus

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

  • Site Identity

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

  • Layout Options

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

  • Front Page Carousel

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

  • Typography Options

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

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. 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. The theme features two sidebars, the Blog Sidebar which appears on all posts & pages that have a sidebar, and the Footer Sidebar which can only display the widget provided by the WP Instagram Widget plugin.

  • Social Networks

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

  • Posts Options

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

  • Pages Options

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

  • Footer Options

    Customize the theme’s footer by changing its color scheme and toggling the reveal effect, tagline, search bar and social icons.

  • Static Front Page

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

  • Other

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

Theme pages

The contact page

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

The Looks pages

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

Widgets

Along with WordPress’s widgets we have created 4 custom ones. They are really simple and they let you display various important info around the site.
widgets
You will find a small description in each widget detailing its usage.

How to use the page builder template

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

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

ci_page_builder_template

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

Additional information

Creating Galleries

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

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

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

Next Steps

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

True North

About True North

True North is a free premium portfolio WordPress theme. Using True North you can easily display your work and thoughts. This can be done primarily by using the Portfolio custom post type, which acts as normal post type boosted by additional functionality to help you reach the desired layout on your site.

Theme installation

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

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

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 True North theme are:

  • Post Thumbnail: 945x680px.
  • Header image: 2000x500px

 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.
  • Socials Ignited use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks, a guide can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in 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 etc.

Importing sample content

The easiest way to get started and find your way around using this theme, is by installing it into a fresh WordPress installation, and importing our sample content.
To get it go to CSSIgniter settings > Site Options, scroll all the way down and click the Download sample content 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 True North 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 truenorth_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

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

Setting up your theme

1) Creating theme pages

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

  1. “Home” this will serve as your homepage, assign to it either the “Homepage Template” from the “Page attributes” panel.
  2. “Blog” this will be your posts page. Just create it, no further action needed.
  3. “Contact” (optional) here you can place your contact form which you will create using the Contact Form 7 plugin.
  4. “Portfolio Listing” this page will display your portfolio items. Apply the “Portfolio listing “ template from the “Page attributes” panel and then from the Portfolio listing options panel that will appear, select how many columns you want on your layout, how many items you want to display and enable isotope filtering.
    portfolio_listing

(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 portfolio items

To add a new portfolio item go to Portfolio > Add New. Set a featured image from the panel on the right, fill in any text you have for the portfolio item and move to the Portfolio Details panel below. Please read thoroughly the Information tab, it contains useful info on how the gallery functions on single portfolio items and will help you get the layout you want. Next proceed to the Gallery tab, select a gallery layout and upload your images. Move to the Details  tab and add details for your portfolio item, such as materials used, cost, equipment used etc. Finally, if you have a video for the portfolio item you can use it in the Video tab. Once done filling all necessary info, publish the portfolio item.

4) Creating your menu

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

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

5) Setting up your homepage

The homepage on True North consists of only a widgetized area. You can add widgets to the sidebar, under appearance > widgets to built your homepage.

Duplicating the demo’s layout

The homepage on the demo features the CI Text with a welcome text and the CI Latest Posts widget displaying 6 portfolio items in a three column layout.

6) Changing Footer text

The theme’s footer features an area for you to enter a line of text for copyright information. To change the text you need to go to CSSIgniter settings > Site options and use the appropriate box (6th box down).

You can individually set a footer logo on the theme. To do that go to CSSIgniter settings > Site options and use the appropriate box (5th box down).

8) Toggle sidebar on Blog/Single Posts

You can select whether the blog & single posts will have a sidebar or not. To do that go to CSSIgniter settings > Appearance options and select the desired layout from the drop down menu.

9) Add a header image

To apply a default header image go to CSSIgniter Settings > Appearance Options and upload it in the Header Display box. On single posts, pages and portfolio items you can apply custom header images by utilizing the Header Background metabox.

10) Custom Widgets

The theme features eight custom widgets which are displayed below
widgets

All widgets can be accessed from Appearance > Widgets. Below each widget you will find a small description explaining their functionality.

The CSSIgniter settings panel

Last but not least, under Appearance > CSSIgniter settings, you can find our custom built settings panel. From here you can manipulate various aspects of your theme, including, but not limited to, changing your logo, setting a custom background, changing color scheme and applying custom styles via the custom CSS tab. All options feature a description so you instantly know their provided functionality.

How to use the page builder template

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

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

ci_page_builder_template

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

Additional Information

Creating Galleries

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

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

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

Next Steps

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

Oikia

About Oikia

Oikia is our first real estate WordPress theme. It is designed to help you promote your properties in a clean and efficient way. It features two custom post types, Properties and Agents. The above act as standard WordPress posts but each of them has extra fields or custom layout which differentiates them from the former. The homepage is comprised of the homepage slider which displays properties of your choosing and custom widgets specially crafted to bring those custom post types together as discussed later on in the documentation.

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 Oikia theme are:

  • Fullwidth homepage slider: 1920×670
  • Property slider: 850×530
  • Post thumbnail: 750×400
  • Square thumbnail: 555×555 (for horizontal layouts on agent & property listing, single agent & property pages & the carousel widget)
  • Map thumbnail: 320×190
  • CI Item thumbnail (general listing page image): 555×400

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.
  • Socials Ignited use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks, a guide can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in 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 etc.

Importing sample content

The easiest way to get started and find your way around using this theme, is by installing it into a fresh WordPress installation, and importing our sample content.
To get it go to CSSIgniter settings > Site Options, scroll all the way down and click the Download sample content 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), 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 Oikia by clicking here

Once the sample content is imported, 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
then navigate to Appearance > Menus  and set the imported menu to be your main theme’s menu.

 

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 oikia_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

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

Setting up your theme

1) Creating theme pages

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

  1. Home this will serve as your homepage, assign to it either the Homepage template from the Page attributes panel on the right.
  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 Jetpack’s contact form add-on.
  4. Property Listing this page will display your properties. Apply the Properties Listing template from the page attributes panel, in the Property Listing Options panel that appears you can select the number of columns you want your listing page to have, toggle the appearance of  a map, change the layout of the listed properties to horizontal and finally select whether the listing page will have a sidebar or not.
    property_listing
  5. Agent Listing this page will display your agents. Apply the Agents Listing template from the page attributes panel and proceed to the Agent Listing Options panel to select how many columns will the agent listing page have and how many items per page it will display.
    agent_listing

(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 Properties

Let’s move to the most important bit, adding our properties. Start with creating the various attached info for your properties, like types, statuses, amenities and locations. Go to Properties > Types  and create a few, for example condos, villas, apartments etc, next go to Properties > Statuses and create new ones, like “for sale”, “for rent” etc, go to Properties > Amenities and add the amenities, for example, garage, fireplace, pool etc, finally go to Properties > Locations and fill in the locations you are active on.

Once you are done adding the info above, go to Properties > New Property, add a title, a featured image, some text and make sure you check the relevant boxes for the taxonomies we created before (type, status, amenities & location), next move to the Property Details panel below the main text editor.
property_details

The property details panel has nine tabs which will allow you to fill in all necessary info regarding your property.

  1. In the General tab you can fill in the property ID to help you and your clients refer to and identify a property, set open house date/dates and select whether this will be a featured property, which will place it on the homepage’s slider.
  2. In the Address tab you can add the address of the property and its position on the map. You can leave the address boxes blank and set the map to display a non-exact location so you won’t lose your competitive advantage by revealing the property’s exact location.
  3. In the Pricing you can add the property’s pricing information.
  4. In the Attributes tab you can fill in area, bedroom, bathroom and garage numbers.
  5. In the Images tab you can add photos from the property and floor plans if you wish to do so.
  6. Similarly in the Videos tab you can add the URL of a YouTube/Vimeo video you have created for your property.
  7. In the Useful Data tab you can add information that might help the customer get a better idea on the area where the property is located, like crime rates, air & noise pollution etc.
  8. In the Agent tab you can select the agent that’s responsible for the property.
  9. Finally, in the Attachments tab you can upload documents related to the property.

Once you are done filling the information above, publish the property.

4) Adding agents

To add an agent go to Agents > New Agent, add the agent’s name as the title, add a featured image, any relevant text in the text editor and move to the Agent Details panel below.

agent_details

in the Contact tab you can fill in the agent’s contact details and in the Social tab links to the agent’s social profiles in the four major social networks.

5) Creating your menu

Now that your content is in place, you need to set up the menu. Go to Appearance > Menus and create a menua, name them “Main menu”. Customize it by adding menu items and then go to “Manage Locations”, set the menu on their respective position and save.

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

6) Adding content to your Homepage

The homepage on Oikia consists of the slider and the Homepage widgetized area. You can access this area and add content to it in Appearance > Widgets.

The slider items are the featured images of selected properties. To add a property on the homepage slider edit the property and check the Featured Property box in the General Tab in the Property Details metabox.

Duplicate the demo’s layout

On the demo’s homepage we have three slider items, a CI Property Filters widget to create the search bar, a CI Latest Posts widget which displays the latest four properties in a two column layout, a CI Hero widget, a CI Properties widget which displays four random properties by a selected agent, a CI Items widget which displays two agents in a two column layout, the CI Property Map widget and finally a CI Carousel Latest widget displaying the latest 15 properties in a carousel.

The theme’s footer features an area for you to enter your copyright info, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options and scroll down to the Footer text box.

8) Change the header contact info

To edit the contact info displayed on the header you need to go to CSSIgniter Settings > Contact Options.

9) Modify section titles

You can modify the titles for the blog listing page, the search page and the 404 page under CSSIgniter Settings > Section Titles.

10) Property options

Under CSSIgniter Settings > Property Options you need to select the default properties search page and you can also set the default area unit & currency symbol, finally you can select the automatic property ID box, so the theme assigns IDs to your properties automatically, if you don’t have a predefined ID scheme of your own.

11) Widgets

The theme features 14 custom widgets designed to help you display your properties easily and efficiently. You will find a small description on each widget explaining its functionality.

How to use the page builder template

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

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

ci_page_builder_template

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

Additional Information

Creating Galleries

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

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

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

Next Steps

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

Hugo

About Hugo

Hugo is an e-commerce theme for WordPress. It is WooCommerce compatible and allows you to easily setup a functional and beautiful e-shop to sell your merchandise. Its homepage consists of a slider and a single widgetized area which allows you to use widgets to display your products.

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.

WooCommerce

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

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

Also go to WooCommerce > Settings and in the Products tab set the image sizes that best fit your shop under the Product Image Sizes section, in case you need different values than the theme sets by default.

Image Sizes

The recommended image sizes for the Hugo theme are:

  • Featured Thumbnail (used in single posts/pages) : 750x400px
  • Fullwidth image: 1140x475px
  • Header Image: 1920x200px
  • Default shop catalog image: 750x665px
  • Slider: 1920x1000px
  • Listing Page Thumbnail: 500x390px

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.
  • Socials Ignited use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks, a guide can be found here.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in 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

The easiest way to get started and find your way around using this theme, is by installing it into a fresh WordPress installation, and importing our sample content.
To get it go to CSSIgniter settings > Site Options, scroll all the way down and click the Download sample content 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), 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 Hugo by clicking here

Importing widgets

Notice: Please make sure you have installed and activated the WooCommerce plugin before importing widgets, otherwise the WooCommerce-specific widgets will not be inserted.

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 hugo_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

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

Setting up your theme

1) Creating theme pages

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

  1. “Home” this will serve as your homepage, assign to it the “Frontpage” template to it, from the “Page attributes” panel. See below for homepage configuration.
  2. “Blog” this will be your posts page. Just create it, no further action needed.
  3. “Contact” (optional) here you can place your contact form, use either the default, the left sidebar or the fullwidth template, depending on the layout you want for the page. Plugins like Contact Form 7 or Jetpack can help you add contact forms.

(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 Slideshow items

To add items to your homepage’s slider go to Slides > New Slide, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage, images for the slider should be at least 1920×1000), add text in the text editor (optional), then in the “Slider Details” panel you can optionally add a subtitle, set a URL to which the user will be redirected when clicking on the slide button and change the button’s text, finally, publish the slider item. Slider speed and autoslide functionality can be adjusted under CSSIgniter settings > Homepage Options.

Slider items can be separated into categories, you have the ability to display one of these categories on your homepage by selecting it in the Homepage Options panel drop down. This allows you to create thematic sliders and switch between them very easily. For example, if your e-shop features weekend offers, you can create two slider categories, one for the featured items you want to display during working days and one for the weekend ones and switch between them at will.

4) Adding products

The most important thing of your e-shop are your products, to add them check this detailed guide provided by WooThemes here.

5) 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 menu next to the cart icons on the top right of the page, to use it create a new menu and assign it to the Top Menu location under manage locations.

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

6) Setting up your Homepage

After you create your slideshow items as described above, navigate to Appearance > Widgets and assign widgets to the Homepage sidebar. Τhe following widgets are suggested for the FrontPage Widget Area which appears as your homepage’s main content:

  • CI Text
  • CI Product Categories
  • CI Items
  • CI Callouts
  • CI Carousel widgets

Duplicate the demo’s layout

On the theme’s demo homepage we have our slider featuring three slider items and the following widgets: A CI Text widget with some information, a CI Product Categories widget displaying 3 product categories in a 3 column layout, a CI Newsletter widget, a CI Items widget displaying six products in a three column layout, a CI Callouts displaying three callout items, a CI Items widget displaying two posts in a two column layout and finally a CI Carousel Latest widget displaying the twelve latest products.

The default theme’s header display image can be set under CSSIgniter Settings > Appearance Options.
You can also set custom header images for posts & pages by uploading your custom image in the Header background metabox located below the page’s/post’s main text editor.

The theme’s footer features an area for you to enter your copyright info, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options and use the appropriate box (5th box down).

8) e-Commerce options

Under CSSIngiter settings > e-Commerce options you can toggle the display of up-sells & related products on the single product page and set the number of columns and products your shop listing page will have.

8) Custom Widgets

The theme features nine custom widgets which are displayed below to help you display your content better.
All widgets can be accessed from Appearance > Widgets. Below each widget you will find a small description explaining their functionality.

The CSSIgniter settings panel

Last but not least, under Appearance > CSSIgniter settings, you can find our custom built settings panel. From here you can manipulate various aspects of your theme, including, but not limited to, changing your logo, setting a custom background, changing color scheme and applying custom styles via the custom CSS tab. All options feature a description so you instantly know their provided functionality.

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