Toggle navigation

Directo - Directory Listing WordPress Theme

Version 1.0.0

Installing WordPress

WordPress is well-known for its ease of installation. Under most circumstances installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Bluehost, mediatemple) to automatically install WordPress for you. However, if you wish to install WordPress yourself, click below button to read about Famous 5 Minute Installation.
5 Minute Installation Guide

Alternatively, you may be interested in the below topics:

Disclaimer
Please note that we do not give support or any questions related to how to install and maintain WordPress. For any faulty installation that may cause your website or our theme malfunction, you should refer to the WordPress support forum. Alternatively, you can get help from your web hosting.

Theme Installation

The Directo can be installed in three different ways:
  1. Installing through WordPress
  2. Uploading through FTP (File transfer protocol)
  3. Uploading through C-panel

Installation through WordPress:

Installing a theme through WordPress is quite a simple process. Follow steps below for installation.

  1. Unzip Directo theme package (downloaded from themeforest.net)
  2. Go to wp-admin -> Appearance -> themes -> Click Add New Button at top left corner
  3. click upload theme button at top left corner then click browse button
  4. locate and select directo.php from downloaded package.
  5. after installation locate and click activate button.
  6. follow next screen to install directo templates plugin
  7. after installation of directo templates plugin, Please go to Directo Dashboard -> Theme setup -> register your purchase code.

Please be informed that you should not upload the whole package you have downloaded from ThemeForest as you will get an error of missing directo stylesheet file. Instead, locate the directo.zip file inside the main file you have downloaded.

 

 

Warning!
While installing your theme through the WordPress admin, you may encounter an error message saying “are sure you want to do this?”. This is mainly due to your hosting PHP settings. The directo theme zip file is roughly around 5mb and in some hosting the default value for max_upload_limit left default which is 2mb. To solve this problem you should either increase your maximum upload size (to 20mb) on your hosting admin panel or ask your host to do it for you if you do not have the privilege to alter your server PHP settings. This is a very common request and they should be able to help you out. Once the limit is increased you can re-try the install and you’ll be all good to go.

Installation Through FTP
  1. Download the Theme archive and extract the main theme zip file it contains (directo.zip).
  2. You may need to preserve the directory structure in the archive when extracting these files. Some software like “WinRAR” create a sub directory with the same directory name they have unzipped. uploading the theme to your server via FTP with this structure is WRONG and you will face some errors.
  3. Use an FTP client (for example FileZilla) to access your host web server
  4. Transfer your unzipped theme to your server in the WP-content/themes
  5. Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your uploaded theme.
Installation through C-panel

You have to login your c-panel then go to file manager > domain directory > usually would be (public_html) > wp-content > themes > upload directo.zip here > unzip directo.zip

Theme Registration Demo Import

  1. Go to Directo Dahboard
  2. Click theme setup Tab
  3. click start theme setup button and follow demo import instructions

 

How to updating theme and plugins to the latest version

Make sure you have a complete backup before updating the theme and plugins.

  • Theme update through WordPress
  • Theme update through FTP
  • Theme update via C-panel

Make sure you have to take a complete back up of your old theme version like a back up of any customization work.

1. Update Through WordPress Admin Panel

  1. Login into your Theme Forest account and go to downloads (Dashboard > downloads)
  2. Download the theme into your computer
  3. Unzip the file you just downloaded from Theme Forest and locate the WordPress Theme. (eg. Directo.zip)
  4. Log into your WordPress Dashboard.
  5. Click on Appearance > Themes.
  6. Activate any default word press theme then deactivate and delete your old Directo theme version

After that, click on the upload theme button then “choose file” button and locate your theme zip file (Directo.zip) then hit install now. After The Directo has been installed locate and click activate.

Please be informed that you should not upload the whole package you have downloaded from Themeforest as you will get an error of missing Directo stylesheet file. Instead, locate the Directo.zip file inside the main file you have downloaded.

Update Required and recommended Plugins

After updating the theme when you’ll activate theme it will automatically redirect you to the updates plugins. If it won’t you can check for updates in WP > Appearance > install plugins our provided required and recommended plugins will be listed here if not install, active or needs to be updated.

After updating the theme. Go to Appearance > install plugins > check if any updates are listed for the required or recommended plugin. Hit update.

2. Manual Update Using FTP

  1. Login into your Themeforest account and go to downloads (Dashboad > downloads)
  2. Download the theme into your computer
  3. Install an FTP program (Filezilla is free)
  4. Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP
  5. Unzip the item main file
  6. Locate theme.zip (eg : Directo.zip) and unzip it. make sure your unzipping software does not create an extra directory with the same name nested into each other.
  7. drag and drop theme main folder into your FTP program with the destination: “YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/”
  8. FTP program will give a warning that there is an existing with the same directory name, choose to replace all.
  9. It will take varying from 15 to 30 minutes to replace all files. Once you did login into your wordpress dashboard and go to themes select Directo check if the version is changed.

