How to install and setup SmartStart WP – Responsive HTML5 Theme – Installation

A) Installation

A. 1) First Steps

Before you can start playing around with your new theme, let’s first check what the theme package includes. After you have downloaded the .zip file from Themeforest and unzipped it, its should reveal the following folders:

  • _DocumentationThat’s where you are here at the moment
  • _LicenseSome info about theme licencing terms
  • _PSDAll .psd files
  • Dummy ContentPlacholder content for testing the theme
  • wwwActually theme (for FTP upload)
  • www-zipThe same theme but zipped version (for Theme Uploader)
How to install and setup SmartStart WP - Responsive HTML5 Theme

How to install and setup SmartStart WP – Responsive HTML5 Theme


A. 2) Upload the Theme

You have two options how to upload themes in WordPress and I will cover them both now. You can either upload all theme files via FTP or you can use WordPress Theme Uploader. It really doesn’t matter at all which one of these techniques you want to use, so choose the one which seems to make more sense to you.

Theme Uploader:

  1. So of course first you need to login into WordPress backend.
  2. Find Appearance from left sidebar, open it and click Themes.
  3. Now you click link called Install Themes.
  4. In the next page, just under Install Themes link, there is an another link called Upload, click that.
  5. Now you just need to find the SmartStart WP folder, which you just unzipped, and in there go to www-zip folder and select smartstart.zip file.
  6. Then just click Install now and WordPress will handle the rest!

FTP:

So I assume you do know how to use your FTP client of choice (like Filezilla), but if you don’t, then try Theme Uploader technique.

  1. First login o your FTP account and navigate to your WordPress installation directory and in there go to wp-content\themes folder.
  2. Now put FTP client to side for a while and head back to SmartStart WP folder, which you just unzipped, and in there go to www folder.
  3. There should be only one folder, called smartstart. To make sure you are in the right place, check that folder contains files like index.php, functions.php and style.css.
  4. If everything looks good you are ready to upload this smartstart folder to wp-content\themes, which you found earlier.

If you face any problems during the installation, I’d recommend to check this screencast: Solving Broken Theme Issues.


A. 3) Active the Theme

After theme is successfully uploaded, head on to Appearance » Themes, in WordPress backend. There should be now one new theme called SmartStart WP – Responsive HTML5 Theme. Find it and just click Activate.


A. 4) Install & Setup Plugins (optional)

These steps are totally optional, so if you don’t need Google Maps or contact form, you can easily just Dismiss the Notice and skip to the next step.

So at this stage you have probably noticed a warning sign, asking you to install recommended plugins. Now it’s time for that! And this is extremely simple, since you just need to click Begin installing plugins and you will be redirected to plugin installation page where you can install the plugins you want.

Google Maps made Simple Plugin

I’m not going to teach how to use this plugins because you can find its extensive documentation from plugin’s homepage.

To have fullwidth map, you will need to wrap the map shortcode with [fullwidth_map] ... [/fullwidth_map] shortcode.


Contact Form 7

Contact From 7 provides excellent documentation at its own so I will only guide how to setup a simple form. The actually plugin installation process is just like installing the Google Maps made Simple Plugin. So after it’s done, you will find new link called Contact from bottom of the sidebar. You can check Contact From 7 docs and create all different sort of forms with this plugin, but here is the basic form from the demo site:

<p class="input-block">
    <label for="your-name"><strong>Name</strong> (required)</label>[text* your-name id:your-name]
</p>

<p class="input-block">
    <label for="your-email"><strong>Email</strong> (required)</label>[email* your-email id:your-email]
</p>

<p class="input-block">
    <label for="your-subject"><strong>Subject</strong></label>[text your-subject id:your-subject]
</p>

<p class="textarea-block">
    <label for="your-message"><strong>Your Message</strong> (required)</label>[textarea* your-message id:your-message]
</p>

[submit "Send Message"]

A. 5) Upload Dummy Content (optional)

Be aware that downloading Dummy Content may take a while, depending on the speed of your internet connection!

If this is your first time with WordPress platform or if you just want to get use to the theme, you may want to first just play around with it. And in that situation Dummy Content is excellent choice! With this single file you should get almost identically result like in demo site. But of course you can easily just skip this step, if you don’t want any unnecessary extra content to your site.

  1. First go to Tools » Import and in there choose WordPress.
  2. If you haven’t imported anything before, you will need to install Importer plugin. So install it and once it’s done you can activate it.
  3. Now click Browse and navigate to SmartStart WP folder. In there go to Dummy Content folder and select smartstart-dummy-content.xml file and click Upload file and import.
  4. Before submitting it, you may also want to check Download and import file attachments checkbox.
  5. And now you just need to wait. Importing can take a while, but it will save a whole lot of your time so just be patient.

A. 6) Setup Theme Options

Theme has its own unbranded Theme Options panel, which can be found under the Apperance tab. There you can set some basic settings like logo, color scheme and social links. But before you start adjusting different settings, you should first click Save Options button to insert all default data to the database. This will just ensure that everything looks good.


A. 7) Setup Menu & Reading Settings

From now on I assume that you have at least some content on your site. If not, you should create few pages before you can continue.

Setup the Menu

At first you need to create the main menu, go to Appearance » Menus and create one (if you imported Dummy Content, it already exist). Now you will need to attach it into the theme in Theme Locations (upper left box).

You have also option to give main menu items a little description. If you can’t see the Description field, you can enable it by clicking Screen Options in top right corner and then checking the Description checkbox.

More info about WordPress menus can be found from here: Appearance Menus Screen.


Reading Settings

Now is also good time to set site Front page and Posts page in Settings » Reading Settings page.


A. 8) Setup Widgets

This theme comes with four custom widget, which are really easy to use.

Smart Contact Info

This widget shows the contact info and it’s meant to be used in Left Footer Widget Area. The widget can be configured in Theme Options (Social Media).


Smart Flickr Feed

This widget allows you to show latest images from any Flickr account or group. You can find your Flickr ID at http://idgettr.com/. Feed will be updated once in a hour.


Smart Social Links

This widget shows the social links and it’s meant to be used in Right Footer Widget Area. The widget can be configured in Theme Options (Social Media).


Smart Twitter Feed

This widget allows you to show latest tweets from any Twitter account. You have also option to Ignore Replies, so you can show only the actual tweets. And feed will be updated once in a hour.

Be Sociable, Share!

3 thoughts on “How to install and setup SmartStart WP – Responsive HTML5 Theme – Installation

  1. Hey there! I know this is kinda off topic but I was wondering which blog platform are you using for
    this website? I’m getting tired of WordPress because I’ve had problems
    with hackers and I’m looking at alternatives for another platform.

    I would be fantastic if you could point me in the direction of a good platform.

  2. You really make it appear really easy together
    with your presentation however I to find this topic to be actually one
    thing which I feel I might by no means understand. It kind of feels too complicated and extremely wide forr me.
    I’m taking a look forward in your next submit, I’ll try
    to get tthe grasp of it!

Leave a comment