Theme Laboratory

Handyman - One Page WordPress Theme For Craftsman Business | Documentation v1.2.0

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us. Thanks so much!

The table of contents (left sidebar) should help get you started so you can jump to the section you need help with. We have included tons of screenshots throughout this file in an attempt to make finding your answers as easy as possible.

If you prefer video instruction please visit our YouTube Channel

Please make sure that your system meets minimal requirements:

  • PHP 5.4 or newer
  • Mysql 5.x
  • The Theme is compatible with following versions of WordPress: 4.2 or newer.
  • Installed the latest LayersWP Theme

This WP theme was tested on following Web browsers:

  • IE 9.0+
  • FF 37.0.1+
  • Chrome
  • Opera
  • Mini Opera
  • Safari

Uncompress the file (.zip) downloaded from ThemeForest. Uncompressed files will have following structure.

    ROOT/
        ├── Demo/
           ├── demo-xml.xml             -  Demo content XML file.
        ├── Documentation/
           ├── fonts/                    
           ├── imgs/                    
           ├── js/                    
           ├── css/                    .
           ├── index.html               -   Help file
        ├── Licencing
           ├── license.txt              -  License Agreement
        ├── changelog.txt                -  
            All changes made on this theme.
        ├── handyman-wp-theme-v1.0.zip   -  Handyman - One Page WordPress Theme For Craftsman Business Theme (this file should be uploaded)
        └── readme.txt
        

In Order to install the theme please follow these steps:

1.) Install a new instance of a Wordpress if you don't have one.

If you did not installed WordPress yet go ahead and do so now. Many webhosts like GoDaddy provide utilities to automatically install wordpress for you as a value added application. If not, no worries, wordpress is very easy to install. Infact the WordPress site actually has tutorials walking you through how to set it up.


2.) Install LayersWP Theme

Before installing Handyman Child Theme, LayersWP Parent Theme should be installed first. Parent theme can be dowloaded HERE!. Uncompress downloaded archive and copy layerswp folder to the wordpress themes folder.

3.) Uncompress Handyman Child Theme downloaded from ThemeForest.(See)

4.) Copy/upload theme file

In order to install Handyman Child Theme you need to upload .zip file called "handyman-wp-theme-vX.X.zip. Navigate to the page shown below and upload the theme file.

Step 1
Step 2
Step 3

After successful uploading you should see screen like this. Press Activate link to activate the theme.

Congratulations! You have installed and activated the theme.

A few more steps and you can proceed with entering your content and/or import demo content which is included with this theme.

After successful installation it is highly recommended to install/activate all plugins delivered with the theme. Some plugins are REQUIRED. Those plugins MUST be installed. Recommended plugins are optional.

Step 1
Step 2

If everything went OK this should be a result(see screenshot below). At this point plugins are installed. Procceed with plugin activation. Picture below.

Step 3
Step 4

We have created demo content that you can import into your WordPress installation, so you can hit the ground running! Pages for all the available layouts, shortcodes, blog posts, and custom post types (Testimonials, Portfolios and Services) have been setup in this XML file. All you have to do is import it. Steps are outlined below with screenshots. This step is not mandatory.

IMPORTANT! Standard WP Widgets are NOT included in this demo content.

Demo content file is placed in Demo folder. To import data follow this steps. Install Wordpress Importer plugin. Otherwise you will be redirected to the install plugin page. Install the plugin and activate it.

Select .xml file with demo content. It is located in /demo folder.

Set options as shown in the screenshot below. Make sure you've selected option "Download and import attachments". Press Submit button.

These settings are not mandatory but we recommend you to create .htaccess file and to copy this file in wordpress root directory. Also it is good practice to change default Wordpress option related to permalinks. By default WordPress creates links like this:

  • http://example.com/?p=1
  • http://example.com/?cat=1
  • ...

These links are not nice, not userfriendly and are not SEO optimized. It is much better to have links like this:

  • http://example.com/contact-us
  • http://example.com/chicken-breast-with-mushrooms
  • ...

Changing permalinks format screenshot. Make sure to check user-friendly permalink format.

