Mavika

Zip file contents

In the zip file, you will find the following:

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

Installing the theme

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

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

mavika_activate

 

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

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

Installing WooCommerce

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

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

wc_install

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

wc_activate

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

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

Installing Visual Composer

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

upload_plugin

Importing sample content

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

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

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

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

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

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

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

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

Importing widgets

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

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

Adding a new post

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

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

new_post

Creating a page for your posts

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

settings_reading

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

Adding Products

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

new_product

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

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

Setup the shop page

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

wp_shop_page

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

How to use the page builder template

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

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

ci_page_builder_template

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

Creating menus

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

Customizing the theme

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

mavika_customizer

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

Header Options

Header bar

header-bar

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

Appearance

header-appearance

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

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

Site Identity

mavika-siteidentity

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

Layout Options

mavika_layoutoptions

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

Post Listing Options

post_listing

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

Posts Options

mavika-posts-options

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

WooCommerce

Shop

wc_shop

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

Shop

wc_product

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

Colors

Global

color_global

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

Header

color_header

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

Footer

color_footer

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

Sidebar

color_sidebar

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

Typography Options

mv_typography

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

Widgets

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

Social Networks

social_networks

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

footer_options

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

Static Front Page

static_front_page

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

Other

other_settings

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

Custom Widgets

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

About Me

ms_about_me

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

Social Icons

mv_social_icons

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

Latest Posts

mv_latest_posts

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

Scandinavia

Zip file contents

In the zip file, you will find the following:

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

Theme Installation

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

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

activate_theme

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

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

Importing sample content

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

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

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

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

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

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

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

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

Importing widgets

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

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

Setting up your theme

1) Populating your blog

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

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

new_post

 

In the Layout Options metabox you can switch the sidebar position on your post.

post_utilities

If you select a Gallery post format a new metabox named Gallery Details will appear below the editor.

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 Options

    Here you can toggle the tagline, search bar and header social icons. Additionally you can modify the colors of various header elements. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.
    color_change
    You can also modify the header background image under this tab, click the remove button to delete the image entirely or the change file one to upload your own background imageheader_bg

  • 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 and site icon.

  • Layout Options

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

  • Typography Options

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

  • Content Colors

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

  • Sidebar Colors

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

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features two sidebars, the Blog Sidebar which appears on all posts & pages that have a sidebar, and the Inset 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

    In this tab you can modify the footer’s background image and the footer copy 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.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs, additionally you can add a Google analytics tracking ID on the corresponding box to allow you to track visitors on your site.

Widgets

Along with WordPress’s widgets we have created 2 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.

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.

Useful Plugins

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

Image Sizes

The minimum recommended image sizes for Scandinavia are:

  • Post thumbnail: 750x500px
  • Featured images: 1040x600px

Untold Stories

Zip file contents

In the zip file, you will find the following:

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

Theme Installation

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

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

activate_theme

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

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

Image Sizes

The minimum recommended image sizes for Untold Stories are:

  • Post thumbnail: 690x455px
  • Slider images: 1050x550px
  • Author thumbnail: 200x200px
  • Looks template image: 690x1000px

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 go to the /wordpress/sample content/ folder of the zip file. Additionally you can click the link in the notice that will appear on your dashboard immediatelly after activating the theme.
download_sample
Extract the zip file you downloaded to get the sample content & widgets files.

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

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

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

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

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

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

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

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

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

Setting up your theme

1) Populating your blog

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

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

new_post

 

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

post_utilities

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

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

2) Customizing the appearance

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

Go to Appearance > Customize and you will see this
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 sticky header, search bar and header social icons. Additionally you can modify the colors of various header elements. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Menus

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

  • Site Identity

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

  • Layout Options

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

  • Front Page Slider

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

  • Typography Options

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

  • Content Colors

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

  • Sidebar Colors

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

  • Widgets

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

  • Social Networks

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

  • Posts Options

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

  • Pages Options

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

  • Footer Options

    Customize the theme’s footer by changing its color scheme and toggling the reveal effect, 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

Mykonos

About

Mykonos Resort is a beautiful, responsive WordPress theme specifically designed to showcase your hotel/resort in style.

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. WORDPRESS In this folder you will find the zip file which contains the theme, called “mykonos.zip”

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Install Themes tab. Click upload and Browse. Select the mykonos.zip located in the WORDPRESS folder and click OK. Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Mykonos Resort theme!

The CSSIgniter Mykonos plugin

Much of the theme’s functionality, like custom post types and custom fields, depends on the CSSIgniter Mykonos plugin. Installation of the plugin is mandatory if you want to fully utilize the Mykonos Resont theme’s functionality.

Plugin installation

Once you activate the theme you will be redirected to the CSSIgniter Settings panel, where you will see this notice:

install_plugin

click the Begin installing plugin link to proceed. Next you will see this screen

install_plugin_2

click the Install link below the plugin’s name, once done you will be notified that the plugin was installed and activated successfully.

install_plugin_success

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

Minimum image sizes

  • Homepage Slider: 1920x650px
  • General thumbnail (used on listing pages and widgets): 750x450px
  • Fullwidth image (used on single room/attraction sliders): 1140x640px

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

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.

Theme settings

To access the theme’s settings panel go to Appearance > CSSIgniter Settings. Let’s go through the various tabs.

Site Options Tab

With the first option you can upload your logo if it’s an image logo, you have the option to add a normal and a high resolution logo (for retina-type devices), also you can customize the footer’s logo. If you want text go to Settings > General and set the Site Title and the Tagline if you wish.

Next you have the option to set a favicon and touch icons for mobile devices.

