About

Elektronika is a WordPress theme for DJs, radio stations, podcasters, artists, bands, collectives, club owners, music producers, event producers and anyone in the music industry.

WordPress theme installation

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

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

Image Sizes

The recommended image sizes for the Elektronika theme are:

  • Post Thumbnail: 720x400px
  • Entry Item Image: 690x690px
  • Event Item Image: 690px width, not restricted in height.
  • List Item Image: 555x555px
  • List Video Item Image: 555x320px
  • FullWidth Thumbnail :1140x600px
  • FullWidth Narrow Thumbnail :750x450px
  • Page Portrait Thumbnail: 720x720px
  • Hero Image: 720x720px*
  • Home Hero Image: 1920x1080px*
  • Masonry Justified Thumbnail: 400px width, not restricted in height.

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

Useful Plugins

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

  • CSSIgniter Shortcodes you can use our shortcode plugin to help you create a variety of layouts and elements on your site. Instructions can be found here.
  • AudioIgniter lets you create music playlists and embed them in your WordPress posts, pages or custom post types. By using the standard WordPress media upload functionality, you can create new audio playlists in minutes.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

Importing sample content

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), asking the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the elektronika_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

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. Album listing: This page will list your discography items. Create a new page and apply the Album Listing template to it. From the Album Listing Options panel that appears below the main text editor, you can select the column number for the listing page.

    Additionally, you can select a Base Category for the listing page, meaning that you can use the template to display only one of your discography categories,

    instead of all of them (by leaving it blank). You can show foreach item its additional data fields by enabling the listing meta option.

  3. Artists listing: This page will list your artists. Create a new page and apply the Artists Listing template to it. From the Artists Listing Options panel that appears below the main text editor, you can select the column number for the listing page. Additionally, you can select a Base Category for the listing page, meaning that you can use the template to display only one of your artist categories, instead of all of them. You can display for each item its additional data fields by enabling the listing meta option.
  4. Event listing: This page will list your events. Create a new page and apply the Events Listing template to it.From the Events Listing Options panel that appears below the main text editor, you can select the base Category or Events you want to display. Leaving the base category blank will display all Events ignoring categories. You can also select the type of events (Upcoming or past events) you need to show or hide. If you have selected to show past events you can and a custom title before them to differentiate from your other Events. Finally, you can set the number of items per page that you want to display. You can choose to show the venue name instead of event title in your listing by enabling it in your Appearance > Customize > Other section.
  5. Chart Listing: This page will list your Charts. Create a new page and apply the Chart Listing template to it.
  6. Podcast Listing: This page will list your Podcasts. Create a new page and apply the Podcast Listing template to it.From the Podcast Listing Options panel that appears below the main text editor, you can select the column number for the listing page. Additionally, you can select a Base Category for the listing page, meaning that you can use the template to display only one of your artist categories, instead of all of them. You can display for each item its additional data fields by enabling the listing meta option.
  7. Producers Listing: This page will list your Producers. Create a new page and apply the Producer Listing template to it. From the Producer Listing Options panel that appears below the main text editor, you can select the column number for the listing page. Additionally you can select a Base Category for the listing page, meaning that you can use the template to display only one of your producer categories, instead of all of them. You can display for each item its additional data fields by enabling the listing meta option.
  8. Gallery listing: In this page you will display your galleries. Create a new page and apply the Galleries Listing template to it. From the Galleries Listing Options panel that appears below the main text editor when you select the Galleries Listing template, you can select the column number for the listing page. Additionally, you can select a Base Category for the listing page, meaning that you can use the template to display only one of your gallery categories, instead of all of them.
  9. Videos listing: This page will list your videos. Create a new page and apply the Videos Listing template to it. From the Videos Listing Options panel that appears below the main text editor, you can select the column number for the listing page. Additionally, you can select a Base Category for the listing page, meaning that you can use the template to display only one of your gallery categories, instead of all of them.
  10. 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.)

All pages have a default Layout Section. In this section, you can add a page Title and Subtitle under the Subtitle tab and modify its color, overlay color, background image and video under the Hero Section tab. If you leave this section empty, the normal post/page title will be used instead.

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

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