In case you do not have a .htaccess file WordPress will try to create it for you and probably will fail. The reason for this is file permissions. Wordpress will not be able to create/write new file to your server. Generaly speaking there are two approaches to handle this. To set write permitions on WordPress root directory and repeat steps for creating nice permalinks or to create it by yourself. Both approaches have the same result but do not forget to unset write permitions on root directory.

Info Check this link to learn more about .htaccess file.

If demo content imported you already have predefined Main Navigation. It is fully customizable. All you need to do is to select it from drop down menu and press Save button. Follow screenshot.


Check Header Menu option and do not forget to click Save Menu button.


In order to update/create a navigation menu you have to navigate to "Menu edit screen". Apperance > Menus

Mark items on the left( pages in this case) and click Add to Menu button. Newly added items will be placed at the bottom of the list. Reorder the list by Dragging&Droping items.

Besides pages, navigation menu can include external links or hash tags(#).

Hash tags are used to navigate inside one page ( ex. jump from one section to other inside one page).

In order to add new link populate required fields and press Add to Menu button.

Where can I find section hash tags for my homepage?

Follow the screen shot. Value in text field called WIDGET ACHOR ID is a hash tag. Copy/Paste this value to a menu item URL text field.


Let's get familiar with images in the theme.

Uploading and inserting images in WP is easy and intuitive. Let's say user friendly. All you need to do is to navigate to WP Media Center and follow the interface.

By default Wordpress makes(resizing, croping) 3 versions of an uploaded image (thumbnail, medium, large)

The theme requires more, it creates additional versions of an image. We tought that it is very useful to upload an image once and to use it multiple times in different situations. For example the slider requires bigger images while posts or services requires smaller images. By uploading bigger image it will suite slider and it will be resized/cropped for posts, services... etc.

In order to cover all possible situations (same image for blogpost & Full Page slider, etc) we recommend use of images with following size 1600x900 or bigger. In case you need an image only for a post it could be smaller.

Automatic cropping and resizing is very handy and speed up content management a lot but sometimes there will be badly cropped one. In this cases the image must be cropped/resized manualy. Do not forget that WordPress have all you need to do it. For more info check this link.

Of course you can always resize or crop an image in your favorite image editor and upload it.

In order to create homepage please follow screenshots.

Step 1
Step 2

Step 3 Change page title and click Proceed to Customizer button.

Homepage is created but we have to do two more thinks.

  1. To select main navigation for this page.
  2. To tell wordpress that this is our homepage
Step 4 - Select main navigation
Step 5 - Mark this page as homepage

Do not forget to save changes. Homepage is set. In order to edit any page section just click on particular widget on left side and widget options will show.

Besides pages created with Layers Page Bilder, this theme includes a few more templates that can by applied to pages.

  • Default Template - Regular page without sidebars
  • Handyman Blog - Theme Blog Template
  • Left Sidebar - Page with left sidebar
  • Right Sidebar - Page with right sidebar
  • Left & Right Sidebars - Page with both sidebars
  • Blank Template - Page without sidebars, contact form & map

Info! Sidebars on blogposts, archive pages are controled from Customizer option panel.

All templates except Blank Template include Google Map and Contact form. They are placed above footer sectiojn of the page.

Theme options and page layouts are managed here. Customizer allows for an editing environment where theme options can be tried by the administrator before being applied to the live site.

Theme's options page can be reached by clicking on the following links:.

Also customizer could be reached from front pages if administrator is logged in.

  1. Link to the customizer general options.
  2. Link to the customizer page layout settings. Only pages created with customizer has this link.

Options are devided in to 7 main groups:

Interface

  1. Close Customizer
  2. Save changes
  3. Options

Option groups

  • Edit Layout - Page Layout editor
  • Site settings - General settings that affects entire website.
  • Header settings - Options related to the header section.
  • Contact Form & Map section for inner pages
  • Footer settings - Options related to the footer section.
  • Extras settings - Additional settings that does not belong to any previos section
  • Static Front Page - Set homepage and blog page
  • CSS - Custom Css

Since the customizer is pretty straightforward we'll not cover all options here. Here are some of them.


Recommendation Logo image should not be higher than 110px. Ideal logo dimenstion is 110x110px.

Important! Here you can change website's color scheme by selecting new one from select box.

Important! Enable or disable sidebars on inner pages.

Info Mandatory data in order to setup map section on inner pages.

Info Options for header management on Blog pages (Single Blog, Category, Tag, Blog ) and Search/404 page.

Short info about widget list in customizer. You'll notice that some widgets has small blue logo. Those widgets are used to build Layers Pages. In our case it is landing page. Also some widgets are prefixed with TL. Those widgets are customly made widgets. See picture below.


  1. Standard WP widgets
  2. Widgets with blue Layers Logo should be used for creating page layout
  3. Customly made widgets by ThemeLaboratory Team

Handyman theme includes several customly tailored widgets for homepage layout. This is a list.

  • TL Content - Like Layers Content widget with additional options.
  • TL Services - List all available services
  • TL Portfolio - Shows
  • TL Blog Tips - Shows latest posts from the blog
  • TL Pricetable - Creates Pricing tables
  • TL Promotional - Creates Promotional banners
  • TL Team - Shows Team Members

Simple widget for creating page headers.

Regular header

Mobile version

Widget administration panel

Widget options

  1. Title
  2. Breadcrumbs Show/Hide
  3. Breadcrumbs Show/Hide root item (Home)
  4. Main navigation Show/Hide
  5. Standard background options

This widget has all options as original Layers Content widget with few additional options.

  1. Section title and excert
  2. Column Title Color and Icon
  3. Column margins & padding + option to force no outer padding for a column
  4. List of pages. Page can be associated with a column. If page selected from this list, a value in Button Link field is overwritten.

Controls on the right side (layout, list style, Text,...) applies to entire section( widget ).

This widgets displays all portfolio posts created in your panel. To see how to create portfolio post follow this link.

Display a list of all available services. Check this link to see how to create a service post.

  1. Service Icon & Color
  2. Link to the service post. This is not mandatory option. Link can be set by entering custom URL to the BUTTON LINK text field

Important! Value in Button Field is ignored if service selected from select box.

This widget display a list of latest blog post and one featured/primary post.

Tip! Define video url for primary post and instead featured image video will appear. Video url is managed in post/page edit page.

  1. Select a primary post from this list
  2. Link to the blog page. In order to select blog page it should be created first. This option is not mandatory.

Use this widget to create and display pricing table.

  1. Controls text colors
  2. Controls background colors
  3. Add shadow & emphasize an item.

Use this widget to create simple promotional banners.

  1. Main Promotional Slogan
  2. Short Excerpt under the slogan
  3. Link to an existing page
  4. Button Label
  5. Custom button link. This value is IGNORED if page selected from Dropdown box.
  6. Set icon and icon alignment
  7. Widget Layout settings
  8. Text options. Text Colors, text size and alignment
  9. Button settings. Colors & Text
  10. Widget Background settings
  11. Advanced Widget Options. Paddings, Margins

Multipurpose widget for displaying list of custom post type including standard posts/pages.

Options overview


  1. Standard section title and excerpt
  2. Link for the section's bottom button
  3. Type of posts to display
  4. Set post's item layout
  5. Number of items to load
  6. Sort by
  7. Set post ids delimited by "," to load particular posts.
  8. Layout, text, button, background, column settings

Post Grid Settings

Post grid settings allows you to create post's layout by dragging & dropping available items. Every container has it's own options (colors,...).


Created layout is applied to following List Styles

  • Grid
  • Masonry

Info! If Overlay selected please drag items to BODY container.

Use this widget to create and display a list of team members.

  1. Widget header section content
  2. Button's link to the existing page. If page is not selected the button is not shown.
  3. Column settings.
  4. Column Background settings
  5. Team's member image cropping settings
  6. Column Text settings and colors
  7. Column width settings
  8. Column Icon settings
  9. Team Member Post
  10. Custom column title (By deafult it is Member's name)
  11. Short description
  12. Widget display settings
  13. Widget header text settings
  14. Widget background settings

Let's see what additional options do we have when creating posts/pages.

Make sure that all Meta boxes are enabled by thicking checkboxes at the Screen Options panel.


  1. Page Options Metabox - These options applies only to pages that are not created with Customizer.
  2. Standard WP Page Template Metabox - Select different template for different page layouts.
  3. Video metabox - Enter youtube URL here. Video specified in this metabox will overwrite featured image.

The theme includes 4 custom post types. Testimonials, Services, Portfolio and Team. All custom post types are used by Layers Widgets.

The theme is delivered with plugin called Shortcodes Ultimate( Great plugin!) and with Handyman Addons for this plugin. In order to use Handyman shortcodes you have to install both plugins.

Inserting shortcodes is very simple. Just click on shortcode button.

Popup window will show.


  1. Easy way to search for a shortcode
  2. Handyman shortcodes

Select a shortcode from the list. New shortcode popup window will show up. Change shortcode parameters and click Preview Button to see the end result.

At the end press insert shortcode button to insert it into the post or page.


Customizer & Shortcodes

Shortcodes generated by Shortcode Ultimate plugin can be inserted in any Layers Widget. Layers Widgets do not have shortcode button like Rich Text editor. In order to insert a shortcode to a widget you have to generate shortcode in Shortcode Ultimate Plugin, insert it temporarly to a page/post and then to copy/paste shortcode code to a widget.

This theme comes with 6 built-in sidebars. Pages created with Customizer have 4 sidebars in footer. Inner pages have 2 sidebars (Left/Right sidebar).

Adding widgets to sidebars can be managed in two different ways. From standard wordpress widget management setion.(see picture)

Or it could be managed from the Customizer which is preffed way in order to see changes in LIVE PREVIEW. In order to use widgetized section on pages created with customizer these section should be activated first. See picture below.

The theme includes 3 custom widgets + standard wordpress widgets.

TL Recent Posts - List of blogpost with images.

TL Recent Tweets - Displays your most recent tweets.

TL Tag List - List of tags displayed as buttons.

In order to localize the theme you need to

  • Install any po editor(we recommend POEDIT) to translate the theme from English language to your language.
  • New file (your translation) should be copied to the folder called "THEME_FOLDER/languages".
  • Let's say that you are translating website to italian language. There is special naming convention for these file (translations), Language_Country.po (in our case it is it_IT.po)
  • Save the file and that's it. Your website is translated.

  • One more thing to do. Do not forget to set your language in the WP administration panel.

Handyman theme comes with several plugins. Two plugins are mandatory and they had language files too. These files should be translated too.

  • TL Layers Handyman Plugin
  • Addon for Shortcodes Ultimate

Language files in plugins are placed in "/lang" folder. By default plugins have english language file. Naming convention for language files in plugins differ from language files in the theme.

Plugins language file naming convention is "PLUGIN-SLUG-Language_Country.po". In order to translate a plugin please open an existing PLUGIN-SLUG-en_US.po file in any PO Editor and save file as "PLUGIN-SLUG-it_IT.po" if you are translating on Italian language. Add translations to "PLUGIN-SLUG-it_IT.po" and save the changes.

Q: Unable to install theme. Parent theme is missing.

A: Handyman theme is Layers child theme. Before installing Handyman theme, you have to copy Layers Theme in wordpress's theme folder.

Q: How to update the theme?

A: All you have to do is to overwrite old files with new one.
After theme update it is always a good practice to check does any of theme’s plugins required update too. Go to the plugins page and if any of plugins require an update you will see info message about it.

IMPORTANT!

Plugin update proccess removes plugin's files including plugin's translations and copies new files. Make sure to backup your translation files if any so you can copy translations back after the update.

Q: Unable to install theme. Wordpress reports that style.css is missing? What should I do to fix this?

A: Please make sure that you uploaded right file. When you download Handyman WP Theme, unzip archive and find file called "handynab-wp-theme-vX.X.zip". In order to install Handyman Theme you need to upload that file.

Q: Unable to upload theme (.zip file). Wordpress responded with "Are you sure you want to do this? Please try again."

A: PHP is not able to upload theme file because it's too big. Handyman theme zip file has about 5MB. Make sure that your instalation of PHP can handle uploads of that size. Also there is always manual solution. Uncompress theme file and copy its content to the wordpress themes folder.

Q: What are the best dimentions for a logo image?

A: 110x110px. Just make sure that your logo image is not higher than 110px.

Q: How do I change button label in a Popup Window?

A: Button label can be changed from a customizer. Customizer > Extras > Popup Window Settings

Following images, icons or other files used in developing this theme.