Finally towards the end of this tab there is a text box which allows to you customize copyright info.

Homepage Options

Here you can toggle the slider’s automatic behavior, modify the slide timing etc.

Display Options

The descriptions for each option are detailed so just follow the instructions for each box and set the settings that you want.
We will see various other options and how we set them as we move along.

Appearance options

Here you can select a predefined color scheme, a header and booking form background. You can also uncheck the checkbox Disable custom background and set your own custom background color and image if you wish.

Contact options

Here you can select your default booking page (this will make the booking bar appear on the slider and the top of the footer area), the email where the booking requests will go and the coordinates for the contact page’s map section.

Newsletter options

Here you can configure your Mailchimp or Campaign monitor account to work with the theme’s newsletter widget.

Weather Options

For info on how to set up the weather display please have a look at this guide

Twitter Options

Here you can connect the theme to your twitter account so you can display your latest tweets via the CI Tweets widget.

Google Options

Copy / paste your Google Analytics code in this box.

FeedBurner Feed URL

Copy / paste your feedburner feed code in this box.

BuySellAds options

Copy / paste your BSA code in this box.

Custom CSS

If you are familiar with CSS and you want to add some extra styles just insert them in this area.

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 /w Full Slider” template from the “Page attributes” panel.
  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. Assign to it the “Contact” template and then navigate to CSSIgniter settings > Contact options to set your address the coordinates for your map (map can also be disabled from here).
  4. “Booking” your booking form will be placed here, apply the “Booking Page” template. Once you publish the page go to CSSIgniter settings > Contact options select the Booking page, fill in the e-mail you want your booking inquiries sent to and save changes.
  5. “Gallery Listing” this page will display your galleries. Two layouts are available either a three column layout by applying the “Gallery listing 3 Cols” template from the page attributes panel, or a four column layout by applying the “Gallery listing 4 Cols” one.
  6. “Room Listing” this page will display your rooms. Two layouts are available either a three column layout by applying the “Room listing 3 Cols” template from the page attributes panel, or a four column layout by applying the “Room listing 4 Cols” one.
  7. “Services Listing” this page will display your services. Apply to it the “Services Listing” template from the page attributes panel.
  8. “Attractions Listing” this page will display your attractions. Two layouts are available either a three column layout by applying the “Attractions listing 3 Cols” template from the page attributes panel, or a four column layout by applying the “Attractions listing 4 Cols” one.

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

settings_reading

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

blog

Adding Galleries

To create a new gallery item go to Galleries > Add New, set the gallery’s name as a title, enter some text if you wish in the content editor, set a featured image and proceed to upload your images by clicking the “Add Images” button in the “Gallery Details” panel (please read the “Creating Galleries” section below, first) and finally publish the gallery item. Single gallery column numbers can be controlled from the Gallery settings panel below the main text editor.

gallery

Adding Videos

To create a new video item go to Videos > Add New, set the videos’s name as a title and in the “Video Settings” box below paste in the URL to your video.

video

Adding Rooms

To create a new room item go to Rooms > new Room, set the room’s name as a title, enter relevant information in the content editor, and set a featured image. Then move to the “Room Details” panel. Here you can add images to your room’s slider (please read the “Creating Galleries” section below, first), add the room’s amenities, add a price and let visitors know if current price is an offer.

room

Adding Slider items

To add items to your homepage’s slider go to Slider Items > new Slider Item, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage), enter any text you might want to show when the single slider item is viewed (please notice that any text entered here will appear only if you leave the URL box blank in the slider settings below). Next move to the Slider Details panel, give the slider a subtitle, a custom link and change the ‘Read More’ button text if you so desire. Finally, publish the slider item. Homepage slider behavior can be controlled under CSSIgniter settings > Homepage options.

slider

Adding Services

To create a new Service, go to Services > New Service, set a title for your service, add relevant text in the text editor, add a featured image and publish your service.

service

Adding Testimonials

To create a new Testimonial, go to Testimonials > New Testimonial, set the author’s name as the title, and the testimonial’s text in the content box, finally, publish it. Testimonials can be used in any widgetized area you like by using the “CI Item” widget and will appear in room listing pages.

testimonial

Adding Attractions

To add an attraction go to Attractions > Add New. Add the attraction’s name as a title, any text necessary and upload a featured image. In the Attraction Details panel you can upload images related to the attraction to create a gallery (please read the “Creating Galleries” section below, first), when finished, publish the item.

attraction

Creating your menu

Now that your content is in place, you need to set up the menu. Go to Appearance > Menus and your menu, name them “Main menu”, add items to it and then go to “Manage Locations”, set the menu to be the site’s main menu and save.

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

Adding content to your Homepage

The homepage on Mykonos features a slider and a widgetized area, the “Homepage” sidebar.

Duplicate the demo’s layout

On the demo’s homepage we have three slider items and the following widgets on the homepage sidebar: one CI Items widget, with a testimonial selected, following is another CI Items widget displaying three rooms, next we have another CI Items with four attractions and finally we have another CI Items displaying two videos.

Custom Widgets

The theme features 10 custom widgets built to help you display your content better. You can access theme under Appearance > Widgets. You will find a small description about each widget’s functionality below its title.

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

Chords

About

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

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

If you wish, apply the “Fullwidth Template” to your Account, Cart and Checkout pages (for best visual experience). You can leave the “Shop” page as it is, you most probably need a sidebar on this page. Then, navigate to WooCommerce > Settings.

  • Navigate to the “Products” options from the top menu tabs of the WooCommerce settings’ page and scroll down to “Product Image Sizes”. It is advised that for the “Single Product Image” you set the Height option to 9999 and uncheck the Hard Crop option http://d.pr/i/QnBi. This way the main image in your product page will not be cropped or altered.