3. Update through C-panel

You have to login your c-panel then go to file manager > domain directory > usually would be (public_html) > wp-content > themes > upload Directo.zip here > replace with your old one > unzip Directo.zip

 

All “Theme Settings” are available in this Article like Header, Footer, Blog, Woo Commerce etc.. So we would like to describe all steps one by one, 1st of all we will describe you all the options include in “Theme Settings” for your better consideration. For Details of these Options please read complete Article carefully.

When you will login into your site please go to wp-admin > Directo Dashboard > Theme Settings

General settings

Please just go to wp-admin -> Directo Dashboard -> Theme Settings –

All setting options are well self explanatory you can check option description and modify setting according to your requirements.

 

This Theme uses WordPress built-in menus feature which can be found in your WordPress dashboard > appearance > menus. In this section we will go by explaining every detail regarding usage of below tools as well as some other cool features we added such as making a mega menu and using 400+ icons for your Menu items. We pointed sections with numbers and while explaining we may ask your attention to the screenshot for clear understanding.

From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option to bring up the Menu Editor and start implementing below steps.

Creating your menu
  1. Click on “Create a New Menu” to add new menu.
  2. You should define a name to your menu (eg: main menu)
  3. Click the Create Menu button.
  4. Your new custom menu has now been defined and you are ready to drag and drop menu items.

Warning!
by installing demo template or adding too many menu items you main got some warning or some of the menus may removed automatically due to max_input_vars limits exceeded which is set by your server default to 1000, in that case, login to your c panel and find your PHP.ini file and edit or put this line in PHP.ini max_input_vars 5000, if you have not control over php.ini then contact with your host to do this for you.

Adding Items to a Menu
  1. The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts, are hidden by default. If you haven’t spotted it yet, its on WordPress back-end Directo header right-side. if you click on “Screen Options” it will slide down. so you can easily check items to hide or show.
  2. Refer to No 3. These panes will allow you to drop any sort of item to your menu. You can build from custom links to post, pages or categories.
  3. The general technique of these panes is pretty simple, select the item and click on the “Add to Menu” button. after a moment you will see the item appeared on your menu visual editing canvas.
  4. Please remember you should always save your changes by clicking on “Save Menu” which can be found on the header and footer right section.
Deleting a Menu Item
  1. Locate the menu item that you want to remove in the menu editor window
  2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click on the Remove link. The menu item/box will be immediately removed.
  4. Click the Save Menu button to save your changes.
Customizing Menu Items
  1. Locate the menu item that you want to customize in the menu editor window
  2. Click on the arrow icon in the top right-hand and expand.
  3. The Navigation Label: This field specifies the title of the item on your custom menu. This is what your site visitors will see when they visit your site/blog.
  4. The Title Attribute This field specifies the Alternative (‘Alt’) text for the menu item.
  5. Refer to No 4 : Directo gives you this ability to add the icon to each menu item. to add just click on “Add Icon”, a Popup Lightbox will appear. choose your icon and click on “Use Icon”. To remove the icon simply click on the “Remove Icon” button.
Creating Mega Menus (refer to No 4)

If you have decided to make any of your Main Navigation items a Mega Menu like the same you can see in demo site for gallery and blog Pages items, you should follow the below steps :

  1. Add an item to the menu editor.
  2. Click on the arrow icon in the top right-hand and expand.
  3. Check the “Make this Item Mega Menu?” checkbox to convert this item to a mega menu
  4. You can add up to 6 child to this parent item.
  5. Each of these direct child will define a column in the mega menu and they will appear as a heading in each column. if you don’t want a heading title, then replace the text with a dash (-) in the “Navigation Label” field. don’t leave this field blank as word-press will completely remove them from the menu editor.
  6. Any grand child you add for each of the direct child will play row roles.
  7. Once you are done, save settings.
  8. Remember you can always convert mega menus back to a traditional multi-level menu by just visiting the parent item’s options and remove the check from “Make this Item Mega Menu?” field.
Creating Multi-level Menus (refer to No 5)

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.

  1. Position the mouse over the ‘child’ menu item.
  2. Whilst holding the left mouse button, drag it to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button in the Menu Editor to save your changes.
Adding Your Menu to Your Site (Refer to No 6)

If you have created your navigation, in order to display them in front-end you should assign your menus to specified locations accordingly. If you have made this navigation as your main navigation in header then you just need to check the Primary Navigation option. If you have made a menu for a secondary header (refer to shortcodes => secondary navigation) then you just need to choose one of the other locations.

