Basix Wordpress Theme...Basix Wordpress Theme By Jesse Ngatai - Setup Guide Before we dive in, let me thank you for purchasing the ‘Basix’ theme. I really do appreciate your support

Basix Wordpress ThemeBy Jesse Ngatai - www.jessengatai.com

Setup Guide

Before we dive in, let me thank you for purchasing the ‘Basix’ theme.

I really do appreciate your support.

This guide covers the installation and use of this theme. I strongly recommend you

read this document thoroughly as it contains the solution to many frequently

answered questions. If however you do have questions that this guide cannot answer,

either contact me via my themeforest.net profile or via [email protected].

Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au

2

Index

1.0 Install

1.1 Requirements

1.2 Installing Wordpress

1.3 Installing The Theme

2.0 Setting Up

2.1 Homepage

2.2 Blog Page

2.3 Portfolio Page

2.4 Contact Page

2.5 Nav Menu

3.0 Theme Options Panel

3.1 Editing Site Settings

4.0 Widgets

4.1 Sidebar Areas

4.2 Available Widgets

4.3 Adding Widgets

5.0 Shortcodes

5.1 Available Shortcodes

5.2 Adding Shortcodes

This setup guide assumes you have a basic

understanding of web platforms and how they work.

6.0 Slides

6.1 Adding Slides

7.0 Posts

7.1 Adding Blog Posts

8.0 Portfolio

8.1 Adding Portfolio Items

9.0 Pages

9.1 Adding Pages

10.0 Styling

10.1 Styling Options

10.2 Styling Options Overview

11.0 Files

11.1 Stylesheets

11.2 Javascript/s

12.0 Credits

11.1 Image Sources


3

1.0 Install

1.1 Requirements

To have a functional wordpress site you will need a few things. Make sure you have the following

items ready to go:

- Web hosting

- An FTP uploading program (Filezilla or Cyberduck will do)

- A text editor in which to edit code (don’t worry nothing big)

1.2 Installing Wordpress

Installing wordpress is relatively easy, all you need to do is download it (http://wordpress.org/

download/). Then follow the step by step guide found at http://codex.wordpress.org/Installing_

WordPress#Famous_5-Minute_Install.

It shouldn’t take more than 5 - 10 minutes. Once you have wordpress setup we are ready to move

on to the fun stuff.

1.3 Installing The Theme

There are two ways we can install the theme. Both of which are very straightforward. You can in-

stall the theme via the admin panel using the supplied zip file which is included in the download

of theme. Or by directly uploading the files via FTP.

Uploading via ZIP

The theme comes already packaged in a ZIP archive called basix.zip. You can use this archive to

install the theme on your WordPress site. To install your theme, do the following:

• Login into your WordPress Admin section (http://www.your-web-site.com/wp-admin)

• Go to Appearance > Themes

• Click on the “Install Themes Tab”, next to the “Manage Themes” tab.

• Click on Upload

• Click on Browse and look for the basix.zip file (this file is INSIDE the zipped file you’ve

downloaded from ThemeForest).

• Click on Install Now.

• Once the theme has installed itself, click “activate”.

Uploading via FTP

The theme’s files are located inside the basix/ directory. To install onto your server via FTP, do

the following:


4

• Login to your WordPress site with your preferred FTP client

• Navigate to the /wp-content/themes/ directory

• Upload the basix/ directory inside the /wp-content/themes/ directory

• After the upload is complete, you will be able to choose the Basix theme from Appearance >

Themes. You can then proceed to activate the theme and begin using it.

Troubleshooting: Corrupted theme

Sometimes, problems can arise when uploading/installing, and the theme can become corrupt-

ed, due to an incomplete/incorrect installation. WordPress usually reports the broken theme and

it says that the Stylesheet (style.css) is missing. If your theme becomes corrupted for any reason,

do the following to fix it:

• Login to your WordPress site with your preferred FTP client

• Navigate to the /wp-content/themes/ directory

• Remove the basix/ directory completely

• After you have removed the basix/ directory, you can proceed to re-install the theme, either

by using the ZIP File method, or by using the basix/ directory method.

2.0 Setting Up

2.1 Homepage

To set up the homepage you must create a new page, you can do so by navigating to Pages > Add

New. You can give this page a title yet you do not have to include any content. Ignore the subti-

tle options at the bottom of the page as they do not apply to the home page. Select the “Home”

template from the Page Attributes section and click “Publish”.

Once you have created your new page which uses the “home page” template, navigate to Set-

tings > Reading and configure the “Front Page Displays” setting. Select the static page option

and choose the page you just created as your front page. Your homepage is now created. Note

that nearly all the content areas on the homepage (not including the slider and latest posts) are

widgetized. Meaning you can add whatever widgets you want to the home page and customize it

how you see fit. We will cover this soon.

You might find that there are a whole bunch of random widgets displayed on the page. To remove

these go into appearance > widgets. Remove all the widgets under the “Homepage Main” side-

bar.


5

2.2 Blog Page

To set up the blog page you must create a new page, you can do so by navigating to Pages > Add

New (exactly as we did for the home page). You can give this page a title yet you do not have to

include any content. Ignore the subtitle options at the bottom of the page as they do not apply

to the blog page. Select the “default” template from the Page Attributes section and click “Pub-

lish”.

Once you have created your new page, navigate to Settings > Reading and configure the “Front

Page Displays” setting. Select the static page option and choose the page you just created as your

blog page. Your blog page is now created.

2.3 Portfolio Page

To set up the portfolio page you must create a new page, you can do so by navigating to Pages >

Add New (exactly as we did for the home page). You can give this page a title yet you do not have

to include any content. Unlike the Homepage you can include a page subtile for the portfolio.

Something like “Our Recent Work” would be suitable. Select the “Portfolio Page” template from

the Page Attributes section and click “Publish”. You have now created your Portfolio Page. Will

we go over adding portfolio items later in the guide.

2.4 Contact Page

To set up the contact page you must create a new page, you can do so by navigating to Pages >

Add New (exactly as we did for the home page). You can give this page a title yet you do not have

to include any content. Unlike the Homepage you can include a page subtile for the contact page.

Something like “Our Contact Information” would be suitable. Select the “Contact Page” tem-

plate from the Page Attributes section and click “Publish”. You have now created your contact

Page.

If you want to setup the contact form you can do so in the “theme options” panel under the

appearance menu. Navigate to the “Forms” tab, here you can choose which email your contact

form and also your newsletter subscribe widget go to. This is optional though as your admin

email is used if you don’t specify one. We will cover the entire theme options panel later in the

guide.

2.5 Nav Menu

Now that we have the main pages of the site created we can create the top most nav menu - To do

this, follow the below steps:

• Navigate to the “Menus” in the “Appearance” Tab.


6

• In the menu name field give your nav menu a name. Something like “main menu” will do.

• Click on the “Create a menu” button located top right.

• In the “Theme Locations” there is one location we can place apply our new menu. Set this to

your newly created menu and click save.

• The menu is now setup and needs pages added to it.

• Lets go ahead and add all the pages we have just created (Home, Blog, Portfolio and Contact).

To add them to the menu use the tick boxes in the pages tab and then click “add to menu”.

• You can now arrange the order of the menu items.

• Once you’re happy, click “save menu”.

• Your nav header menu should now be viewable on the site.

You will also need to add any future pages to the nav menu should you want them to be included

in the nav.

3.0 Theme Options Panel

3.1 Editing Site Settings

Now that we have our main pages and navigation set up, it is a good time to edit some site wide

settings. Let’s navigate to the “Theme Options” which is found in the “Appearance” menu. By

the end of this setup guide you will be very familiar with this area of the admin dashboard.

General Settings

The general settings tab contains overall basic options for the site. Here you can edit and specify

the following. ( I won’t go through each individual option as they contain a description for each

field )

Styling Options

This tab contains the styling controls of the website. I recommend coming back to this tab once

you have the whole site setup.

Form Options

Here you can define which emails are used in the contact form and the newsletter subscribe as

well as editing the subject lines of both emails.

Portfolio Options

Here you can choose if your portfolio will display in 4 column style or 2 column style.

Post Options

Here you can edit what is displayed on the post page that aren’t post specific. Such as the author

badge and social network mediums.


7

404 Options

This area lets you specify the message that is displayed upon a 404 error page.

Custom CSS

The custom CSS panel lets you add your own CSS stylings to the website. Not for the faint of

heart. If you are unsure how CSS works it’s best to leave this tab alone.

4.0 Widgets

4.1 Sidebar Areas

You will notice that there are various areas on the site that say “No Widgets Added

Please login and add some widgets to the _____ Sidebar”. If you don’t know what a widget is, to

put it simply its a block of code that we can put into various areas, also known as sidebars. Basix

comes with the following sidebar ‘areas’:

• Home Page Main

• Home Page Sidebar

• Global Sidebar

• Contact Page Sidebar

• Footer

This means we can place widgets into any of these places.

4.2 Available Widgets

This themes comes with various custom widgets. They are as follows:

• Custom Flickr photos

• Custom Menu

• Custom Latest Tweets

• Custom Newsletter Subscribe

• Custom Social Icons

• Custom Tag Cloud

• Custom Testimonials

• Search

• Text

• Custom Text Boxes (Home Page Main Sidebar only)

• Custom Big Banner (Home Page Main Sidebar only)

• Custom Recent Jobs (Home Page Main Sidebar only)


8

• Google Maps (Contact page Sidebar only)

If you are new to Wordpress you will notice there are more widgets available than the ones listed.

That’s because they come packaged with wordpress, however they are not properly styled to

work with this theme. So its best not to use them.

4.3 Adding Widgets

To add a widget to a sidebar area, navigate to Appearance > Widgets. Here you will find the list of

widgets available and to the right of them the sidebar areas where we can implement them. Let’s

start with something basic.

• Locate the “Text” widget

• Drag and drop it to the “Footer” sidebar.

• Add a title to the widget

• Add the content to the widget

• Click save

You will now notice the widget with your custom content has been added to the footer. Also Note

that some widgets will only work on the contact page or homepage main sidebars.

To make it easier for you I have included an image that outlines which widget is what. This will

make replicating the demo a little bit easier. You will find it on the next page.


9

This is the widget overview to show you what the widgets look like.


10

5.0 Shortcodes

5.1 Available Shortcodes

Now that we are on our way to including content into the site, you will no doubt want to use

shortcodes. If you are new to wordpress you may not have heard of a ‘shortcode’ before. It’s ba-

sically an easy way to include small snippets of code into content areas. This theme comes with

the following shortcodes:

• Title

• Column

• Button

• Blockquote

• Dropcap

• Tabs

• Horizontal Line

• Spacer

5.2 Adding Shortcodes

Adding a shortcode is relatively easy and we can do it in most content areas of the site. Lets go

ahead and add a button to the first post of the website. If this is on a new installation of word-

press we should have a post called “Hello World”. Navigate to this post via the “Posts” menu.

Find the “Hello World” post and click edit.

In the content window, you will notice there is a green button with a plus sign. This is where all

the shortcodes live. Do the following to add a button:

• Click on the shortcode button (green button with plus sign)

• Click the button shortcode

• Input the URL of the button

• Specify the type of button (Normal OR Big)

• Specify the color of the button

• Input the Text of the button

• Click the “Insert shortcode” button

Now you will see some code that looks something like this:

[button style=”button” url=”http://www.web.com/” color=”#25cc94”] Button Text [/button]

Update the post and view it in your browser, you will see you have added a button the page. These

same basic implementation rules apply to all the shortcodes.


11

6.0 Slides

6.1 Adding Slides

To add a slide to the home page, navigate to “slides” menu in the wordpress admin.

• Click add new slide

• Add a title to the slide

• Set a featured image by clicking “Set Featured Image”. This will open the wordpress media

popup where you can upload images.Be sure to “SET FEATURED IMAGE” and not “INCLUDE

INTO POST”.

• Ensure the image is larger than 900px by 350px

• Captions are created from the content. Captions are optional if you leave the content blank.

• You can include shortcodes in the content area. For example if you want to include a button

or perhaps columns. You can do that via the shortcode button. It’s the green plus sign. We

will cover shortcodes more in depth later on.

• Below the content window there are a few options in relation to how the captions are styled

and work.

• Once you are happy, click “publish”

• View the homepage to see your new slide

I have included a small example below of one of the captions used in the demo.

Title: Easy Customization

Content: [col4] Duis autem vel eum iriure dolor in molestie consequat,vel consequat, vel in

molestie consequat,vel consequat,vel Duis autem vel eum. [button style=”button” url=”#”

color=”#25cc94”] Button Text [/button] [/col4]

Caption Align: Left

Caption Style: Light

Caption Title: Yes


12

7.0 Posts

7.1 Adding Blog Posts

To add a new blog post, navigate to the “Posts” menu in the wordpress admin.

• Click add new post (or you can edit the default wordpress one

• Add a title to the post


popup where you can upload images. Note that the featured image will also be used in on the

actual post page as well as the post listings page.

• It’s best if the featured image as at least 700 pixels in width

• Add whatever content you would like in the post content area

• Choose to include the subtitle on the post page

• choose to include the caption on the post page

• Add the post subtile

• Add the post caption (Optional)

• Add post categories (Optional)

• Add the post tags (optional)

• Click Publish / Update

8.0 Portfolio

8.1 Adding Portfolio Items

To add a new portfolio item, navigate to the “Posts” menu in the wordpress admin.

• Click add new

• Add a title to the item


popup where you can upload images. This featured image will only be used as the portfolio

thumbnail.

• If you are using a 2 column portfolio setup you will want the featured images to be bigger

than 440px wide. For 4 column portfolios the width should be bigger than 220px.

• The content you input will be used below the portfolio thumbnail. It’s best to keep this short

• Set the “Portfolio Item Type”

• If the item is a video, input its video URL

• If the item is a link, specify the link URL

• If the item is an image, you can have up to 5 images in a gallery. However note that you MUST

specify at least one image, otherwise your lightbox will not work.


13

• Add the filter categories. These filters are used directly on the portfolio page.

• Publish the Portfolio Item.

Your Portfolio item should now be viewable on the Portfolio page.

9.0 Pages

9.1 Adding Pages

Now that we have the major parts of the site completed, we can move on to static pages. A static

page for example is the “Features” page in the theme demo. To create a static page, navigate to

the “Pages” menu, and click add new.

• Enter the Page Title

• Enter the content

• Choose to display a subtitle

• Enter the subtitle (Optional)

• Add to categories (Optional)

• Publish.

10.0 Styling

10.1 Styling Options

If you have been following this setup guide up until now, just about everything should be setup,

so let’s have some fun. The “Styling Options” panel gives you lots of control to edit the look of

the site. On the following page is an overview of what each styling option does.


14

10.2 Styling Options Overview

Note that the Primary, Secondary and Accent color are available in various shortcode options.


15

11.0 Files

11.1 Stylesheets

Below is a list of style sheets that come with the theme.

• style.css - This is the main stylesheet for the website. You shouldn’t touch it unless you

know what you’re doing.

• ie.css - This contains various hacks so older versions of Internet Explorer play nice.

11.2 Javascript/s

Below is a list of javascript files that come with the theme.

• custom.js - Contains various custom settings for the site.

• ddsmoothmenu.js - Controls the main navigation menu

• gmap3.min.js - Controls the google maps function

• jquery.coda-slider-2.0.js - Controls the tabs function

• jquery.easing.1.3.js - A script that adds easing effects to various site transitions

• jquery.isotope.min.js - Controls the portfolio filtering and masonry

• jquery.prettyPhoto.js - PrettyPhoto is an open source lightbox

• modernizr.js - Fixes a whole bunch of problems with Internet Explorer

• scrolltotopcontrol.js - Controls that nifty little back to top button.

• slides.jquery.js - Controls the Homepage slider and also the testimonials

12.0 Credits

11.1 Image Sources

Below is a list of artists who allowed me to use their images in the demo. Thanks guys!

• Rigo Ortiz http://www.behance.net/rigoortiz

• Pawel Durczok http://leukocyt.com/

• James Oconnell http://www.james-oconnell.com/

• Alberto Vasquez http://www.alberto.hu/

Again a big thank you for choosing to purchase this theme.

If you require support in, please contact me through my themeforest.net profile

(http://themeforest.net/user/jessengatai) or email [email protected]

Documents

Basix Wordpress Theme...Basix Wordpress Theme By Jesse Ngatai - Setup Guide Before we dive in, let me thank you for purchasing the ‘Basix’ theme. I really do appreciate your support