Creating Artist items

In order to insert a new artist just visit Artists > Add New. Add the artist’s name as a title, upload the featured image and fill in any information you want in the text editor, then publish the item.

Further down Under the Artists Settings section you will notice a set of tabs. Below you will find out how to use them in order to add more content to your custom post types. You will find this section in all Custom post types like Artists, Podcasts, Producers, Albums and Events.

Information Tab

Here you can Add some extra fields for your Artist that will be displayed in your Artist page or if you wish into your Artist Listing template. You can create as many fields as you wish by clicking on the Add Field button then fill in the Title and Description of your fields. If you want to remove an item you can click on the Remove me button.

Buttons Tab

Here you can create a special set of button fields adding URL and Text to them that will link to your Artist Fan page or music networks

like Bandcamp or Soundcloud. You can remove any unwanted button by clicking on the Remove me button

Titles

Here you can add your custom Page Title and Subtitle. These will override the default ones.

Hero Section

Here you can upload a background image to style your Title and Subtitle section and define an overlay color (if you wish to have) and their Text color.

You can also control the position and size of your background image. Finally, you can choose to render a video from Youtube or Vimeo instead of a background image.

Creating Producer items

In order to insert a new artist just visit Producers > Add New. Add the producer’s name as a title, upload the featured image and fill in any information you want in the text editor, then publish the item.

Under the Producer Settings section in the Information tab, you can Add some extra Information for your Producer. You can create as many fields as you wish by clicking on the Add Field button. Then fill the Title and Description you want to be rendered under the Producer Featured Image.

On the same section in the Buttons Tab, you can create a special set of button fields that will link to your Producer’s blog page or music networks like Bandcamp or Soundcloud.

On the Titles and Hero Section you can control the appearance of that single custom post type.

Creating Event items

Now you can start inserting your events from Events > New Event. Start by giving the event a title. We leave the main editor empty and we move a bit lower in the Event Settings section under the Details tab, here you can fill in the event’s info, details, status, location  etc. Each tab provides some information concerning its usage.

Checking on the Recurrent Event option will discard the date fields and replace them with a new one that will allow you to enter custom text describing the status of your event.

Under the same Event Settings section, you can navigate to the Information tab. There you can add some extra Information for your Event. You can create as many fields as you wish by clicking on the Add Field button then fill the Title and Description you want to be rendered under the Event Featured Image.

On the same section under the Buttons Tab, you can create a special set of button fields that will link to your ticket registration page (etc).

On the Titles and Hero Section you can control the appearance of that single custom post type.

Creating Album items

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

Under the same Album Settings section, you can navigate to the Information tab. There you can add some extra Information for your Album. You can create as many fields as you wish by clicking on the Add Field button then fill the Title and Description you want to be rendered under the Album Featured Image.

On the same section in the Buttons Tab, you can create a special set of buttons leading to any URL you wish.

On the Titles and Hero Section you can control the appearance of that single custom post type.

Creating Podcast items

Go to Podcast > Add new. Set the album title and upload the album’s cover in the featured image section. Now in the main editor, you can write anything you want PLUS you can display the tracklisting of your album with the ability to let the users review your tracks! Again, you can use Audio Igniter Plugin

Under the same Podcast Settings section, you can navigate to the Information tab. There you can add some extra Information for your Album. You can create as many fields as you wish by clicking on the Add Field button then fill the Title and Description you want to be rendered under the Podcast Featured Image.

On the same section under the Buttons Tab, you can create a special set of button fields that will link to any URL you wish.

On the Titles and Hero Section you can control the appearance of that single custom post type.

Adding Video items

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

On the Titles and Hero Section you can control the appearance of that single custom post type.

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

Here you can click the Add Images button to upload your photos. Once done you can toggle gallery image randomization if you want by checking on the Randomize order option or Justify your Gallery images by enabling the Justified Gallery option. Featured image of your gallery will be used as a cover.

On the Titles and Hero Section you can control the appearance of that single custom post type.

Adding Chart items

Go to Chart > Add new. You can start adding tracks in your Chart by clicking on the Add Field button, Each fieldset provides basic information about the track including title, artist, label and a URL link field.

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)

Setting up your homepage

The widgetized area of the homepage can be accessed under Appearance > Customize > Widgets.

Duplicating the demo’s homepage

Open Appearance > Customize > Widgets

on the Home Page sidebar:

  • a Theme – Events widget, displaying the upcoming events
  • a Theme – Latest Posts widget, displaying the latest Artist Additions
  • a Theme – Content widget displaying a selected Chart Post Item
  • a Theme – Hero widget with some text and a background image behind it.
  • a Theme – Latest Posts widget, displaying the latest Album Additions
  • a Theme – Content widget displaying a selected Gallery Post Item
  • a Theme – Content widget displaying a selected Video Post Item

On the Footer Instagram sidebar

  • the WP Instagram Widget plugin.

On the Footer – Column 1 sidebar

  • a Text widget, displaying some text

On the Footer – Column 2 sidebar

  • a Theme – Events widget, displaying the upcoming events

On the Footer – Column 3 sidebar

  • a Theme – Social Icons widget, displaying your Social Icons

Customizing your theme

All of the theme’s settings have been integrated into WordPress Customizer. You can find them under Appearance > Customize.

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

Site Identity

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

Layout Options

Here you can modify the blog’s default layout and choose how many columns you need for your blog Additionally this tab allows you to customize the excerpt’s length and choose your preferred pagination method.

Posts Options

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

Colors

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

Typography Options

Here you can modify the size of content headings, content and sidebar text. If you want to change the Font Families using the
Google Fonts Library follow this Guide here

Here you can configure the button which appears on the header as well as the page you wish to display in the popup window.

There you can render your Radio / Music player page.

Social Networks

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

Site Titles

In this tab you can add a custom Title for your Blog, Search and 404 page.

Here you can modify your copyright info, privacy policy etc. You can enable or disable the Instagram Widget slideshow feature and control its slide speed.

Static Front Page

static_front_page

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

Other

You can add your custom css under Appearance > Customize > Other section. Also you can choose to show the venue name instead of event title in your listing.

Custom Widgets

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

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

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

Theme – Content

This widget will display a single post, custom post type (like charts, podcast, artist etc) or page.

  1. Set a Custom Title.
  2. Select the post type you need to render.
  3. Select your item from the dropdown list that will appear after selecting your post type.
  4. Add some text for your Button. If you dont wish any button to appear you can leave this blank.
  5. Add an URL for your button to a listing page or anywhere else you wish.
  6. Customize the Appearance of your widget (see Customize Widgets section).

Theme – Latest Posts

This widget will display a list or latest items from your posts or post types.

  1. Set a Custom Title.
  2. Select the Post type you wish to fetch the latest items.
  3. Randomize the items the widget will render.
  4. Select the Number of items to show.
  5. Change the output columns.
  6. Customize the Appearance of your widget (see Customize Widgets section).

Theme – Social Icons

This is a simple widget that will display the Social Networks you will define in your Appearance > Customize > Social Networks Area.

Theme – Events

This widget will display your Events in any sidebar.

  1. You can add a Title
  2. Select the base Event Category you want to get the events from. Leaving the Base Category field blank will just get the latest events ignoring their category.
  3. Show Recurring Events.
  4. Define the number of the upcoming events the widget will fetch.
  5. Add some text for your Button. If you dont wish any button to appear you can leave this blank.
  6. Add a URL for your button to your events template page or anywhere else you wish.
  7. Customize the Appearance of your widget (see Customize Widgets section).

Theme – Hero

With this widget you can display some basic information and create your own callout section.

  1. Set a custom Title.
  2. Add some Basic content.
  3. Add some text for your Button. If you dont wish any button to appear you can leave this blank.
  4. Add a URL for your button to any page you wish.
  5. Customize the Appearance of your widget (see Customize Widgets section)

Customize Widgets

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

How to use the page builder template

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

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

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

Coupon code WORDPRESS - 20% off of any purchase! Buy Now!