Introducing Hudson WordPress Theme

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.

Thank you for purchasing our product! We are very glad that you have decided on our Hudson WordPress Theme.

This documentation will teach you how to set up and use the Hudson WordPress Theme. The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation, if there are some other issues you want to discuss then do not hesitate to contact us on hi@teslathemes.com. This documentation is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Please read the following very carefully as it will help you set the theme up, we have gone through the setup process multiple times and provided the best possible instructions.

We strongly recommend you to use a fresh install of WordPress and integrate your content into the pages according to the documentation. Of course, you can try to implement the theme into your current WordPress, but we will not provide in-depth support for it. The theme has specific settings that may conflict with your current setup of categories, plugins, javascript use, and more.

We wish you good luck in your work with Hudson WordPress Theme, and of course we would love to see your website and what you come up with by using this theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email hi@teslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us a email.

Installing WordPress

To the Top

Step 1: Download and Extract

Download and unzip the WordPress package from Download Wordpress.

  • If you will be uploading WordPress to a remote web server, download the WordPress package to your computer with a web browser and unzip the package.
  • If you will be using FTP, upload the wordpress folder to your site.
  • After a successful upload, then you access your site URL and get this message:
Creating a new configuration file

Step 2: Edit the Configuration File

Auto Mode: After accessing the site you will get the configuration page:

Establishing a connection

If the information is correct and everything works fine you will receive:

Successful

If it's successful then skip the "Manual Mode" if not, follow the instructions bellow.

