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

To get the sample content file go to appearance > CSSIgniter 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.

In the chords.zip you downloaded, in the chords folder you will find three sublfolders containing each a set of sample files, one for every demo layout. Solo, Rock and Radio.

  1. For Solo we have the chords_content_solo.xml & chords_widgets_solo.wie
  2. For Rock we have the chords_content_rock.xml & chords_widgets_rock.wie
  3. For Radio we have the chords_content_radio.xml & chords_widgets_radio.wie

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 chords_content_*****.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 chords_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.

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

Dubstep

About

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

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 “dubstep.zip”

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.

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Install Themes tab. Click upload and Browse. Select the dubstep.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 Dubstep 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.

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.

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 dubstep.wordpress.2014-02-23.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 dubstep_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.
Finally at the bottom of the page there are text boxes where you can fill in copyright info or any other relevant text which will appear below your footer widgets.

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.
Notice If you need to display your blog/news posts on the homepage’s content section make sure the corresponding box is set like so

homecontent
Do not select any page from the dropdown.

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.

Artist – Audio – Discography – Galleries – Video options

In these tabs you can set independently whether you want the isotope category filter enabled or not and how many items per page you wish to display. please read the additional info section for more info regarding isotope filtering.

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.

e-Commerce Options

Here you can customize details displayed on the single product page and control the overall number of products that appear on your shop’s page.

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. Have a look at the following screenshot:

homepage_templates

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, 4 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, by checking the box below you can disable the text displayed on the slider. Finally you have a dropdown menu with four available positions for the slider’s title. 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! Go to Appearance > Widgets and you will see 4 widgetized areas called Homepage sidebar #1 through Homepage sidebar #4. 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.

Creating listing pages

You will need to create a listing page for each custom post type (artists, discography, events, galleries, videos) to display your content. To do that create a new page under Pages > New for each custom post listing page and from the Page attributes panel on the right select one of the available templates, depending on the custom post type you are targeting. Available templates are highlighted in the screenshot below

listing_templates

Once you have selected the desired template you will be presented with a listing options panel, it will appear below the main content editor and will allow you to apply different layouts to your templates. An example of this listing options panel is demonstrated below
listing_options
this is the options panel for the discography listing, similarly you will have panels for the rest of your custom post types.

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 Listing template. Now you can start inserting your events from Events > New Events item. So, give the event a title add any event relevant text to the main editor and 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

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

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.

Adding SoundCloud tracks to the tracklisting

To add SoundCloud tracks to the tracklisting you need to have the SoundCloud ShortCode plugin installed, details on this you can find above. Then, you need to paste your track’s URL from SoundCloud in the Play URL box of your tracklisting item.

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 :)

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.

videos

  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

You can also set the location where the video was filmed and the filming date.

Galleries setup

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

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

galleries

  1. This is the gallery’s title.
  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. The date the album was taken
  6. Click the button to start adding images to the gallery
  7. Select how many columns you want this gallery to appear in
  8. and finally select whether you want a column or a slider layout.

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 :)

In order to insert a new artist just visit Artists > New artist. In this section you won’t 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 14 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.

Site-Wide widget

To recreate the site-wide area with the images you see on the demo

sitewide

You need to go to appearance > widgets place a text widget in the Site-Wide Widgets sidebar. Inside you need to paste HTML like so

<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_soundcloud.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_mixcloud.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_unsigned.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_ra.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_reverbnation.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_bc.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_lastfm.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_beatport.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_pv.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_emusic.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_myspace.png" alt=""></a>
<a href="#"><img src="http://www.yoursite.com/wp-content/themes/dubstep/images/music_icons/icon_spotify.png" alt=""></a>

in this code you will need to replace:

  1. the # in href with the URL to your profile on each music service
  2. the www.yoursite.com placeholder with the actual URL of your site

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!

Useful Plugins

  • 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.
  • Listing thumbnails: 700x400px
  • Fullwidth thumbs: 945x450px
  • Discography listing thumbnails: 700x700px
  • Event thumbnails: 700px width, not restricted in height.

Club 88

About

Club88 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 “club88.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 club88.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 Club88 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.

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.

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

From this tab you can setup your Footer text. The theme features a primary and a secondary footer text box, you can use to insert copyright info, terms of service etc.

Next you have the option to set a favicon and touch icons for mobile devices.
Finally at the bottom of the page there are text boxes where you can fill in copyright info or any other relevant text.

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.

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.