In Directo setting up your homepage is pretty simple thing. all you need to do below steps :

  1. Add New Page
  2. Build your homepage content same like building other pages.
  3. Save the page.
  4. From Word-press Left Hand sidebar navigate to Settings > Reading.
  5. You will see a page like below.
  6. Change your Front page displays to “A static page (select below)” (refer to No 1)
  7. From “Front page:” select box choose the page you just created (refer to No 2)
  8. Save Settings and you should see that page in your homepage.

Please note that you should not use Posts Page option at any time and it has nothing to do with blog page. Directo has its own way of building blog loops(read blog section of this documentation).

WordPress Widgets add content to your Sidebars and Footer. Examples are the default widgets that come with WordPress; for example post categories, tag clouds, navigation, search, etc. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.

Guide to use widgets feature :
  1. Go to Appearance > Widgets.
  2. Choose a Widget and drag it to the sidebar where you wish it to appear. The widget areas designated as No 1
  3. Once you dropped the widget to widget areas, WordPress automatically updates the Theme and it will appear in its area.
  4. Preview the site. and look for the specified area you dropped your sidebar. for example, if you used the “archive widget area” you should look for it in the archive loop.
  5. Return to the Widgets Panel to continue adding Widgets.Directo has 16 custom widgets as designated below with No 2. as you can see all have “TK” perfixes.
  6. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
  7. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.
  8. To save the Widget’s customization, click Save.
  9. To remove the Widget, click Remove or Delete.
Custom Sidebars

In some cases, you need a specific widget area for a specific blog post or page. The good news is we have such a feature that gives you the ability to create unlimited widget areas besides your predefined widget areas (eg. single widget area). To start follow the below steps :

  1. Go to Theme settings > General Settings > Custom sidebars
  2. Write down your sidebar alias as you will remember for what page you are going to create it, such as FAQ, contact us.
  3. If you want more just click “Add More” and input new alias names.
  4. Save settings
  5. Now go to Appearance > Widgets.
  6. You will see the list of custom sidebar areas you just created in the right section (they should be appended to predefined widget areas).
  7. Same as predefined widget areas you can drag and drop widgets into custom sidebars.
  8. Now its time to assign the custom sidebar to a post (blog or portfolio) or page. add new page > in right section > Directo Page Layout > Choose a sidebar
  9. Choose your custom sidebar from the select box.
  10. Done! if your page is left or right sidebar layout then you should see your custom sidebar widgets on your page.

Please follow below steps to create blog posts

  1. Screen Options From here you can disable/enable meta boxes. for instance, if you can not find excerpt meta box make sure it’s checked from screen options.
  2. Post title Fill out the field with your blog post title.
  3. Page Composer switch button Using this button you can switch between page composer module and Directo editor.
  4. Category Metabox You should first need to create blog post categories from WordPress Directo left sidebar => Posts => Categories. Then you can assign that category to this post.
  5. Tags Metabox Useful for SEO as well as search features within the site to have post tags.
  6. Format Metabox WordPress built-in format feature allows you to give different post formats.
  7. Directo Posts Options If you choose a video, audio and gallery format you should also consider Directo Posts Options as shown below to fill up the necessary options.
  8. Excerpt The brief content of this post to be shown in the blog loop. if left blank content will be pulled from post content.
  9. Featured Image The featured image for this post to be shown in the loop and single post heading. please note that this image will not be shown in the gallery, link and quote post format.
  10. Directo Page Layout Defines post layout to have sidebar as well as having a custom sidebar (refer to widgets section of this docs for more info)
  11. Publish Save as draft, preview before saving, schedule to be published in a defined date and of course, publish immediately. All these actions can be done in this section.

How to make a Blog page?
  1. Add New page
  2. Click on Page Composer Button to switch to visual mode.
  3. Click the Elements button, search for a blog and click.
  4. You will see a set of options before you proceed to save (you can modify these settings at any time later).
  5. You can find options to change blog loop style and many more optionalities, review and save
  6. Publish the page and view the page.

Sample Shortcode:

[pacz_blog style="classic" column="3" image_height="350" count="10" offset="0" pagination="true" disable_meta="true" grid_avatar="true" read_more="false" classic_excerpt="excerpt" pagination_style="1" order="DESC" orderby="date"]

Using this custom post type you can create column and scroller based employees module. To create employee posts navigate to WordPress dashboard => Left Sidebar => Employees => Add New Member and follow below steps :

  1. Title Consider employee name as a post title.
  2. Directo Employee options In this section you will need to consider fill up employee details
  3. Featured Image In this section you should upload employee portrait image.
  4. Publish save a post and repeat these actions for other employees and then proceed to the next section.
Adding Employees into a page
  1. Add new page
  2. Click on the page composer button to switch visual editing more.
  3. Click on elements button and search for employees and click
  4. You will be shown a list of options, review and save
  5. publish and view the page.