Setting up your WooCommerce Widgets

Once you’ve activated the WooCommerce plugin, you will find a new sidebar (widget area) in your Widgets’ page through the WordPress Dashboard. This new sidebar (Shop Sidebar) controls the widgets that will be displayed in the listing and product pages. You can apply any widget you want, including the CSSIgniter custom widgets. Finally, you can also apply WooCommerce widgets in the frontpage or footer widget areas.

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. PSD Contains PSD files of the template.
  4. SAMPLE CONTENT  contains the following three sub-folders
    1. light sample files for the light version
    2. rock sample files for the rock version
    3. radio sample files for the radio version
    4. solo sample files for the solo version
  5. WORDPRESS In this folder you will find the zip file which contains the theme, called “chords.zip”

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Add New. Click upload and Browse. Select the chords.zip located in the WORDPRESS folder and click OK. Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Chords theme!

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

NOTE: If you import the sample content without having the WooCommerce plugin activated you will get some errors regarding the ‘product’ post type, you can safely disregard them, WooCommerce is an optional plugin, if you don’t need to sell anything on your site, you can use the theme without it. The same thing goes for importing widgets without having, for example, the Socials Ignited or the WP Instagram widget plugins active, you might get a notice that the theme does not support the widget, which can also be safely ignored.

  • 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

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

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.

CSSIgniter Settings

The theme’s options panel is located under Appearance > CSSIgniter Settings, let’s have a look at the functionality provided by it.

Site Options Tab

With the first option you can upload your logo if it’s an image logo, you have the option to add a normal and a high resolution logo (for retina-type devices). If you want text go to Settings > General and set the Site Title and the Tagline if you wish.

Next you have the option to set a favicon and touch icons for mobile devices.

Here you can also set the footer text with your copyright information etc which will appear at the bottom of all pages.

Homepage Options

Here you can control the slider on the frontpage, whether it will be automatic, how fast it will slide and what the transition effect will be.

Display Options

The descriptions for each option are detailed so just follow the instructions for each box and set the settings that you want.
We will see various other options and how we set them as we move along.

Appearance options

Here you can set the default sidebar position for the site, select a predefined color scheme or uncheck the checkbox Disable custom background and set your own custom background color and image if you wish, upload a header image and toggle the surrounding border.

e-Commerce Options

Here you can select whether you want to show up-sells and related products on your single product view, also you can select the number of products per page and the number of columns on your shop page.

Newsletter Options

Here you can configure your newsletter manager service to work with the theme’s newsletter widget.

Music Player Options

Here you can set up the theme’s music player. You can use either the tracklisting from an album, or a ShoutCast/IceCast stream which outputs mpeg audio. You can also select if you want the audio to auto-play when the page load, or not (default).

Now playing feature

You can enable fetching and displaying the title of the song currently playing. Please note that in order for this to work you need a ShoutCast server v2.0 or higher and your stream URL needs to be in the form of IP:port i.e. “http://192.102.192.1:8006/stream;”

Blog Options

Here you can customize the blog layout and column number.

Twitter Options

Here you can connect the theme to your twitter account so you can display your latest tweets via the CI Tweets widget.

Google Options

Copy / paste your Google Analytics code in this box.

Archive Options

Here you can set a number of items to be displayed in each taxonomy listing page, the number of columns the listing page will have and toggle the isotope filtering and masonry layout.

FeedBurner Feed URL

Copy / paste your feedburner feed code in this box.

Custom CSS

If you are familiar with CSS and you want to add some extra styles just insert them in this area.

Section Titles

Here you can customize the title for each one of the theme’s sections. The section title is the title displayed between the menu and the content of the page.

Homepage setup

If you have imported the sample content these pages have been created for you :)

Go to Pages > Add new and create a new page. Give it a title like “Home” and on the Page Attributes box on the right select the “Homepage template”. A new panel called Frontpage Options will appear below the main text editor, there you have the option to select a category of slideshow items to display on the slider. This allows you to categorize slider items and quickly switch between displayed groups.

Now go to Settings > Reading and set the page you just created as your Front page. Have a look at the image below.

settings_reading

As you can see there’s an option Posts page under the Front page option. Create a new page called Blog or News or anything that you want to publish normal posts and set it here as your Posts page page.

Back to the homepage

The homepage as you can see consists of two areas. The slider and the “Front page widgets” sidebar. 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 URL where users will visit if they click on this slider item, set a subtitle for your slide which will appear below the slider’s title and finally set a video URL if you want to display a video instead of the featured image. The music player that appears at the bottom of the slider on the theme’s demo, can be configured under CSSIgniter Settings > Music Player Options

Easy eh? You can link to internal parts of your website or even other sites. We decided to make the slider that way for extra flexibility. Moving on! Go to Appearance > Widgets and you will see “Front Page Widgets” sidebar. Fill it with the widgets that you want. Next we will dissect the layouts of the homepage on each of the three demo setups.

The Solo layout:

The slider area on our solo layout demo consists of three Slideshow items and the theme’s embedded music player.
Next, in the “Front Page Widgets” sidebar we have: a CI Upcoming Events widget displaying six events in a three column layout, next we have a CI Split Content widget displaying the about page. Following we have two CI Items widgets displaying three photo galleries and three videos respectively on a three column layout. Next is the CI Album Tracklisting displaying an album along with its tracklisting. Moving on, we find another CI Items widget displaying three posts in a single column layout. Another CI Items is used to display three products from our e-shop in a three column layout. Finally we have the CI Newsletter widget.