Artist – Audio – Discography – Galleries – Video options

In these tabs you can set independently the column number you want on each listing page and how many items per page you wish to display.

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.

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.

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

 

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 Listing 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 > Event 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 Listing template from the page attributes panel on the right and add it to your menu.

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.

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 Listing template from the page attributes panel on the right and add it to your menu.

Let’s add some videos.

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

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 Galleries Listing template from the page attributes panel on the right and add it to your menu.

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.

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 add it to your menu.

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

Useful Plugins

  • 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.
  • Home Slider: 1600x500px
  • Post thumbnails: 750x500px
  • Large thumbs: 875x500px
  • Discography listing thumbnails: 750x750px
  • Event thumbnails: 750px width, not restricted in height.
  • Page header: 1920x250px

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.

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 Acoustic 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 acoustic.wordpress.2014-07-17.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 acoustic_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 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

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

Brittany

Theme installation

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

TIP: A more visual guide can be found here.

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

Image Sizes

The minimum recommended image sizes for Brittany are:

  • Post thumbnail: 750x460px
  • Slider images – Fullwidth featured image: 1140x475px
  • Fullwidth slider: 1920x850px
  • Square thumb: 300x300px
  • About me widget thumb: 360x220px
  • Plain layout thumb: 360x450px
  • Vertical thumb: 360x540px
  • Vertical fixed: 355x325px
  • Horizontal fixed thumb: 375x430px

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

Importing sample content manually

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

download_sample

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

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

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

WooCommerce

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

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

Setting up your theme

1) Populating your blog

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

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

new_post

2) Customizing the appearance

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

Go to Appearance > Customize and you will see this

customizer

 

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

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

  • Header Options

    Here toggle the sticky menu, social icons and inline logo, additionally you can customize the header colors.

  • Menus

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

  • Site Identity

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

  • Layout Options

    Here you can define the layouts of the blog listing and single post, set the blog columns, modify the length of the automatic excerpt , toggle the excerpt display in listings and select between numbered and older/newer pagination.

  • Front Page Carousel

    In this tab you can toggle the appearance of the slider, select a source post category to display on it, or specific posts via their IDs. You can also limit the number of posts that appear on the slider and modify slider timings. Finally you can select where you want the slider to appear.

  • Typography Options

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

  • Content Colors

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

  • Widgets

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

  • Sidebar Colors

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

  • Social Networks

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

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments, social sharing etc. You can also set the default single post layout and change the related posts section title.

  • Pages Options

    Here you can toggle the display of the signature and social sharing buttons on pages.

  • Footer Options

    Here you can toggle the credits text.

  • Static Front Page

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

  • Other

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

Theme pages

The Home page

To utilize the front page layouts we have created for this theme you will need to create a page named Home and apply to it one of the available front page templates, these are:

  1. The Widgetized Homepage with Full screen Slider template which will offer you a full screen slider that adapts to the screen size, with all homepage widgets below,
  2. the Widgetized Homepage template which offers a slider with a fixed height and the same width as the rest of the content and
  3. the Widgetized Homepage with Full width Slider which will give you a front page with a full width slider with fixed height.

the template can be selected from the Page Attributes drop down.

The contact page

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

Widgets

Along with WordPress’s widgets we have created 4 custom ones. The Theme – Items and the Theme – Latest Posts ones will help you generate your front page layouts. More about them below.

widgets

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

How to use the latest posts widget

The Theme – Latest Posts widget will be the cornerstone on creating the various homepage layouts. It’s a highly versatile widget, let’s take a look at how to use it.

latest_posts

We start by adding a title to the widget, next we select a post category to display on it (leaving the option empty will display posts from all categories), below we can select whether we want our posts to appear at random (default is by date from newest to oldest) and how many posts we want to display on the widget. Finally we set the number of columns our items will be displayed on and select one of the 13 available layouts.

Excluding post categories from the widget

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

latest_posts_exclude

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

Suggested layouts for optimal appearance

While all posts appearance & column combinations will work, the once suggested below will provide you the best visual result.

TIP: These combinations work for the blog listing layout ( See layout options in the Customization section) and the Items widget.

Blog Page Layout: Right Sidebar

Demo preview Item appearance Columns
1 Column Default 1
2 Columns Default 2
2 Columns Fixed Fixed 2
Horizontal left fixed Horizontal left fixed 1
Horizontal right fixed Horizontal right fixed 1
Horizontal fixed alternating Horizontal fixed alternating 1
Media 2 columns Media 2
2 Columns no excerpt No excerpt 2
3 Columns no excerpt No excerpt 3
2 Columns plain Plain 2
2 Columns reveal Reveal 2
2 Columns vertical Vertical 2