Manual Mode: You can either rename the file wp-config-sample.php to wp-config.php on your local machine or on you server (you'll still need to tell WordPress your database information).

Open wp-config.php with a txt editor and enter your database information under the section labeled:

/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');

/** MySQL database username */
define('DB_USER', 'username_here');

/** MySQL database password */
define('DB_PASSWORD', 'password_here');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');
                    

After the information is edited upload the file to the server.

Step 3: Site name and login data

If it's all sparky then you click Run the Install and fill all the lines bellow:

Login Information

This being the last step you will see a success message.

Success

Click Log in and now you can proceed to you site. Now you can go to installing your Hudson WordPress Theme.

Installing Theme

To the Top

To install the Hudson WordPress Theme you will need WordPress v3.4 or newer.

Option A

Follow the steps and upload the Theme's installation.zip file through the WordPress admin backend:

upload

Then, when prompted activate the theme:

active

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

Option B

You have to upload via FTP to the Server, in Wordpress Folder → wp-content → themes folder the Hudson WordPress Theme Folder.

If everything went well in Option A or B, the theme should appear under Appearance → Themes like shown below:

cover

Now you are ready to customize your theme

General Options

To the Top

Create a page that will serve as homepage - In wordpress admin panel under Pages → Add New, name it for example "Front Page Default". Also, select "Default Front Page" as the template used by the page.

Create a page that will serve as the archive page of blog posts - In wordpress admin panel under Pages → Add New, name it for example "Blog". Make sure that the permalink slug is "blog" only. Also, select "Default Template" as the template used by the page.

Set the front page to display as a static page: - Go to Settings → Reading → A static page (select below) → Front page: → Choose your page from the drop-down menu.

Choose your posts page from the drop-down menu. It should be the "Blog" page we have just created.

Your page should look something like:

home page

We recommend you set the number of items to show to be a number divisible by 3, for example: 6, 9, 12, etc

Tesla Framework

To the Top

All our themes are powered by Tesla Framework, a powerful administration tool that comprises all our great features and allows you to easily customize the look and functionality of your theme, without advanced knowledge of programming. It gives you the possibility to customize and manage your theme settings from a dedicated area within your Wordpress Admin. Tesla Framework works smoothly, is intuitive and easy to use, once you install one of our themes you will be able to personalize its logo, site background and color, SEO options, social media networks and more; all from one place.

Our Framework is in continuous development and improvement process, we are working hard to provide you an easy administration tool, and we're guided by the latest UX trends and new technologies.

To personalize your theme you need to follow the instructions below.




Some times you need to change background color or image and you think wich way should you go. Below you discover framework's feature to customize background.




Some SEO features is included in first release. Stay in touch to discover new features!




Additional messages: to customize and display aditional textual content for: logo area, footer copyright notice, 404 error page




Provide contact information to stay in touch with your site visitors. This info will be display on contact template


Here you can view your subscribed users as well as configuring the "Subscribe" widget title and placeholder

Custom posts

To the Top

Hudson has some custom posts defined to make editing some groups of content easier, such as Collections, Offers, Team members and Partners.


Collections provide you an easy way to list your collection of goods. If you are a clothes store, you can create seasonal collections. If you are a laptop shop, you can create collections of new generation laptops.

In order to create a collection, create a custom post of type "Collection", set a featured image (that will be the cover of you collection), and include a gallery inside the content. A default Wordpress gallery needs to be included. Read how to create a gallery if you have not done this before.





Note

Import dummy XML content to preview all features of Hudson theme . For this , access the "Import demo" sub-page from "Hudson" admin menu and press the "Import Demo" content button .

Bellow are listed all the custom posts.

  • Offers :

    The "Offers" custom post type allows you to add new offers that run on the website. There are different types of offers, briefly explained below:

    Hot Offers are images (with link or not) that are displayed in the main slider on the front page. These are offers that you don't want your clients to miss. This is how they look:


    This offer type is implemented via a shortcode. See how to implement Hot Offers in your site.

    About Us Service Offers are images (with text underneath) that are displayed on the about us page. This type of offer describes the key values of the company. This is how they look:


    This offer type is implemented via a shortcode. See how to implement About Us Service Offers in your site.

    Generic Offers are images that are displayed on the front page by default. This is a generic offer type that shows as a banner. This is how they look:


    This offer type is implemented via a shortcode. See how to implement Generic Offers in your site.

    Service Offers are images that are displayed on the front page by default. This is an offer type used to let the client know what type of service you offer. This is how they look:


    This offer type is implemented via a shortcode. See how to implement Service Offers in your site.

    Hot Offer Strip Bars are images / text (with link or without) that are displayed on the front page by default, before the big slider with hot offers. This is an offer type that shows as a strip bar. It is usually used to show an important piece of news in a limited space. This is how they look:


    This offer type is implemented via a shortcode. See how to implement Hot Offer Strip Bars in your site.

  • Partners :

    The Partners custom post type is used to make it easier for you to define and manage your partners. In order to show your partners you will use a shortcode that will create a slider. This is how it looks:


    See an example on how to implement the Partners slider on your site.

  • Team members :

    The Team Members custom post type is used to make it easier for you to define and manage the team members that run your company. This is how the implementation looks:


    See an example on how to implement the Team Members section on your site.

Shortcodes

To the Top

Custom post type shortcodes

Hot Offers Strip Bar

The default usage of hot offers strip bars is to use the [tesla_offers_strip] shortcode in your page. This will render the latest (ordered by date) offer of type Offer Strip Bar.

If you want to display a specific offer, then you can provide the id like this: [tesla_offers_strip offer_ids="257"], where 257 is the ID of the post of type Offers.


Service Offers

The default usage of service offers is to use the [tesla_offers_service] shortcode in your page. This will render the latest (ordered by date) offers of type Service Offer.

If you want to display specific offers, then you can provide the ids like this: [tesla_offers_service offer_ids="257, 123, 345, 433"], where 257, 123, 345, 433 are the IDs of the posts of type Offers.

You can also define the Headline of this section like this [tesla_offers_service offer_ids="257, 123, 345, 433" headline="// Our Services"]

The number of offers has to be 4.


About Us Service Offers

The default usage of about us service offers is to use the [tesla_offers_about_services] shortcode in your page. This will render the latest (ordered by date) offers of type About us Service Offer.

If you want to display specific offers, then you can provide the ids like this: [tesla_offers_about_services offer_ids="257, 123, 345, 433"], where 257, 123, 345, 433 are the IDs of the posts of type Offers.

You can also define the Headline of this section like this [tesla_offers_about_services offer_ids="257, 123, 345, 433" headline="//Our Promises"]

The number of offers has to be 4.


Generic Offers

The default usage of generic offers is to use the [tesla_offers_generic] shortcode in your page. This will render the latest (ordered by date) offers of type Generic Offer.

If you want to display specific offers, then you can provide the ids like this: [tesla_offers_generic offer_ids="257, 123, 345, 433"], where 257, 123, 345, 433 are the IDs of the posts of type Offers.

You can also define the Headline of this section like this [tesla_offers_generic offer_ids="257, 123, 345, 433" headline="// Headline"]

The number of offers has to be 4.


Hot Offers

The default usage of generic offers is to use the [tesla_offers_hot] shortcode in your page. This will render the latest (ordered by date) offers of type Hot Offer.

If you want to display specific offers, then you can provide the ids like this: [tesla_offers_hot offer_ids="257, 123, 345, 433"], where 257, 123, 345, 433 are the IDs of the posts of type Offers.

The number of offers has to be 3.


Partners Shortcode

The default usage of partners shortcode is to use the [tesla_list_partners] shortcode in your page. This will render all (ordered by date) partners in a slider.

The other parameters of this shortcode are: [tesla_list_partners orderby="date" order="DESC"]. The parameters orderby and order are default Wordpress parameters sent to the get_posts function. See this page for more information.


Team Members Shortcode

The default usage of team members shortcode is to use the [tesla_team_show] shortcode in your page. This will render all (ordered by date) members in a section on your page.

If you want to display specific team members, then you can provide the ids like this: [tesla_team_show ids="257, 123, 345, 433"], where 257, 123, 345, 433 are the IDs of the posts of type Team Members.

You can also define the Headline of this section like this [tesla_team_show offer_ids="257, 123, 345, 433" headline="// Headline"]


Social Icons

Social Icons

The default usage of social icons shortcode is to use the [tesla_social_icons] shortcode in your page. This will render some default (facebook, pinterest, twitter, rss) social icons with links in a section on your page.

If you want to display specific social icons, then you can provide the ids like this: [tesla_social_icons services="facebook, pinterest, twitter, rss"], where services ids can be facebook, twitter, pinterest, flickr, dribbble, behance, google, linkedin, youtube, rss.

You can also define the Headline of this section like this [tesla_team_show offer_ids="257, 123, 345, 433" headline="// Headline"]


Hudson template grid is based on the Twitter's Bootsrap framework. To start working in the GRID you must put all your content in columns : [tt_column columns="your_size"][/tt_column] shortcode.

Import the XML provided with theme package and go to "Features" page to see an example of how to use the grid.
Grids
Parameters:

columns : The number of columns the element will be. Values may be from 1 to 12
class : You can add your custom CSS class so you can style it later

[tt_row]
    [tt_column columns="12" class="grid_example"] FUL WIDTH [/tt_column]
    [tt_column columns="3" class="grid_example"]1/4[/tt_column]
    [tt_column columns="3" class="grid_example"]1/4[/tt_column]
    [tt_column columns="3" class="grid_example"]1/4[/tt_column]
    [tt_column columns="3" class="grid_example"]1/4[/tt_column]
    [tt_column columns="4" class="grid_example"]1/3[/tt_column]
    [tt_column columns="4" class="grid_example"]1/3[/tt_column]
    [tt_column columns="4" class="grid_example"]1/3[/tt_column]
    [tt_column columns="6" class="grid_example"]1/2[/tt_column]
    [tt_column columns="6" class="grid_example"]1/2[/tt_column]
[/tt_row]
                    
Alerts
[tt_alert type="success"]NOTICE THIS: THIS IS A REGULAR SUCCESS MESSAGE[/tt_alert]
[tt_alert type="danger"]NOTICE THIS: THIS IS A REGULAR ERROR MESSAGE[/tt_alert]
[tt_alert type="info"]NOTICE THIS: THIS IS A REGULAR INFO MESSAGE[/tt_alert]
                    
Tabs
Parameters for [tt_tabs_nav]:

class : The class attribute. If more than one, then separate by spaces.
id : The ID attribute. Make it unique on the page.

Parameters for [tt_tabs_nav_li]:

class : The class attribute. If more than one, then separate by spaces.
link_id : The link ID attribute. This should be the same ID that you will set to the corresponding tab content pane.

Parameters for [tt_tabs_content_pane]:

class : The class attribute. If more than one, then separate by spaces.
id : The ID attribute. This should be the same ID that you set to the corresponding tab navigation li before.

Make sure that you set one tt_tabs_nav_li to have a class with active value, and its corresponding tab content pane to have an active class value. This is needed to make one tab active when the page loads.

[tt_tabs]
    [tt_tabs_nav id="myTab1"]
        [tt_tabs_nav_li link_id="example_1" class="active"]Example 1[/tt_tabs_nav_li]
        [tt_tabs_nav_li link_id="example_2"]Example 2[/tt_tabs_nav_li]
    [/tt_tabs_nav]
    [tt_tabs_content]
        [tt_tabs_content_pane id="example_1" class="active"]Some content in our first tab content pane. It looks great isn't it?[/tt_tabs_content_pane]
        [tt_tabs_content_pane id="example_2"]This is test content 2.[/tt_tabs_content_pane]
    [/tt_tabs_content]
[/tt_tabs]
                    
Pricing Tables
Parameters:

The shortcode [tt_pricing_table] has the following parameters: heading : Table title
price : Price
currency : Currency. Default $
url : URL for "buy now" text
buy_text : "Buy now" text at the end of the pricing table. Defaults to buy it now

NOTE: In order for this shortcode to work properly, each row between [tt_pricing_table] tags should be list items. In order to achieve this, click the list icon.

[tt_row]
    [tt_column columns="4"]
        [tt_pricing_table heading="standard" url="#" buy_text="buy it now" currency="$" price="25"]
                First reason
                Second Reason
                Third Reason
        [/tt_pricing_table]
    [/tt_column]
    [tt_column columns="4"]
        [tt_pricing_table type="popular" heading="VIP" url="#" buy_text="buy it now" currency="$" price="85"]
                First reason
                Second Reason
                Third Reason
        [/tt_pricing_table]
    [/tt_column]
    [tt_column columns="4"]
        [tt_pricing_table heading="Recommended" url="#" buy_text="buy it now" currency="$" price="55"]
                First reason
                Second Reason
                Third Reason
        [/tt_pricing_table]
    [/tt_column]
[/tt_row]
                    

Credits and Sources

To the Top

I've used the following images, icons, fonts or other files as listed.

Thank you so much for choosing Hudson WordPress Theme. We hope you will enjoy using it!