The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.
In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance Themes. The theme should be available in your themes list. Click activate.
After activation, you will be redirected to the CSSIgniter Settings panel (accessible from Appearance CSSIgniter Settings) to start customizing your brand new theme.
The recommended image sizes for the Hernan theme are:
- Post thumbnail size: 300x150px
- Blog thumbnails: 200x200px
- Slider: 940x460px
- Listing page thumbnails: 700x430px
- Thumbnail for discography and event items: 700px in width, not limited in height.
- Video thumbnail: 480x280px
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.
Importing Sample Content
To import sample content in order to make your Hernan installation look like the demo version, you need to go to the CSSIgniter Settings panel (accessible from Appearance CSSIgniter Settings). Site Options should be selected, so scroll to the bottom and in the last box, click Download sample content. You will be prompted to save a zip file, do it and then extract it. The contained xml file will be used to import the sample content. Back to your WordPress dashboard go to Tools Import and click on the WordPress importer. You will be prompted to install the plugin, install it, activate it and then navigate back to Tools Import and click on “WordPress” once again. Click Choose file and select the xml you got in the previous step. Click Upload file and import. In the following screen make sure you assign all posts to an existing user (or create new ones if you wish) and check the box that downloads and imports attachments. Click Submit and wait until everything is set up for you.
You can also download the Sample Content for Hernan by clicking here
Configuring your theme.
Setting up your homepage
Navigate to the CSSIgniter Settings panel and click on Homepage Options. Your first option is to enable or disable the slider on the homepage, check the box if you want one, uncheck if not. Next box will allow you to choose how many slider items you wish to have, just enter a number here (remember you need at least 2 for it to “slide”). Then you can select if you want the “Latest Media” section on your homepage, check or uncheck according to your liking. The following box allows you to display the content of a certain page in your homepage instead of your latest blog posts. If you wish to do that select the page from the dropdown menu, otherwise leave it blank so it displays your blog posts. Next select how many news items (or blog posts) you want in your homepage, select a number. Finally you can choose only certain blog categories to appear in your homepage, set their id’s in the box.
If you need a custom background in your homepage just go to Color Options and un-check the Disable custom background box. Then you can select a color or upload an image as a background.
Navigate to Display Options and have a look at your slider options, select auto-slide, slider effect, slide direction (if applicable) and set duration, in milliseconds for the slideshow and animation.
NOTE It is advised to turn auto-slide off if you are planning on displaying videos on your slider, otherwise it will slide out of view during playback.
Creating a Homepage.
NOTE If you imported custom content this is already done!
Go to Pages > Add new and create a new page. Give it a title like “Homepage” and on the Page Attributes box on the right select the Frontpage template. Publish the page.
Now go to Settings > Reading and set the page you just created as your homepage. Click the “A static pag” radio button and set it as Front page from the drop down. Save Changes.
While you are here
As you can see there’s an option Posts pageunder the Front page option. Create a new page called Blog or News or anything that you want to publish normal postsand set it here as your posts page. Save Changes
Setting up 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 set the URL where users will visit if they click on this slider item, here you can also set a video URL if you want a video in your slider. You can also disable slider text entirely.
Go to Appearance Widgets and place your desired widgets in the “Homepage Sidebar” (widget functionality will be explained below)
One last thing that we need to setup for our homepage (but visible on any other page on our website too) 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 (Pages and Custom Links) to the right. Re-order with drag and drop.
Create listing pages for Artists, Discography items, Galleries and Videos.
Go to pages new page give the page the desired title and from the page attributes in the right side select a page template. You have two template options for each type, one with a sidebar and one fullwidth. Publish the page.
Events page setup
NOTE If you imported custom content this is already done!
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. 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 (optional) and we move a bit lower in the Event Settings section where we fill the details of the event.
As you can see in the Select the event statusdropdown we have 4 different types of statuses.
- Tickets Available
- Sold Out
- 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”. You can also change the default text of the
button (Buy tickets, canceled etc) A last option for the events page is that you can show/hide the events map and the past
events. Just go to Appearance > CSSigniter Settings > Display Options and locate the box that allows you to hide the map.
With hernan you have the ability to provide self-hosted music and music from Soundcloud.
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.
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 preview your tracks! For this we are going to use a shortcode.
The title, the featured image and the Discography settings don’t need any further explanation but let’s see how we can use the Tracks details.
You may add the tracks of your release, along with related information such as a Download URL, Buy URL and lyrics. Press the Add Track button to add a new track, and individually the Remove me button to delete a track.
Once you add your tracks you may display them by using the [tracklisting] shortcode. By default, it will display the tracks of the current discography item. 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 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 [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″]
Go to Videos > New Video Item, set a title and scroll down to the Video Settings, here you can paste the video URL and if it is hosted on YouTube or Vimeo once you hit Publish it will automatically get the video thumbnail from YouTube/Vimeo and set it as your featured image. Of course if you want you can set your own featured image (if the video is not hosted on YouTube/Vimeo you have to set a featured image).
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.)
We have created 11 custom widgets.
- CI Ads Displays banner ads
- CI About Me Custom About me widget
- CI Album Tracklisting lists tracks, in the widget’s text area you can use the tracklisting shortcode described above in order to list any track you like.
- CI BuySellAds BuySellAds.com integration
- CI Event Display one event
- CI Flick Widget Display photos from a flickr account
- CI Latest Albums Display your latest albums
- CI Latest Photo Galleries Display your latest photo galleries
- CI Latest Videos Display your latest videos
- CI Recent Events display upcoming events
- CI Tweets Display tweets (needs to be setup from CSSigniter settings twitter options)
The theme also provides seperate widgetized sidebars for each section.
Our custom options panel can be found under Appearance CSSIgniter Settings. Let’s have a look at each tab’s options:
From this tab you can set your site’s properties.
- Logo text: Textual logo – site title
- Upload your logo: Allows you to upload a logo image. You need to upload it to the correct size. Logo text is used as alternative logo description.
- Upload your Favicon.
- Upload Touch icons to be displayed on touch enabled devices
- Customize your footer text
Home Page Options
Detailed description in the homepage setup section
From these tabs you can set a number of post items to be displayed in the listing page and change the section title (where applicable).
- Various options that affect what your website displays.
- Slider controls detailed above
- Column number for your listing pages
- Events map toggle
- Show past events on the events page
- Read More text: What will be displayed instead of the default Read More…
Excerpt length (in words): Limits how many words the excerpt will be, and whether it should be linked to the post.
Excerpt auto cut-off text: When a manual excerpt is not provided, WordPress generates one automatically from your post’s content, limiting the words according to the setting above. Because that may be mid-paragraph, the cut-off text is appended at the end to show that the text continues.
- Title separator: How the various elements of thetag will be separated (dash, pipe, colon, etc)
- Show “Comments are closed” message: Allows you to hide/show the default “Comments are closed” message when comments are disabled.
- Show or hide featured images
- Change featured image size on fullwidth page.
These options control the behavior of the -=CI Tweets=- widget.
These options control the behavior of the Archive page (if you created one) with the Archive page template assigned.
Google Analytics Code: Just copy paste your Google Analytics code exactly as given by their website, and you are all set for tracking visits.
FeedBurner Feed URL: Paste the feed that FeedBurner provides you with, and it will be automatically be server to your users.
FeedBurner Email URL: Paste the URL FeedBurner provides for registering to email updates.
BuySellAds.com Code: Paste the BSA code as given by their website and it will be automatically included on every page. Use our accompanying widget -=CI BuySellAds.com=- to display the ads.
Paste your custom css in the box, and it will override the theme’s styles, along with the Background Options.
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.
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.
Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums