FIRESTARTER

Advanced Magazine / News WP Theme by ThemeFlames
Online Theme Documentation

COMPLETE VIDEO GUIDE

INSTALLATION

  • Installing the Theme

    1. You will find a zip file under the Firestarter → Theme Files called Firestarter.zip

    2. Go to your Wordpress dashboard and navigate to Appearance → Themes and click upload. Select the Firestarter.zip file from your computer.

  • Installing the Plugins

    1. You will find the plugins which used in our demo website under the Firestarter → Assets → Plugins folder. Two important plugins are Regenerate Thumbnails and Multiple Post Thumbnails.

    2. Go to your Wordpress dashboard and navigate to Plugins → Add New and click upload. Select the plugins files and upload them from your computer.

  • Importing Dummy Data

    1. Please find the dummy .xml file under the Firestarter → Assets → Dummy Data folder. Two important plugins are Regenerate Thumbnails and Multiple Post Thumbnails.

    2. Go to your Wordpress dashboard and navigate to Tools → Import and select the Wordpress Importer. Then upload the .xml file from your computer using this tool.

  • Regenerating Thumbnails

    Why is this important: Because the theme uses some pre-defined thumbnail sizes on certain sections. If you already have content on your Wordpress database or if you just uploaded a dummy content you have to run this plugin once so all the images which were created before can be cropped to fit the theme's needs.

    1. After activating the theme and activating the Regenerate Thumbnails plugin, go to Tools → Regenerate Thumbnails regenerate all your images once so theme can work properly.

CREATING YOUR HOMEPAGE

  • Using the Homepage Template

    1. By default the theme shows a basic blog-type front page. To have a more sophisticated homepage go to Pages → Add New and create a new page with selecting the Homepage template, you should select it from the right panel where it says Page Attributes.

    2. Leave the body of the page and other areas empty and name this page My Homepage or whatever you want to name it.

    3. Go to Settings → Reading and select static page to display as front page. And choose your newly created My Homepage as your front page.

    4. Then go to Appearance → Widgets and arrange your homepage sidebar areas. Please use the widgets in proper areas, for example you can read under the Firestarter Homepage Module-A widget it says: …built for Homepage Middle Section, that means it will only work properly in Homepage Midlle Section widget area.

  • Adding Category Colors

    Uniform Colors: Go to Posts → Categories and click on a category. On the bottom you will see the category color input field. Type here a hex color like #ed9820 and your category will use that color as its uniform color for widgets, headings, borders etc.

    Menu Colors: 1. First we have to set up some colors and then we can apply them to desired menu item’s CSS Classes under menu item setting. To set up a color, go to Appearance → Theme Options → Custom CSS and let’s say we want to set a color named mycolor1.

    For this we have to copy and paste this css code into the Custom CSS box: #mainnav li.mycolor1:hover, #mainnav li.mycolor1.current-menu-item, #mainnav ul.sub-menu li.mycolor1, #mainnav li.mycolor1.current-post-parent { background:#777651; }

    Keep in mind: #777651 is just an example color for this first menu item, you should use your desired color. And if we were adding a color called mycolor2 then we should change all mycolor1 in the above code to mycolor2

    2. To assign this color to our first menu item we should go to Appearance → Menus and click Screen Options on the top right and under Show advanced menu properties check CSS Classes.

    3. Now let's select our first menu item from the Menu Structure and write mycolor1 into the Custom CSS input field. Now please follow these steps for every color and every menu item.

  • Multiple Sidebars for Categories

    1.Go to Posts → Categories and click on a category. On the bottom you will see the alternative category sidebar input field.

    Alternative Left Sidebar Name: If you type here Alternative Left Sidebar 1 and go to Appearance → Widgets and arrange the Alternative Left Sidebar 1 widget area according to your needs, then you will have an special sidebar for this category page. This applies to other areas so you can assign multiple sidebars for different categories.

    Alternative Right Sidebar Name and Alternative Category Body Name: Just use the tecnique above and you can arrange your middle section (which you can use for arranging sub-categories with different homepage modules) or you can add different right sidebar ads for your special categories, your choice.

    If you don’t use any alternate middle section for category pages, the theme will use your a default design for category pages with a featured slider and latest posts section under it.

  • Adding Icons to Menu Items

    1. Go to Appearance → Menus and click on a menu item. It should look like this:

    Edit a menu item

    2. In the example above your first menu item is Home. Normally that stays in the Navigation Label input of that menu item. But if you put there an icon shortcode in front of your label, you will have an home icon before it. Just go to Font Awesome's Icons Set and select your icons & paste their code in your menu items' Navigation Label input. Now it should look like this:

    Add an icon shortcode