Blog Page Layout: Left Sidebar

Demo preview Item appearance Columns
1 Column Default 1
2 Columns Default 2
2 Columns Fixed Fixed 2
Horizontal left fixed Horizontal left fixed 1
Horizontal right fixed Horizontal right fixed 1
Horizontal fixed alternating Horizontal fixed alternating 1
Media 2 columns Media 2
2 Columns no excerpt No excerpt 2
3 Columns no excerpt No excerpt 3
2 Columns plain Plain 2
2 Columns reveal Reveal 2
2 Columns vertical Vertical 2

Blog Page Layout: Fullwidth narrow

Demo preview Item appearance Columns
1 Column Default 1
2 Columns Default 2
2 Columns Fixed Fixed 2
Horizontal left fixed Horizontal left fixed 1
Horizontal right fixed Horizontal right fixed 1
Horizontal fixed alternating Horizontal fixed alternating 1
Media 2 columns Media 2
2 Columns no excerpt No excerpt 2
3 Columns no excerpt No excerpt 3
2 Columns plain Plain 2
2 Columns reveal Reveal 2
2 Columns vertical Vertical 2

Blog Page Layout: Full width wide

Demo preview Item appearance Columns
Default 2 columns Default 2
Default 3 columns Default 3
Default 4 columns Default 4
Fixed 3 columns Fixed 3
Fixed 4 columns Fixed 4
Media 2 columns Media 2
Media 3 columns Media 3
No excerpt 3 columns No Excerpt 3
No excerpt 4 columns No Excerpt 4
Plain 3 columns Plain 3
Plain 4 columns Plain 4
Reveal 3 columns Reveal 3
Reveal 4 columns Reveal 4
Vertical 3 columns Vertical 3
Vertical 4 columns Vertical 4

Recreating the demo’s homepage layout

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

The Slider area

The slider can be configured under Customize > Front Page Carousel. The size of the slider depends on the template you have selected for the Home page.

The Homepage sidebar

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

  • Theme – About Me which displays some information about the author
  • Theme – Latest Posts displaying six items from a post category, in a three column layout with the reveal appearance setting.
  • Instagram widget provided by the WP Instagram Widget plugin.
  • Theme – Latest Posts displaying six items from all but one post categories in a three column layout with the vertical appearance setting.
  • Theme – Items displaying three products in a three column layout with the default appearance setting.
  • Text a text widget with a newsletter form and some text.

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

How to use the page builder template

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

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

ci_page_builder_template

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

Next Steps

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

Zermatt

 Theme installation

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

TIP: Visual instructions can be found here

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

Image Sizes

The recommended image sizes for the Zermatt theme are:

  • Post Thumbnail: 750x400px
  • Hero Image: 1920x370px
  • Full Width Image: 1140x590px
  • Slider: 1920x800px
  • Listing Thumb: 750x750px
  • Wide Room Listing Thumb: 750x371px

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

Importing sample content manually

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

download_sample

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

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

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

Setting up your theme

1) Creating theme pages

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

  1. Home this will serve as your homepage, assign to it either the Frontpage template from the Page attributes panel on the right. From the Front Page Details panel below the main text editor you can select between the normal and full screen layout and select a slider category if you want to display only certain items on the slider.
  2. Blog this will be your posts page. Just create it, no further action needed.
  3. Contact here you can place your contact form which you will create using the Contact Form 7 plugin or Jetpack’s contact form add-on. Assign to it the Contact Page template, a new panel named Contact Page Details will appear, fill in your location info in the Information tab and select the establishment’s location in the Map tab, finally publish the page.
  4. Booking your booking form will be placed here, apply the Booking Page template. Once you publish the page go to Customize > Booking  – 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. Apply the Galleries Listing template from the page attributes panel, in the Gallery Listing Options panel that appears you can select whether you will display all your galleries or just one category, the number of columns for the listing page, check if you want the first item full width and finally set the number of items you want to display per page.
    gallery_listing
  6. Room Listing this page will display your rooms. Apply the Rooms Listing template from the page attributes panel and proceed to the Room Listing Options panel to select which room categories to display (if not all), the number of columns, check if you want the first item to be full width, set whether or not to display only rooms on offer, and finally the number of rooms per page.
    room_listing
  7. Attractions Listing this page will display your attractions. Apply the Attractions Listing template from the page attributes panel, in the Attraction Listing Options panel that appears you can select whether you will display all your attractions or just one category, the number of columns for the listing page, check if you want the first item full width and finally set the number of items you want to display per page.
    attraction_listing
  8. Video Listing this page will display your videos. Apply the Videos Listing template from the page attributes panel, in the Video Listing Options panel that appears you can select whether you will display all your videos or just one category, the number of columns for the listing page, check if you want the first item full width and finally set the number of items you want to display per page.
    video_listing
  9. Service Listing this page will display your services. Apply the Service Listing template from the page attributes panel, in the Service Listing Options panel that appears you can select whether you will display all your services or just one category, the number of columns for the listing page, check if you want the first item full width and finally set the number of items you want to display per page.

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

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

ReadingSettings

2) Populating your blog

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

3) Adding Rooms

To create a new room item go to Rooms > new Room, set the room’s name as a title, enter relevant information in the content editor, and set a featured image. Then move to the Room Settings panel. Here you can fill in the room’s Amenities, add images to the room using the Gallery tab, set the room’s Pricing information and finally select whether you want to display a sidebar on it from the Layout tab.
room_settings

(TIP, under Customize > Room Options) you can set the room price text format & random testimonial title.
room_options

4) 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.
gallery_settings

5) 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 Settings 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.

6) Adding Videos

To add a video go to Videos > Add New. Add the video’s name as a title, any text necessary and upload a featured image. In the Video Settings panel add the URL to your video and when finished, publish the item.

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

8) Adding Services

To add a service go to Services > Add New. Add the service’s name as a title, any text necessary and upload a featured image, when finished, publish the item.

9) Adding Slider items

To add items to your homepage’s slider go to Slideshow > new Slide, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage). Next move to the Slider Settings panel, give the slider a subtitle, a custom link and change the ‘Learn More’ button text if you so desire. If you want to add a video to the slider you can paste the video’s URL in the Video Details tab. Finally, publish the slider item. Homepage slider behavior can be controlled under Customize > Homepage options.
slider_settings

Slides can be split in to categories, which allows you to create different sets of slides, for example one for each season and switch between them easily. To select which category of slideshow items you display on the homepage, edit the homepage and select the slider category from the Front Page Details meta box, if you leave it blank all items will be displayed.

NOTICE: If you have created a video slider with multiple slides it is advised to turn the auto slide functionality off, otherwise the slide will change during the playback.

10) Creating your menu

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

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

11) Adding content to your Homepage

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

Duplicate the demo’s layout

On the demo’s homepage we have three slider items and the following widgets:

  •  a Theme – Text widget with some introductory text,
  • Theme – Hero text with info on a suite,
  • Theme – Rooms displaying three rooms from the suites room category,
  • another Theme – Hero text widget,
  • Theme – Gallery displaying the hotel gallery post,
  • a third Theme – Hero text,
  • Theme – Page Gallery displaying the restaurant page ( which uses the Page with gallery template),
  • Theme – Booking Form widget to display an availability request form,
  • Theme – Latest Posts widget displaying three posts in a three column layout,
  • Theme – Contact  displaying our contact info and
  • the Instagram widget provided by the WP Instagram Widget plugin.

12) Customizing the appearance

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

Go to Appearance > Customize and you will see this
customizer

13) Setting up the weather

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

 

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

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

  • Header

    Here you can set the theme’s header image, modify the header’s color scheme, toggle the tagline, menu appearance, booking button and weather. You can also set your location to get weather information

  • Site Identity

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

  • Front Page Carousel

    In this tab you can toggle the autoslide feature and control slider timings.

  • Typography Options

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

  • Content Colors

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

  • Sidebar Colors

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

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

  • Rooms Options

    Here you can set a custom title for the random testimonial section in the single room view and modify the room price text appearance.

  • Layout Options

    Here you can toggle breadcrumbs (a plugin is required, please read the description on the menu item), independently modify homepage featured article section layout, the blog layout and the category/tag layout. Additionally you can configure the length the small article title and the automatic excerpt and choose between numbered and older/newer pagination.

  • Menus

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

  • Booking – Contact Options

    Here you will need to select your booking page so the booking bar can lead to it and set your booking & contact email address so the respective forms can send the emails to.

  • Widgets

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

  • Footer

    Customize the theme’s footer text.

  • Static Front Page

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

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Additionally you can place your Google Analytics ID, toggle the Google maps API and the animated image pre-loader.

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