The Radio layout:

The slider area on our radio layout demo consists of a Slideshow item and the theme’s embedded music player.
Next, in the “Front Page Widgets” sidebar we have: a CI Items widget displaying two events in a single column layout, next we have a CI Split Contentwidget displaying the about page. Following we have a CI Top Tracks widget displaying a few selected tracks. Next is the CI Items widget displaying three of our artist items in a three column layout. Finally we have the CI Newsletter widget.

The Rock layout:

The slider area on our rock layout demo consists of three Slideshow items and the theme’s embedded music player.
Next, in the “Front Page Widgets” sidebar we have: a CI Upcoming Events widget displaying three events in a three column layout, next we have a CI Split Content widget displaying the about page. Following we have two CI Items widgets displaying three albums and three artists respectively on a three column layout. Following them is another CI Items widget displaying three posts in a single column layout. Next is the CI Album Tracklisting displaying an album along with its tracklisting. Finally we have the CI Newsletter widget.

The Light layout:

To get the light layout, go to Appearance CSSIgniter Settings Appearance Options and select one of the white_*****.css color schemes avaialble. On the theme’s demo we have selected the white_red.css one.

The slider area on our light layout demo consists of three Slideshow items and the theme’s embedded music player.
Next, in the “Front Page Widgets” sidebar we have: a CI Upcoming Events widget displaying six events in a three column layout, next we have a CI Split Content widget displaying the about page. Following we have two CI Items widgets displaying three photo galleries and three videos respectively on a three column layout. Next is the CI Album Tracklisting displaying an album along with its tracklisting. Moving on, we find another CI Items widget displaying three posts in a single column layout. Another CI Items is used to display three products from our e-shop in a three column layout. Finally we have the CI Newsletter widget.

One last thing that we need to setup for our homepage (but visible on any other page of our website as well) is the main navigation. So go to Appearance > Menus create a new menu with a menu name of your choice. In the Theme Locations select the menu you just created. Add items from the left hand side boxes on the right. Re-order with drag and drop. Like the image below:

menu

The theme also features a secondary menu, which appears above the main one, using it is optional but will allow you to accent some of your site’s feature, for example by hosting anything related to your e-shop, or media etc. To use it, create a new menu and set it to be your “secondary menu” under Appearance > Menus > Manage Locations

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

Event page setup

If you have imported the sample content these pages have been created for you :)

It’s time for the world to know about our events! Go to Pages > Add new and create a new page. From the page attributes on the right, from the Templates dropdown select the Events Listing template. You will notice the Events Listing Options panel appears. In it you can select which events you want to display, the number of columns for your events listing page, any effects you might want to have and finally, set the number of events you want to display.

events-listing

Now you can start inserting your events from Events > New Events item. Start by giving the event a title We leave the main editor empty and we move a bit lower in the Event Settings section where we fill the details of the event like the image on the below.
TIP: If you leave the coordinate boxes empty the map won’t appear in the single event view

events1

events2

Discography setup

First things first

Next we need to create the discography listing page. Go to Pages > Add new and create a new page. From the page attributes on the right, from the Templates dropdown select the Discography Listing template. You will notice the Discography Listing Options panel appears. In it you can select the number of columns for your discography listing page, any effects you might want to have and finally, set the number of albums you want to display.

discography-listing

Let’s see how we can recreate an album from the preview like this one.

Go to Discography > New Discography Item. 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.

album

Fill in your album details and information as displayed in the picture above and move on to add your tracks.

Tracklisting

Each discography item, can have multiple tracks assigned to it. Tracks can be registered through the Tracks Details 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″]

Videos setup

Lets start by creating the video listing page. Go to Pages > Add new and create a new page. From the page attributes on the right, from the Templates dropdown select the Videos Listing template. You will notice the Video Listing Options panel appears. In it you can select the number of columns for your videos listing page, any effects you might want to have and finally, set the number of videos you want to display.

videos-listing

Go to Videos > Add New and you will see the following screen.

video_item

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.

Galleries setup

Lets start by creating the gallery listing page. Go to Pages > Add new and create a new page. From the page attributes on the right, from the Templates dropdown select the Galleries Listing template. You will notice the Gallery Listing Options panel appears. In it you can select the number of columns for your galleries listing page, any effects you might want to have and finally, set the number of galleries you want to display.

gallery-listing

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:

gallery_setup

Set the location for your gallery and click the Add Images button to upload your photos. Once done select the number of columns you want for your gallery and whether you need a masonry effect.

More information on gallery usage can be found in the additional information section below.

Artists setup

Lets start by creating the artist listing page. Go to Pages > Add new and create a new page. From the page attributes on the right, from the Templates dropdown select the Artists Listing template. You will notice the Artists Listing Options panel appears. In it you can select the number of columns for your artists listing page, any effects you might want to have and finally, set the number of artists you want to display.

artists-listing

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 move to the Artist Settings panel.

artist

Add any artist information you might have and then publish the item.

Widgets

We have created 12 custom widgets. They are really simple and they let you display various important info around the site.

widgets

The theme also provides separate widgetized sidebars for each section.

The “CI Items” & “CI Split Content” widgets

As you might have noticed from the rest of the documentation, the two widgets in questions are quite flexible in helping you shape your homepage and other sidebars in any way you like. Below you will find two animated GIF images which demonstrate the usage of the widgets.

CI Items

ci_item1

CI Split Content

ci_sc

Using the parallax effect

