Abrax - Premium WordPress Theme

Created: 12/05/2011
By: Marius Hogas & Digital Zoom Studio
Twitter: hogash, DZS
Facebook: DZS

Thank you for purchasing our theme.

Table of Contents

  1. Intro
  2. Installation
  3. Customising the theme to look like in the preview
  4. Special features - templates, shortcodes
  5. FAQ
  6. Other notes

A) Intro - top

Abrax - Premium WordPress Theme - next generation WordPress theme. Developed under WordPress 3.1 . Works with 3.2+.

B) Installation - top

  1. download & unpack the .zip from your Downloads tab.

  2. there are 2 methods of installing the theme in your WordPress site -

    1. Upload via WordPress
      1. access your wp-admin, go to Appearence > Themes > Install Themes > Upload
      2. select the abrax.zip from the theme folder ( from the unpacking of the main zip )
      3. activate
      4. done!
    2. Upload via FTP
      1. unpack the abrax.zip from the theme folder ( from the unpacking of the main zip )
      2. access your ftp, go to your wordpress installation / wp-content / themes and copy the extracted folder over there
      3. access your wp-admin, go to Appearence > Themes
      4. activate the Abrax theme
      5. done!

A video of the installation process:

C) Customising the theme to look like in the preview - top

For best results, switch to the HTML editor.

Special Pages

Contact Page

Create a new page ( from Pages > Add New ) and add the shortcode [contactform] along side other details you may want to include. You can configure the contact form from Theme Settings > DZS Contact Form.

from the Custom Fields tab ( see FAQ if you don't have it under the editor ) add abrax_gmaps option and set the value to 1

Homepage

Create a new page ( from Pages > Add New ) and from the Page Attributes tab select in the Template dropdown - Homepage

You can access other homepage options from Abrax Settings > Homepage.

This is about it in terms of special pages. The rest of the preview pages are the blog and normal pages made with shortcodes ( you can check the next chapter for shortcodes explanation.

Also, you will notice that in the preview that the homepage is not the blog page ( like in default wordpress ). For that all you need to do is do a new Page named Blog or Whatever. You can leave the contents blank. Then go to Settings > Reading and select Front page displays: A static page -> Front Page: Homepage, Posts Page: Blog or Whatever.

External Plugins used in the Preview

Flickr Widget

Link to it - http://wordpress.org/extend/plugins/dp-flickr-widget/

Newsletter

Link to it - http://wordpress.org/extend/plugins/newsletter/

 

Videos

D) Special Features - shortcodes, templates, widgets- top

Video Shortcodes

[video] - shortcode that helps you display your own hosted videos or audio

mandatory

source - the location of the file

optional

width, height - size of the video

type - video or audio ( can be also youtube or vimeo if you want this custom skin )

Examples:

[video source="http://thezoomer.net/testimages/test.flv" width="700"]
[video source="http://thezoomer.net/testimages/rockshow.mp3" type="audio" width="700" audioimage="http://thezoomer.net/testimages/butterflies.jpg"]

[youtube] - shortcode that helps you display youtube videos

mandatory

source - the ID of the video [ example: http://www.youtube.com/watch?v=oAyZazDpYKs&feature=feedrec_grec_index / the bolded part is the ID]

optional

width, height - size of the video

Examples:

[youtube id="CPblAp8EtY4" width="700"]

[vimeo] - shortcode that helps you display vimeo videos

mandatory

source - the ID of the video [ example: http://vimeo.com/24504225 / the bolded part is the ID]

optional

width, height - size of the video

Examples:

[vimeo id="24504225" width="700"]

Slider Shortcodes

[tinyslider] - shortcode that displays a tinyslider, preferabbly for text

optional

width, height - size of the slider

pagination - bullets navigation

Examples:

[tinyslider recentposts="5" pagination="on"] - displays the last 5 posts

[tinyslider recentposts="5" cat="1" pagination="on"] - displays the last 5 posts from the category with ID 1

[tinyslider]<li><p>Aenean tristique purus eget magna imperdiet convallis. Maecenas scelerisque mi nec leo hendrerit luctus quis nec ipsum. Proin nec nisl velit. Aliquam tortor mi, interdum nec molestie id, luctus sit amet libero. Nam in felis at risus pellentesque vestibulum a sit amet lorem.</p>
<h4><a href="#">John Smith</a></h4>
</li>
<li><p>Sed quis porta justo. Suspendisse consectetur sollicitudin egestas. Nulla consectetur semper nunc. Aliquam ultrices odio sit amet sapien viverra pulvinar. Mauris dapibus, nisi venenatis blandit rutrum, libero quam pharetra nisi, quis fermentum metus urna vel libero.</p>
<h4><a href="#">John Doe</a></h4></li>[/tinyslider]

displays the content

[nivoslider] - shortcode that displays a nivoslider

Optional:

width, height - size of the slider

Examples:

[nivoslider width="150"]<img src="http://dummyimage.com/600x400/000/fff" alt="" /><img src="http://dummyimage.com/600x400/000/fff" alt="" /><img src="http://dummyimage.com/600x400/000/fff" alt="" />[/nivoslider]

displays 3 dummy images

Other Shortcodes

Layout

Because there are several ( and with similar names ), we are going to display the demo page - http://thezoomer.net/theme5/layout/ - and paste the code used

[one_half]<p><strong>This is one-half of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_half] [one_half_last]<p><strong>This is one-half of a row (last).</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_half_last]

[one_third]<p><strong>This is one-third of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_third] [one_third]<p><strong>This is one-third of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_third] [one_third_last]<p><strong>This is one-third of a row(last).</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_third_last]