Sample Shortcode:

[pacz_employees style="column" column="3" dimension="250" scroll="true" count="10" offset="0" description="true" order="DESC" orderby="date"]

Please follow below steps to create client posts.

  1. Title Title will not be viewed in front-end but you should fill them up as they will help you identify which post is which.
  2. Company Name Company name will be viewed on hover. don’t fill this form and nothing will be shown.
  3. Website URL If you want to link the logo to the client’s website fill up this field. please include http://
  4. Featured Image Upload client’s logo
  5. Publish Publish and proceed to the next step

Adding Clients loop into a page

  1. Add new page
  2. Click on the page composer button to switch visual editing more.
  3. Click on elements button and search for clients and click
  4. You will be shown a list of options, review and save
  5. publish and view the page.

Sample Shortcode:

[pacz_clients count="10" scroll="true" order="DESC" orderby="date" bg_color="#ffffff" border_color="#efefef" dimension="180" cover="true" target="_self"]

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme. In the past, there was no easy way of updating WordPress themes without losing all the custom styling and changes that you had made. This becomes chaos when all the sudden you find out a widely used script in popular themes has a major exploit, and you need to update your themes ASAP. It becomes a tough choice because on one hand, you would lose all the custom styles if you update. On the other hand, you risk your site getting hacked if you don’t update fast enough. So updating wordress theme is a must and you should never ever directly hack or modify theme files. But wait, what about the modifications?

The core team and the community decided to solve this problem by introducing the concept of parent theme and child theme. A child theme in WordPress would inherit all the functionality, features, and the code of the parent theme without making any changes to the parent theme itself. This allowed users to change the styling of the parent theme and add/modify features without losing the ability to update the parent theme.

It is important to know that even though you can always create a child theme of any WordPress theme, sometimes you may not need a child theme. Think about the number of changes you have planned for your child theme, if the changes you are planning are minor, then you can use custom css option located in theme settings or custom.css file in theme root(you should backup this file and replace after each update). If the changes are too extreme where you find yourself overriding the core parent theme files, then you probably should be creating a custom theme.

Good new is that Directo is fully child theme compatible and you can override almost everything you can imagine. starting from shortcodes to widgets, hooks and filter, blog, portfolio. We have coded theme with this concept that users may need to use it as roubut framework for their ideal website.

Advantage of using a child theme
  • Safe Updates A child theme automatically inherits the parent theme’s features, styles, and templates. This allows you to make changes to your site using child themes without ever modifying the parent theme. When a new version of the parent theme arrives, you can safely update it as all your modifications are saved in the child theme. So updates will not override or delete your modifications located in child theme.
  • Easy to Extend A child theme built on a powerful theme framework allows a great deal of flexibility without writing a lot of code. You can selectively modify only the template files and functions that you need without going through other template files. You can add new functionality and much more. In some cases users ask for a feature which we can not include as a feature in theme directly due to some reasons. but occasionally we provide child themes with the extended features that some users need.
  • Fallback Safe When you are creating a complete theme you need to think about all the possible scenarios and code for them. However, when you are working on a child theme and you forget to code for something, then there is always the parent theme’s functionality available as the fallback option.
Okay, Lets start. what should I do to create a child theme?

In order to create a basic child theme you should follow below steps :

  1. Create a folder inside wp-content and rename it as you width (avoid using space instead use dash or underscore)
  2. Inside this folder create a file and rename it style.css
  3. Add below lines: /*
    Theme Name: Directo Child Theme
    Theme URI: http://designinvento.com/themes/Directo/
    Description: This is a child theme build by "your name"
    Author: designinvento
    Author URI: http://themeforest.net/user/designinvento/portfolio
    Template: Directo
    Version: 1.0
    */
    @import url(“../directo/stylesheet/css/theme-styles.css”);/* =Theme customization starts here
    ——————————————————- */The most important parts of this file are the “Template:” and @import sections, which identifies the parent theme imports the CSS from the original. You must ensure that the path to your parent theme’s css file is correct, and that the “Template: parameter correctly identifies the name of your parent theme. If you are using a different theme, then adjust the values accordingly. Everything must be case sensitive! The folder of our parent theme is “directo” (all lower case), and the @import URL reflects this.
  4. If you want to override theme WP hooks then you should create a php file as functions.php
  5. Now if you go to appearance => themes you should see the child theme. go ahead and activate and visit site. both in Directo and front end of the website you should not see any difference comparing when the parent theme is active.
  6. Go ahead and start overriding your CSS tweaks inside style.css

Please note that we have already created a sample child theme inside item main folder you download from themeforest.We will update this section with massive wiki on overriding theme’s special places (shortcodes, widgets,..). If you have any equations please open a thread in our support forum and we will try our best to assist you.