Some widgets, such as the split content widget, allow you to use a parallax effect for their background. To do that you click on the Custom Colors button on the widget, add the URL for the desired background image and check the Enable parallax effect box above.

custom_colors_widget

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

Acoustic

About

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

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 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, it’s up to you.

Setting up your WooCommerce Widgets

Once you’ve activated the WooCommerce plugin, you will find a new sidebar (widget area) in your Widgets’ page through the WordPress Dashboard. This new sidebar (Shop Sidebar) controls the widgets that will be displayed in the listing and product pages. You can apply any widget you want, including the CSSIgniter custom widgets. Finally, you can also apply WooCommerce widgets in the frontpage or footer widget areas.

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. PSD Contains PSD files of the template.
  4. WORDPRESS In this folder you will find the zip file which contains the theme, called “acoustic.zip”

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Install Themes tab. Click upload and Browse. Select the acoustic.zip located in the WORDPRESS folder and click OK. Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Acoustic theme!

NOTE: In order to setup the theme as seen on our preview you need to keep reading. Even If you are an experienced WordPress theme user do read this documentation in order to understand my approach on various things around the theme.
  • Home Slider: 1210x540px
  • Post thumbnails: 710x450px
  • Video thumbs: 460x300px
  • Discography listing thumbnails: 700x700px
  • Event thumbnails: 710px width, not restricted in height.
  • Page thumbnails: 900x400px
  • Fullwidth thumbnail: 1240x600px

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

Theme settings

I’m sure you can’t wait to preview the theme but be patient we are getting there! So, go to Appearance > Theme Settings and you will see our custom Settings Panel. Let’s see all the options and see what each of them does.

Site Options Tab

With the first option you can upload your logo if it’s an image logo, you have the option to add a normal and a high resolution logo (for retina-type devices). If you want text go to Settings > General and set the Site Title and the Tagline if you wish.

Next you have the option to set a favicon and touch icons for mobile devices.

Homepage Options

Here you can choose whether to show the slider on the frontpate, whether it will be automatic, set the number of items that will appear in the Homepage slider and the number of news items that will be displayed below the slider. Just set the number that you want in both of them.

Display Options

The descriptions for each option are detailed so just follow the instructions for each box and set the settings that you want.
We will see various other options and how we set them as we move along.

Color options

Here you can select a predefined color scheme or uncheck the checkbox Disable custom background and set your own custom background color and image if you wish.

Section Titles

Here you can customize the title for each one of the theme’s sections. The section title is the title displayed between the menu and the content of the page.

Pagination Options

Here you can set a number of items to be displayed in each listing page template.

Twitter Options

Here you can connect the theme to your twitter account so you can display your latest tweets via the CI Tweets widget.

Google Options

Copy / paste your Google Analytics code in this box.

Event Options

Here you can fine tune the appearance of your events section. Hide/Show map & old events, make buttons open in a new window/tab etc.

FeedBurner Feed URL

Copy / paste your feedburner feed code in this box.

Custom CSS

If you are familiar with CSS and you want to add some extra styles just insert them in this area.

Homepage setup

If you have imported the sample content these pages have been created for you :)

Go to Pages > Add new and create a new page. Give it a title like “Home” and on the Page Attributes box on the right select one of the Homepage templates. Each one has a description on the right on how the content will be displayed (For example Content / Sidebar #1 / Sidebar #2). Have a look at the following screenshot:

homepage

Now go to Settings > Reading and set the page you just created as your Front page. Have a look at the image below.

settings_reading

As you can see there’s an option Posts page under the Front page option. Create a new page called Blog or News or anything that you want to publish normal posts and set it here as your Posts page page.

Back to the homepage

The homepage as you can see consists of some specific areas. The slider, 2 sidebars and a main area where you can display your news posts. Let’s setup the slider. Go to Slider > New Slider Item. 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 and finally in the Slider Settings you can set the URL where users will visit if they click on this slider item, if you want a video on the slider instead, place the video URL in the corresponding box. Finally by checking the box you can disable the text displayed on the slider. Here’s a screenshot:

slider

Easy eh? You can link to internal parts of your website or even other sites. We decided to make the slider that way for extra flexibility. Moving on! If you have selected a homepage template with 2 sidebars, go to Appearance > Widgets and you will see 2 widgetized areas called Homepage sidebar #1 and Homepage sidebar #2. Fill them with the widgets that you want. We will explain a bit later of our custom widgets and how to use them.

Now the main area will display your normal blog posts and you can set the number of posts that will be displayed in this area from our Theme Settings > Homepage options.

One last thing that we need to setup for our homepage (but visible on any other page of our website as well) is the main navigation. So go to Appearance > Menus create a new menu with a menu name of your choice. In the Theme Locations select the menu you just created. Add items from the left hand side boxes on the right. Re-order with drag and drop. Like the image below:

menu

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

Event page setup

If you have imported the sample content these pages have been created for you :)

It’s time for the world to know about our events! Go to Pages > Add new and create a new page. From the page attributes on the right, from the Templates dropdown select the Events template. Now you can start inserting your events from Events > New Events item. So. Give the event a title so you can remember it. We are not showing the title somewhere. It’s just an identifier for you. We leave the main editor empty and we move a bit lower in the Event Settings section where we fill the details of the event like the image on the below.

events

For a preview on how the events are shown check our online demo here.

As you can see in the Select the event status dropdown we have 4 different types of statuses.

  1. Tickets Available
  2. Sold Out
  3. Canceled
  4. Watch live

For status “Sold out” and “Canceled” you don’t have to set anything else. For status “Tickets Available” you can insert the URL from the site where people can buy tickets in the input field below with the title “If the event is still available enter the URL where someone can buy tickets”. Same thing for the status “Watch live”.