[one_forth]<h4>Title example</h4><p><strong>This is one-forth of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_forth] [one_forth]<h4>Title example</h4><p><strong>This is one-forth of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_forth] [one_forth]<h4>Title example</h4><p><strong>This is one-forth of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_forth] [one_forth_last]<h4>Title example</h4><p><strong>This is one-forth of a row (last).</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_forth_last]

[one_forth]<h4>Title sample</h4><p><strong>This is one-forth of a row</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_forth] [three_forth_last]<h4>Title sample</h4><p><strong>This is a three-forth of a row (last).</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/three_forth_last]

[three_forth]<h4>Title sample</h4><p><strong>This is a three-forth of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/three_forth] [one_forth_last]<h4>Title sample</h4><p><strong>This is one-forth of a row (last).</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_forth_last]

[one_forth]<h4>Title example</h4><p><strong>This is one-forth of a row.</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/one_forth] [three_forth_last]<h4>Title sample</h4><p><strong>This is three-forth of a row (last).</strong><br />Proin mattis vehicula metus vitae lobortis. Nunc id metus augue. Aliquam nulla est, rhoncus ut tempor pellentesque, tincidunt quis nulla. Nulla posuere rhoncus semper. Aenean eros orci, varius non commodo at, convallis id ante.</p>[/three_forth_last]

Note: always remember to add _last to the last layout shortcode that is on the row.

WordPress Media Gallery

[phoenixgallery]

id - the ID - you can setup this gallery in Abrax Settings - DZS Phoenix Gallery

Portfolio

[portfolio]

Optional:

cats - comma separated categories, you can use here the id's of the gallery. If you do not know how to find out the category id, check the FAQ section below

hidecats - set it to "on" if you want to hide category menu above the portfolio

Brief:

You can create Portfolio Items via the Portfolio Items post type. - just like you create normal posts. If you want to sort your Portfolio items you need to add them to a category. The category format is Portfolio - Category Sample. So if your category is named like this, you should see a Category Sample menu button now that filters all the items beloning to this category.

Examples:

[portfolio]

[portfolio cats="31,35"]

[portfolio cats="31,35" hidecats="on"]

 

Gallery

[a_gallery]

id - the ID - you can setup this gallery in Abrax Settings - Gallery

Examples:

[a_gallery id="gallery1"]

You can access the admin from Theme Settings > DZS Gallery, you can add galleries, and in each gallery you can add items. On each item you will see 2 fields - Thumbnail and Link. Thumbnail is the visual thumb you can see in the demo also. Link is the url the thumb takes you when clicked. It can also be a lightbox gallery like in the demo if you set another ( or the same ) picture url in the Link field.

For lightbox functionality, you first need a lightbox plugin like Fancybox or Prettyphoto ( http://wordpress.org/extend/plugins/wp-prettyphoto/ ), then on each gallery you will see a field Link Class - complete it with the appropiate lightbox class ( for prettyphoto -> wp-prettyPhotto ).

<h2>HTML &lt;pre&gt; with .pre class</h2>
<pre class="pre">#pre-sample {<br>font-size:12px;<br>color:#ffffff;<br>}</pre>

<h2>Blockquote</h2>
<blockquote class="blockquote">In hendrerit molestie sapien, et pretium urna lobortis et. Mauris felis tortor, auctor a congue quis, interdum a arcu. Vivamus suscipit posuere accumsan. Vestibulum vitae ante nec quam volutpat convallis a vitae est. Praesent facilisis eros in quam congue eget pellentesque nunc interdum. Vestibulum dapibus, dui at pulvinar malesuada, massa purus fringilla elit, et mattis magna purus nec urna.</blockquote>

<h2>Lists</h2>
<div style="display: block;">
<div style="width: 49%; float: left;">
<ul>
<li>List with no class</li>
<li>List with no class</li>
<li>List with no class</li>
<li>List with no class</li>
<li>List with no class</li>
</ul>
<ul class="list-type-1">
<li>List with .list-type-1 class</li>
<li>List with .list-type-1 class</li>
<li>List with .list-type-1 class</li>
<li>List with .list-type-1 class</li>
<li>List with .list-type-1 class</li>
</ul>
<ul class="list-type-2">
<li>List with .list-type-2 class</li>
<li>List with .list-type-2 class</li>
<li>List with .list-type-2 class</li>
<li>List with .list-type-2 class</li>
<li>List with .list-type-2 class</li>
</ul>
<ul class="list-type-3">
<li>List with .list-type-3 class</li>
<li>List with .list-type-3 class</li>
<li>List with .list-type-3 class</li>
<li>List with .list-type-3 class</li>
<li>List with .list-type-3 class</li>
</ul>
<ul class="list-type-4">
<li>List with .list-type-4 class</li>
<li>List with .list-type-4 class</li>
<li>List with .list-type-4 class</li>
<li>List with .list-type-4 class</li>
<li>List with .list-type-4 class</li>
</ul>
</div>
<div style="width: 49%; float: left;">
<ul class="list-type-5">
<li>List with .list-type-5 class</li>
<li>List with .list-type-5 class</li>
<li>List with .list-type-5 class</li>
<li>List with .list-type-5 class</li>
<li>List with .list-type-5 class</li>
</ul>
<ul class="list-type-6">
<li>List with .list-type-6 class</li>
<li>List with .list-type-6 class</li>
<li>List with .list-type-6 class</li>
<li>List with .list-type-6 class</li>
<li>List with .list-type-6 class</li>
</ul>
<ul class="list-type-7">
<li>List with .list-type-7 class</li>
<li>List with .list-type-7 class</li>
<li>List with .list-type-7 class</li>
<li>List with .list-type-7 class</li>
<li>List with .list-type-7 class</li>
</ul>
<ul class="list-type-8">
<li>List with .list-type-8 class</li>
<li>List with .list-type-8 class</li>
<li>List with .list-type-8 class</li>
<li>List with .list-type-8 class</li>
<li>List with .list-type-8 class</li>
</ul>
</div>
</div>

 

<h2>Buttons</h2>

<p>The below examples have the class="btn-style1"</p>

<p><a href="#" class="btn-style1">Pellentesque</a>

<a href="#" class="btn-style1">Vestibulum</a>

<a href="#" class="btn-style1 rounded">condimentum sed</a></p>

<p>The below examples have the class="btn-style2"</p>

<p>

<a href="#" class="btn-style2">Pellentesque</a>

<a href="#" class="btn-style2">Vestibulum</a>

<a href="#" class="btn-style2 rounded">condimentum sed</a>

</p>

<br />

<div class="clear"></div>

 

<h2>Table</h2>

<p>This table has the class - 'styled-table'</p>

<table border="0" cellspacing="3" cellpadding="3" width="100%" class="styled-table">

<tr>

<th width="20%">Header cell</th>

<th width="20%">Header cell</th>

<th width="20%">Header cell</th>

<th width="20%">Header cell</th>

<th width="20%">Header cell</th>

</tr>

<tr>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

</tr>

<tr>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

</tr>

<tr>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

</tr>

 

<tr>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

</tr>

<tr>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

<td>Data Cell</td>

</tr>

</table>

 

<h2>Warning boxes</h2>

<div class="info">Info message (class - 'info')</div>

<div class="success">Successful operation message (class - 'success')</div>

<div class="warning">Warning message (class - 'warning')</div>

<div class="error">Error message (class - 'error')</div>

 

 

E) FAQ - top

[ WordPress Admin ] How do I enable Custom Fields or Comments fields in the Post / Page edit screen?

Find the screen options field  
 
and enable what fields you want  

[ WordPress Admin ] What's a WordPress category ID ? How do I find the category ID ?

Go to Posts > Categories and you'll find the ID in the link that goes to the specific category, as shown in the below picture.
 


How do I get the contact form page to look like in your demo ?
Let's begin with the maps header. Make sure you have the Custom Fields screen enabled on your Contact form page ( help above ). Then just select abrax_gmaps in the Name dropdown and input the value "1" in the Value field.

How do I get a testimonials widget like in the demo ?
Just add some posts and lists them under a new category called Testimonials.Then go to the Widgets section and just drag a tinySlider widget in which sidebar / footer you want. When configuring it's options, under the Get Categories input, type the Testimonials category id.

F) Other notes - top

Thank you!

Digital Zoom Studio

Go To Table of Contents