Noozbeat

Theme installation

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

TIP: A more visual guide can be found here.

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

Image Sizes

The minimum recommended image sizes for Noozbeat are:

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

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

Importing sample content manually

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

download_sample

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

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

Importing widgets

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

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

Setting up your theme

1) Populating your blog

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

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

new_post

 

 

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

article_info

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

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

source

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

review

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

2) Customizing the appearance

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

Go to Appearance > Customize and you will see this

customizer

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

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

  • Header

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

  • Menus

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

  • Site Identity

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

  • Layout Options

    Here you can toggle breadcrumbs (a plugin is required, please read the description on the menu item), independently modify homepage featured article section layout, the blog layout and the category/tag layout. Additionally you can configure the length the small article title and the automatic excerpt and choose between numbered and older/newer pagination.

  • Typography Options

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

  • Content Colors

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

  • Sidebar Colors

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

  • Widgets

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

  • Social Networks

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

  • Posts Options

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

  • Footer Options

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

  • Static Front Page

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

  • Other

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

Theme pages

The Home page

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

The contact page

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

Widgets

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

widgets

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

Recreating the demo’s homepage layout

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

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

The Homepage sidebar

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

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

How to use the page builder template

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

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

ci_page_builder_template

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

Next Steps

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

Eclecticon

About Eclecticon

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

Theme installation

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

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

Image Sizes

The recommended image sizes for the Eclecticon theme are:

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

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

Importing sample content manually

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

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

You can also download the Sample Content by clicking here

Importing widgets

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

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

Setting up your theme

1) Creating theme pages

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

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

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

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

ReadingSettings

2) Populating your blog

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

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

3) Adding project items

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

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

4) Creating your menu

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

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

5) Customizing the appearance

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

Go to Appearance > Customize and you will see this

customizer

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

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

  • Header Bar Options

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

  • Site Identity

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

  • Layout Options

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

  • Front Page Carousel

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

  • Typography Options

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

  • Content Colors

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

  • Sidebar Colors

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

  • Social Networks

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

  • Posts Options

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

  • Project Options

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

  • Widgets

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

  • Static Front Page

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

  • Other

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

Additional Information

Creating Galleries

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

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

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

Next Steps

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

Roxima

About

Roxima is a single page business theme for WordPress.

WordPress theme installation

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

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

Image Sizes

The minimum recommended image sizes for Roxima are:

  • Post thumbnail: 850x400px
  • Hero Image, used in the custom content widget: 750x500px
  • Latest Posts widget featured: 750x420px
  • Small Square (Team & Testimonials): 165x165px
  • Slider Image: 1920x800px
  • Blog Listing Square: 400x400px
  • Clients Widget: 0x80px (at least 80px tall, not limited in width)

Useful Plugins

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

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

Importing Sample Content using One Click Import

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

From your WordPress dashboard

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

From WordPress.org

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

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

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

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

Importing sample content manually

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

sample_link

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

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

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

Setting up your theme

1) Creating theme pages

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

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

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

ReadingSettings

2) Populating your blog

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

3) Widgets

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

widgets

Let’s have a look how they work.

Theme – Slider

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

slider_1

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

slider_2

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

Theme – Custom Content

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

custom_content

Theme – Services

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

Services_1

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

Theme – Team

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

team_1

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

team_2

Theme – Pricing Table

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

Pricing_1

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

Pricing_2

this is how the above pricing item will look like

Pricing_3

Theme – Clients

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

Clients_1

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

Clients_2

Theme – Testimonials

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

Testimonials_1

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

Testimonials_2

Theme – Contact

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

Contact

Theme – Latest Posts

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

Latest_posts

Customize the widget’s appearance.

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

Customize

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

4) Customizing the appearance

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

Go to Appearance > Customize and you will see this

Customizer

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

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

  • Header Options

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

  • Menus

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

  • Site Identity

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

  • Layout Options

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

  • Typography Options

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

  • Content Colors

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

  • Sidebar Colors

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

  • Widgets

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

  • Social Networks

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

  • Posts Options

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

  • Footer Options

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

  • Static Front Page

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

  • Static Front Page

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

  • Other

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

5) Populating your menu

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

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

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

menu_creation

How to use the page builder template

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

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

ci_page_builder_template

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

Next Steps

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