A last option for the events page is that you can show/hide the events map and the past events. Just go to Appearance > Theme settings > Display Options and at the very end of this section check / uncheck the checkboxes for these options.

Discography setup

First things first

Let’s install the SoundCloud Shortcode plugin as well. We are going to need it if we want to have music from SoundCloud on our website.

Go to Plugins > Add New and search from the SoundCloud Shortcode. Click install and once the plugin is ready activate it. Now we can use SoundCloud too!

Let’s see how we can recreate an album from the preview like this one.

Go to Discography > New Discography Item. 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.

album

Tracklisting

Each discography item, can have multiple tracks assigned to it. Tracks can be registered through the Tracks Details 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″]

The older syntax, [tracklisting][track][/track][/tracklisting] is still supported but not preferred. See the additional information section below.

How to display the discography listing page in the main navigation
All you have to do is go to Appearance > Menus and create a new custom link on the left with a URL like this http://www.yourdomain.com/discography and press Add to menu. That’s it!

Videos setup

Let’s add some videos. We have 2 options. We can display self-hosted videos where we use the jwplayer (refer to setting up jwplayer section for more info) or videos from YouTube, Vimeo etc.

Go to Videos > New Videos Item and you will see the following screen.

video_item

  1. Is the title of the video
  2. The video’s featured image
  3. URL to the video
  4. Check only if your video is self-hosted

How to display the video listing page in the main navigation
All you have to do is go to Appearance > Menus and create a new custom link on the left with a URL like this http://www.yourdomain.com/videos and press Add to menu. That’s it!

Galleries setup

In order to create a new photo gallery go to Galleries > New Gallery item you will see something like this:

gallery_setup

  1. This is a title for you to remember. We don’t display it anywhere.
  2. The featured image that will be displayed in the listing page like here
  3. The venue name (e.g Amnesia club)
  4. The location (Ibiza, Spain)
  5. You can use the add media button to upload your images.
  6. Here you can drag & drop the uploaded images to re-order them.

More information on gallery usage can be found in the additional information section below.

How to display the gallery listing page in the main navigation
All you have to do is go to Appearance > Menus and create a new custom link on the left with a URL like this http://www.yourdomain.com/galleries and press Add to menu. That’s it!

Artists setup

In order to insert a new artist just visit Artists > New artist. In this section you wont find any custom fields except one which is the Artist role (e.g. Lead Singer) so you can enter the name of the artist in the title field, use the featured image and the main editor for any content (biography etc.)

How to display the artists listing page in the main navigation
All you have to do is go to Appearance > Menus and create a new custom link on the left with a URL like this http://www.yourdomain.com/artists and press Add to menu. That’s it!

Widgets

We have created 11 custom widgets. They are really simple and they let you display various important info around the site.
widgets
The theme also provides separate widgetized sidebars for each section.

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.

Discography items didn’t support a real track listing in previous versions of the theme. The following is provided for reference to early theme users that may have their discographies set up according to this older way. The following is still fully supported, but not the recommended way any more, as it’s harder and less flexible.

The format is like this:

[tracklisting]
[track track_no1 title="Nobody Move" subtitle="Self-hosted audio player" type="player" buy_url="http://someurl"]https://www.cssigniter.com/assets/audio/track1.mp3[/track]
[track track_no="2" title="Wega - Ruback" subtitle="Embeded from SoundCloud" type="soundcloud" buy_url="http://someotherurl"][soundcloud width="100%" url="http://api.soundcloud.com/tracks/44790907" iframe="true" ][/track]
[/tracklisting]

As you can see we start with an opening [tracklisting] tag. This is there just to inform WordPress that we are creating a new track listing. Then in order to create a new track you start with opening a new [track] item followed by:

track_no: The number of the track

title: The first title

subtitle: OPTIONAL the subtitle of the track, if any.

type: player or soundcloud depending on the type of audio you want. If it’s player you specify the path to the mp3 file. If it’s soundcloud then you use the soundcloud Widget Code found when you click the Share button under a soundcloud track. USE type=”soundcloud” for MixCloud sounds too!

buy_url: if you want to sell each track seperately you can provide the URL for each track where people can visit and buy it.

download_url: a button will be displayed giving your user the option to download the track.

We close the tracklisting tag with [/tracklisting] and we are done!

Multilingual capabilities

This theme is officially compatible with the WPML plugin. WPML is a premium plugin which helps you create and manage multilingual sites. You can purchase it from here. After purchase you can download the plugin’s files and install them from Plugins > Add New > Upload more info on installation here. Finally the detailed documentation for the WPML plugin, can be found here.

Next Steps

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

Muzak

About

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

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 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 it’s up to you.

Setting up your WooCommerce Widgets

Once you’ve activated the WooCommerce plugin, you will find a new sidebar (widget area) in your Widgets’ page through the WordPress Dashboard. This new sidebar (Shop Sidebar) controls the widgets that will be displayed in the listing and product pages. You can apply any widget you want, including the CSSIgniter custom widgets. Finally, you can also apply WooCommerce widgets in the frontpage or footer widget areas.

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. PSD Contains PSD files of the template.
  4. WORDPRESS In this folder you will find the zip file which contains the theme, called “wp_muzak-v4.x.zip”

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Install Themes tab. Click upload and Browse. Select the wp_muzak-v4.x.zip located in the WORDPRESS folder and click OK. Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Muzak theme!

NOTE: In order to setup the theme as seen on our preview you need to keep reading. Even If you are an experienced WordPress theme user do read this documentation in order to understand my approach on various things around the theme.
  • Listing thumbnails: 580x350px
  • Post thumbnails: 750x450px
  • Discography listing thumbnails: 560x560px
  • Event thumbnails: 560px width, not restricted in height.
  • Fullwidth thumbnail (slider and fullwidth page templates): 1140x641px

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

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!

Importing sample content

To get the sample content file go to appearance > theme settings > site options and scroll down until you see the download sample content link. Extract the zip file you got and now you have the required xml file to import the sample content.
Importing the sample content is easy. Go to Tools > Import and select the last option called WordPress.

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

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

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

NOTE 1: This will take a while. It could even take minutes because of importing all the images etc. So if you are out of coffee, go for a re-fill :)
NOTE 2: Images are under copyright so you can't use them.
NOTE 3: You need to set your permalinks at Settings > Options > "Post name"
option.
NOTE 4: If you get a SERVER TIME OUT you need to contact your hosting provider. It's not a fault with the theme :)

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

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

Theme settings

I’m sure you can’t wait to preview the theme but be patient we are getting there! So, go to Appearance > Theme Settings and you will see our custom Settings Panel. Let’s see all the options and see what each of them does.

Site Options Tab

With the first option you can upload your logo if it’s an image logo, you have the option to add a normal and a high resolution logo (for retina-type devices). If you want text go to Settings > General and set the Site Title and the Tagline if you wish.

Next you have the option to set a favicon and touch icons for mobile devices.

Homepage Options

Here you can choose whether to show the slider on the frontpage, whether it will be automatic, set the number of items that will appear in the Homepage slider and the number of news items that will be displayed below the slider. Just set the number that you want in both of them.

You can also select if you want to display the latest news on the homepage or the contents of a page. If you want to display the latest news make sure the box is set up like this

homecontent

otherwise select a page from the drop down.

Display Options

The descriptions for each option are detailed so just follow the instructions for each box and set the settings that you want.
We will see various other options and how we set them as we move along.

Color options

Here you can select a predefined color scheme or uncheck the checkbox Disable custom background and set your own custom background color and image if you wish.

Audio Options

Here you can set up the theme’s music player. You can use either the tracklisting from an album, or a ShoutCast/IceCast stream which outputs mpeg audio. You can also select if you want the audio to auto-play when the page load, or not (default).

Now playing feature

You can enable fetching and displaying the title of the song currently playing. Please note that in order for this to work you need a ShoutCast server v2.0 or higher and your stream URL needs to be in the form of IP:port i.e. “http://192.102.192.1:8006/stream;”

Event Options

Here you can toggle the event page’s map, the old events or enable pagination for them if you so desire. You can also set the single event and event buttons to open in a new page.

Section Titles

Here you can customize the title for each one of the theme’s sections. The section title is the title displayed between the menu and the content of the page.

e-Commerce Options

Here you can select whether you want to show up-sells and related products on your single product view, also you can select the number of products per page on your shop page.

Archive Options

Here you can set a number of items to be displayed in each taxonomy listing page, the number of columns the listing page will have and toggle the isotope filtering and masonry layout.

Twitter Options

Here you can connect the theme to your twitter account so you can display your latest tweets via the CI Tweets widget.

Google Options

Copy / paste your Google Analytics code in this box.

FeedBurner Feed URL

Copy / paste your feedburner feed code in this box.

Custom CSS

If you are familiar with CSS and you want to add some extra styles just insert them in this area.

Homepage setup

If you have imported the sample content these pages have been created for you :)

Go to Pages > Add new and create a new page. Give it a title like “Home” and on the Page Attributes box on the right select one of the Homepage templates. Each one has a description on the right on how the content will be displayed (For example Content / Sidebar #1 / Sidebar #2). Have a look at the following screenshot:

homepage

A new panel called Frontpage Options will appear below the main text editor, there you have the option to select a category of slideshow items to display on the slider. This allows you to categorize slider items and quickly switch between displayed groups.

Now go to Settings > Reading and set the page you just created as your Front page. Have a look at the image below.

settings_reading

As you can see there’s an option Posts page under the Front page option. Create a new page called Blog or News or anything that you want to publish normal posts and set it here as your Posts page page.

Back to the homepage

The homepage as you can see consists of some specific areas. The slider, 2 sidebars and a main area where you can display your news posts. Let’s setup the slider. Go to Slider > New Slider Item. 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 and finally in the Slider Settings you can set the URL where users will visit if they click on this slider item, if you want a video on the slider instead, place the video URL in the corresponding box. Finally by checking the box you can disable the text displayed on the slider. Here’s a screenshot:

slider

Easy eh? You can link to internal parts of your website or even other sites. We decided to make the slider that way for extra flexibility. Moving on! If you have selected a homepage template with 2 sidebars, go to Appearance > Widgets and you will see 2 widgetized areas called Homepage sidebar #1 and Homepage sidebar #2. Fill them with the widgets that you want. We will explain a bit later of our custom widgets and how to use them.

Now the main area will display your normal blog posts and you can set the number of posts that will be displayed in this area from our Theme Settings > Homepage options.

One last thing that we need to setup for our homepage (but visible on any other page of our website as well) is the main navigation. So go to Appearance > Menus create a new menu with a menu name of your choice. In the Theme Locations select the menu you just created. Add items from the left hand side boxes on the right. Re-order with drag and drop. Like the image below:

menu

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

Event page setup

If you have imported the sample content these pages have been created for you :)