POSTS

  • Teasers in Posts

    While editing a post, open Screen Options on the top right and check Post Excerpts from there, scroll down and you'll see the Posts Excerpts input. What you will write here as a post excerpt will be used as a teaser for this post.

  • Multiple Sidebars for Posts

    While editing a post, open Screen Options on the top right and Custom Fields from there, scroll down and click on Enter New custom field, for custom field’s name write sidebar and for value let’s say Alternative Right Sidebar. Then you should go to Appearance → Widgets and arrange the Alternative Right Sidebar 1 according to your desire.

  • Reviews in Posts

    While editing a post scroll down to bottom and you will see Review Controls. Just check the box Enable Rating Review? and type the details of your review and click on Publish

USING THE THEME OPTIONS PANEL

  • Authors & Authors Page

    Creating the Authors Page: Go to Pages → Add New and create a new page with the page template All Authors Template, you should select it from the right panel called Page Attributes. Just leave the body of the page and other areas empty and name this page “My Authors” or whatever you want.

    To use the Columnists widget and All Auıthors Page you should know the ID numbers of your desired authors. Here is how it's done:

    Author IDs: To use the Columnists widget and All Authors Page you should know the ID numbers of your desired authors. Go to Users → All Users and hover your mouse over an author or go his/her profile. You will see on the hover link or on the adress bar a link like this:

    http://firestarter.themeflames.com/wp-admin/user-edit.php?user_id=8... In this case the user id is 8 as you can read in the link. Just go to Appearance → Theme Options → All Authors Page and type this id wherever you want to show it.

    And you should also use the same tecnique for Columnists widget since it asks an user ID too.

  • Feedboxes

    The 6 category boxes just above the footer is called feedboxes/feedblock. To enable them you have to go to Appearance → Theme Options → Feedboxes first, enable the feedblock and assign every box a category with some content.

    Keep in mind: If you assign category which does not have any content then it can break the whole block and you won't get what you want in terms of design. Secondly, the responsiveness on mobile devices are designed to work with feedboxes. So if you enable the responsive design then you should have the feedboxes.

  • Responsiveness

    To enable the responsive design you should go to Appearance → Theme Options and simply enable the responsiveness.

    Keep in mind: Responsiveness on mobile devices are designed to work with feedboxes. So if you enable the responsive design then you should have the feedboxes.

CUSTOM CODES TO USED IN DEMO

  • 728x90 Ad Box

    Go to Appearance → Widgets and use a similar code for the 728x90 Ad Box Widget:

    <a href= "http://graphicriver.net/"><img src="http://firestarter.themeflames.com/wp-content/themes/Firestarter/images/728ad@2x.png" style="width:728px; height:90px;" alt="Ad Area" /></a>

  • 180x150 Ad Box

    Go to Appearance → Widgets and use a similar code for the 180x150 Ad Box Widget:

    <a href= "http://graphicriver.net/"><img src="http://firestarter.themeflames.com/wp-content/themes/Firestarter/images/180ad@2x.png" style="width:180px; height:150px;" alt="Ad Area" /></a>

  • 300x250 Ad Right Sidebar

    Go to Appearance → Widgets, add a text widget to the right sidebar and use a similar code to this:

    <a href= "http://graphicriver.net/"><img src="http://firestarter.themeflames.com/wp-content/themes/Firestarter/images/300ad@2x.png" style="width:300px; height:250px;" alt="Ad Area" /></a>

  • First Menu Panel Content

    Go to Appearance → Theme Options → Menu Panel Area and use a similar code to this:

    <p> Do you want to be a part of our team? We are looking for new writers in the following categories:</p> <p><strong>Food and Liquor</strong></p> <p><strong>What’s Hip</strong></p> <p><strong>Fashion</strong></p> <p>If you are interested, please familiarize yourself with the style of our magazine and apply to:</p> <p><strong>info@themeflames.com</strong></p>

  • Second Menu Panel Content

    Go to Appearance → Theme Options → Menu Panel Area and use a similar code to this:

    <p>Firestarter Magazine is a clean, powerful and responsive wordpress magazine/news theme.</p> <p>You can reach us via phone or post:</p> <p><strong>T: (974) 945 67 89</strong></p> <p><a class="contactmap"><iframe style="width:220px; height=:150px frameborder:0px; scrolling:no; marginheight:0px; marginwidth:0px;" src="http://maps.google.com/maps?f=d&source=s_d&saddr=40.723228,-73.984327&daddr=&hl=en&geocode=&sll=40.72285,-73.983948&sspn=0.001149,0.002626&mra=mift&mrsp=0&sz=19&ie=UTF8&t=m&ll=40.722852,-73.983951&spn=0.00061,0.001175&z=18&output=embed"></iframe></a></p>

  • Hex Color Codes

    Go to Posts → Categories and edit every category to add them different colors. The color codes used in the demo are:

    Whats Hip: #777651, Sports: #39ABE7, Sports: #ED9820, Tech: #C7222C, Politics: #FFA359, Street Art: #2F4098