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
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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:
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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)
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
9
This is the widget overview to show you what the widgets look like.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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
• Set a featured image by clicking “Set Featured Image”. This will open the wordpress media
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
• Set a featured image by clicking “Set Featured Image”. This will open the wordpress media
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.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
14
10.2 Styling Options Overview
Note that the Primary, Secondary and Accent color are available in various shortcode options.
Basix - Wordpress Theme By Jesse Ngatai | www.jessengatai.com.au
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]