It’s time for the world to know about our events! Go to Pages > Add new and create a new page. From the page attributes on the right, from the Templates dropdown select the Events template. Now you can start inserting your events from Events > New Events item. So. Give the event a title so you can remember it. We are not showing the title somewhere. It’s just an identifier for you. We leave the main editor empty and we move a bit lower in the Event Settings section where we fill the details of the event like the image on the below.

event_settings

For a preview on how the events are shown check our online demo here.

As you can see in the Select the event status dropdown we have 4 different types of statuses.

  1. Tickets Available
  2. Sold Out
  3. Canceled
  4. Watch live

For status “Sold out” and “Canceled” you don’t have to set anything else. For status “Tickets Available” you can insert the URL from the site where people can buy tickets in the input field below with the title “If the event is still available enter the URL where someone can buy tickets”. Same thing for the status “Watch live”.

A last option for the events page is that you can show/hide the events map and the past events. Just go to Appearance > Theme settings > Archive Options and at the very end of this section check / uncheck the checkboxes for these options.

Discography setup

If you have imported the sample content these pages have been created for you :)

To create a listing page for your discography items, go to Pages > Add New, create a page called discography-listing (or something similar), apply to it the Discography template from the page attributes panel on the right and move to the Listing Options panel that appears.

Here you can set the number of columns your listing page will have, enable/disable the isotope filtering system and select how many items you want to display on the page.
listing_options

Let’s see how we can recreate an album from the preview like this one.

Go to Discography > New Discography Item. 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.

album

Tracklisting

Each discography item, can have multiple tracks assigned to it. Tracks can be registered through the Tracks Details 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″]

The older syntax, [tracklisting][track][/track][/tracklisting] is still supported but not preferred. See the additional information section below.

Videos setup

If you have imported the sample content these pages have been created for you :)

To create a listing page for your videos, go to Pages > Add New, create a page called video-listing (or something similar), apply to it the Videos template from the page attributes panel on the right and move to the Listing Options panel that appears.

Here you can set the number of columns your listing page will have, enable/disable the isotope filtering system and select how many items you want to display on the page.

listing_options

Let’s add some videos. We have 2 options. We can display self-hosted videos, or videos from YouTube, Vimeo etc.

Go to Videos > New Videos Item and you will see the following screen.

video_item

  1. Is the title of the video
  2. The video’s featured image
  3. URL to the video
  4. Check only if your video is self-hosted

Galleries setup

If you have imported the sample content these pages have been created for you :)

To create a listing page for your galleries items, go to Pages > Add New, create a page called gallery-listing (or something similar), apply to it the Photo Galleries template from the page attributes panel on the right and move to the Listing Options panel that appears.

Here you can set the number of columns your listing page will have, enable/disable the isotope filtering system and select how many items you want to display on the page.

listing_options

In order to create a new photo gallery go to Galleries > New Gallery item you will see something like this:

gallery

  1. This is a title for you to remember. We don’t display it anywhere.
  2. The featured image that will be displayed in the listing page like here
  3. The venue name (e.g Amnesia club)
  4. The location (Ibiza, Spain)
  5. You can use the add media button to upload your images.
  6. Here you can drag & drop the uploaded images to re-order them.

More information on gallery usage can be found in the additional information section below.

Artists setup

If you have imported the sample content these pages have been created for you :)

To create a listing page for your artists, go to Pages > Add New, create a page called artist-listing (or something similar), apply to it the Artists template from the page attributes panel on the right and move to the Listing Options panel that appears.

Here you can set the number of columns your listing page will have, enable/disable the isotope filtering system and select how many items you want to display on the page.

listing_options

In order to insert a new artist just visit Artists > New artist. In this section you wont find any custom fields, so you can enter the name of the artist in the title field, use the featured image and the main editor for any content (biography etc.)

Widgets

We have created 11 custom widgets. They are really simple and they let you display various important info around the site.
widgets
The theme also provides seperate widgetized sidebars for each section.

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.

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.

Discography items didn’t support a real track listing in previous versions of the theme. The following is provided for reference to early theme users that may have their discographies set up according to this older way. The following is still fully supported, but not the recommended way any more, as it’s harder and less flexible.

The format is like this:

[tracklisting]
[track track_no1 title="Nobody Move" subtitle="Self-hosted audio player" type="player" buy_url="http://someurl"]https://www.cssigniter.com/assets/audio/track1.mp3[/track]
[track track_no="2" title="Wega - Ruback" subtitle="Embeded from SoundCloud" type="soundcloud" buy_url="http://someotherurl"][soundcloud width="100%" url="http://api.soundcloud.com/tracks/44790907" iframe="true" ][/track]
[/tracklisting]

As you can see we start with an opening [tracklisting] tag. This is there just to inform WordPress that we are creating a new track listing. Then in order to create a new track you start with opening a new [track] item followed by:

track_no: The number of the track

title: The first title

subtitle: OPTIONAL the subtitle of the track, if any.

type: player or soundcloud depending on the type of audio you want. If it’s player you specify the path to the mp3 file. If it’s soundcloud then you use the soundcloud Widget Code found when you click the Share button under a soundcloud track. USE type=”soundcloud” for MixCloud sounds too!

buy_url: if you want to sell each track seperately you can provide the URL for each track where people can visit and buy it.

download_url: a button will be displayed giving your user the option to download the track.

We close the tracklisting tag with [/tracklisting] and we are done!

Multilingual capabilities

This theme is officially compatible with the WPML plugin. WPML is a premium plugin which helps you create and manage multilingual sites. You can purchase it from here. After purchase you can download the plugin’s files and install them from Plugins > Add New > Upload more info on installation here. Finally the detailed documentation for the WPML plugin, can be found here.

Next Steps

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