- 1. First Steps ▾
Live Preview: View Demo
Support: Ask a Question
Knowledge Base: Read FAQ's
This file will help you to start working with your new Wordpress Theme. First steps installing, guides to create your own pages, portfolio views or any other feature included.
In case you could have any doubt about some detail explained here or any other just create a support ticket, we will try to help as better as possible. Support Forum →
Please, before asking for help, make sure you are using the last theme´s version.
The first point we must to talk is about how to install any Wordpress Theme. Some time ago we created a screencast based in other of our themes, Folio Two. Here you will see closer how to install the zip included within your Themeforest package -this is the .zip inside the whole package you download from Themeforest-.
Basically there are two methods to install any WordPress theme. The first one is using the Wordpress Theme installer and the second is installing it using FTP. Let´s see the first one.
If you find some error installing the theme like "Missing style.css" or something similar, please, make sure you are uploading the correct zip file. It is important to have into account that the file you must to install is the zip inside the whole package you download from Themeforest "lobo-theme.zip".
In case you can´t solve some install related issue, just open a support ticket and we will help you with this issue.
Before posting new tickets, please check out the theme's knowledgebase.
In order to take more advantage the theme ask for installing some plugins, we recommend to install all of them. So you can create every element and parts of the theme.
In this sense, once you will activate the theme you will notice a yellow square in the top part where the plugin assistant ask you for installing the included plugins.
Another plugin which will not popup here is WooCommerce. This plugin is only useful if you want to have a shop on your website, otherwise you can skip it. So if you do need it, please download it from here: http://www.woothemes.com/woocommerce/
Note that this is a third party plugin so no support will be given for it. The same goes for any other plugins that you may install with this theme (except the Lobo plugins).
After activating the theme, you will notice that a new submenu item appeared, under Appearance and it is called Customize. If you click on it you will be taken to the WordPress customizer, a tool which will allow you to modify the look and feel of your website.
Because this theme uses a really unique header you will need two different logo versions. One when the background is dark and one when the background is light. In this panel you can upload your logos, which can be of any size. You need to also upload a double sized set of logos for retina displays and a favicon. Make sure that you also complete the logo’s size correctly (in px).
This section controls the header of your website. You can choose to enable the fancy parallax effect or not and also control the sticky header. There are also two options to set the global hero sliders to loop or fade.
In this section you can change the theme's main menu and also choose the type which you'll be using. The big when will appear on the right side and also requires a background and some text, while the small menu will appear at the top, just like a traditional menu.
These refer to the buttons that appear at the top of the sticky header (or at the bottom when the header is not sticky) when the user is scrolling down. There are various buttons which enable certain functionalities and you can either enable or disable them. There is also a place to put a background for the sharing window.
The footer has two areas, one for social icons, one for text. To learn how to create your social widget, please refer to the shortcodes section of this manual.
You can upload a general preloader here, which will show up on every page when it loads (it needs to be 190 x 190 px). Blog posts and portfolio items will have unique preloaders, based on their featured image.
In this area you can choose the layout of the blog (it will also be used by the archives and search pages), and also set a default blog page (really important). Use this to select which is your default page. (the hero header of that page will be used for all blog listings).
Here, you need to choose your default portfolio page. This step is really important if you want the "Back to Portfolio" button to work properly within the theme.
In this area you can configure the shop design and how many items do you want to have per page (only available for WooCommerce).
As above, you can choose a default 404 page, and the header of that page will be used instead of a blank header.
This refers to certain styles available in various places around the theme. It currently has a single option to set the skin for the gallery module (the skin is global).
There is only main color to be chosen, the rest of the pallete being generate by the theme based on this color.
The last section of the customizer holds four fields for custom fonts (they can be all different or all the same). These are all Google Fonts. Please note that because Google changes it’s fonts on a regular basis, not all of the fonts you see on Google may be included here.
The theme's default configuration is this:
Whenever you make a change you’ll see the actual website refresh with the changes you do. Make sure that when you’re done, you hit the Save & Publish button. After this, you can close the customizer.— Take a brief look at how the customizer works
Other than these options which apply to the styling of the theme, you have another set of options, which don’t affect the style, but the functionality, and you should do a quick look there. You can find a new menu item under Appearance > Theme Options.
Inside this section you should paste your Google Analytics code. If you do use these, please don’t forget to enable them first, otherwise not all page clicks will be triggered, even if you have your code placed.
If you have any css rules that you may want to add to the website, this is the place to add them. However, if you want to do extensive modifications, i suggest that you go with a child theme, because it’s better. But more on this later. If you don’t have more than 100-200 lines of code you can paste them here.
This theme allows support for custom widget areas. If you want to use these, this is the place to create unlimited widget areas that you'll then be able to populate from Appearance > Widgets.
Here you have a field for the replacement of the administrator login logo. Just make sure that you will respect the size written there and you can replace the theme’s login logo with your own brand or the client’s.
This is the place where you can configure auto updates by inserting your marketplace username and API key. Note that this might not work on all installations though (it’s an experimental feature).
Always be up to date
Make sure that you are always UP TO DATE!! If the automatic updates don’t work you should either check the theme version once a month or so on it’s ThemeForest´s page or follow me on twitter to learn about updates.
To set up your homepage, you first have to create a basic page, or any page template (about page templates later). After you decide what page do you want to use, go to Settings > Reading and in the Front page displays choose A static page, then select your just created page.
After this, you should change the Blog pages show at most value from 10 to 6 posts. This theme works best with this setup. Hit “Save Changes” and you’re done.
Also, please don’t select anything for your Posts page, otherwise your blog will not work!
Next, you should setup your permalinks to look pretty. Please go to Settings > Permalinks, choose the Custom Structure, and use this: /%category%/%postname%/
READ THIS about permalinks on Windows Servers!
The final step before you can start working with the new theme is to create your menu. This theme uses WordPress 3.0 Custom Menus, so it will be really easy.
Go to Appearance > Menus and you will see a panel where you can create new menus. Create one, add your created pages to it (from the left side panels) and save it. After this, in the left side you have a drop down box where you can select the Primary Navigation. Choose your newly created menu, hit “Save” and you’re all set.
Note that you can use up to two levels of navigation in this theme.
There is an xml import file in the download (lobo-import.xml), which can be used to achieve a near example of the online demo. Please note that the images which you see online will not be available when you do the import, since they’re copyrighted.
This is a great starting point for your website, as you’ll be able to delete everything at any time and only keep what you need, that start from there!
Please note that this import is not perfect and it might fail sometimes, but it’s a good solution if you can’t or don’t know where to get started.
Also, please wait around 5-15min for the importer to be finished!
If some media files fail to import / upload, don’t worry about it. It’s nothing and it happens from time to time. The included images are blurred anyway so you don’t have any use of them. The import is just to get you started.
To use it, go to Tools > Import > WordPress and upload the xml file, choose to import everything, hit the button and wait.
Note that if you want to import the shop products as well, you need to have WooCommerce installed and activated before doing the import.
For any import errors check out this ticket.— Take a brief look at how the importer works
This theme has three types of content available: regular pages (which can be of different types), blog posts and a custom portfolio post type.
Before speaking about the actual process of adding content, we will talk about the theme's beautiful header and custom titles.
As you saw in the theme preview, each page, post or portfolio project can have a cool header, or not. This cool header can be configured in each page, under the "Hero Header" options. All the possibilities are clearly described and explained there, so we will not discuss them in this document, though you could take a look at the video below to understand how simple it is to work with it.
If you're using a Video hero, please refer to section 2.5 in the documentation to understand a few things about video behavior in the theme.
You'll see that the theme also offers some complex height options for hero elements, so you could have a fixed header with a certain px amount or a variable header based on a certain percentage. Or you can remain with the automatic values.
Another cool thing is the logo detection feature. Sometimes you'll see that the logo doesn't change at all (in video/text heroes), or it doesn't change properly. In such cases you should define a default logo option here and the theme will do it's job.
As you might have already noticed, the text hero offers the option to write pure HTML. You can use your knowledge to define the contents, or we have also prepared some default styles.
For starters, H2 & H3 elements look the same, giving you really bold text.
Second, there are some classes which you can add to paragraphs and they'll look in a way or another. These are:
Also, don't forget about line breaks: <br>.
A lot of more information can be found online, but please note that we cannot help you achieve your own design, as you need to know what you're doing here.
On top of the header (or when you scroll if there is no hero header in the page) you will see a title, which by default will be the title of your page. If you're using however a longer title in your page, you should write a shorter title to be used in the header. A subtitle is also available to be added (posts & portfolio projects have the category as the subtitle).
If you're using a slider as the hero header, you'll notice that each slide has it's own title and subtitle. These will be used instead of the general one set here.— Check out the available options
These are the default steps that you need to do in order to add a blog post:
The theme does it's own resizing process, however you need to be aware that the thumbnails need to be as large (width/height) as the number of columns you use.
The process of adding pages is quite similar to adding posts:
As you might already noticed, there are a few Page Templates available for you to use. Each template will configure your page to look and act in a different way.
The process of adding projects is quite similar to adding posts:
Lobo uses the concept of modules / columns (also explained in the module builder) for it's content. The base module is 480px and each module (or portfolio featured image in this case) can be anything from 480px (1 square/module) from 1920px (4 squares/modules), both in width and height.
The theme will do all the thumbnail resizing, but please read this in order to understand how will your thumbnails be resized!
In the principles of squares written above, the theme will always search for the highest occurence of a 480 multiplier. For example:
There is only a thing left to be said. The images will also be divided by the number of columns you use in the portfolio page. Let's say you want to use a layout with two columns and upload images that are 1920x480. Because you are using two columns, the image will actually be 960x240.
It may be confusing first, but once you grasp how everything works, you'll see how great and easy to use is Lobo!
Some interesting details about how to work with your projects.
You can sort your projects within the portfolio grid in two different ways, basically. The first one is using the post date feature that the theme includes. Here you would need to modify the date in order to sort your projects. Here the latest projects will be displayed the firsts in your portfolio grid.
In order to achieve this, just click on "Quick Edit" option when hovering any portfolio item. Here you will see some new interesting options. Just modify the publishing date in order to re-arrange your items.
The other way to sort your projects should be using some plugin like Re-Order. This plugin will allow you to sort your projects just dragging and dropping elements.
You can set up your portfolio to enable/disable 'infinite scroll' features in a very easy way. Just open a created 'Portfolio page' (some page using the portfolio template) or create a new one, and here scrolls under 'Categories'. Here you will see two interesting options. The first one is related to 'infinite scroll' features, and it allows you to enable or disable this option. We recommend to enable it in case you have a huge amount of pieces or simply you like it the option :)
The other one, 'Projects per page', will allow you to set the number of works/projects that will be displayed in a portfolio page at a time. For example, if you set it up to 7 projects, the portfolio only will display 7 pieces. Just in case you have enabled the 'infinite scroll', this feature will load new 7 projects more and so.
One other cool feature about the portfolio grid is that it can also hold pure links, instead of projects. To achieve this, simply write a URL in the proper field when creating your project. When you'll go into the portfolio grid and click that project, the url you set will be opened instead of the actual project. Note that users will not be able to navigate to this project and it will also be excluded from search engines indexing.
Whether you are in a regular page, blog post or text module, you can add and format your text with the TinyMCE content editor. This is an awesome tool which allows you to create your content the way you want in a visula style or using only HTML.
Other than the default options which are present, you will also see some custom options, such as format, size & family.
The formats list contains some easy predefined styles which can be used in various areas. There you have:
The font sizes list contains a simple list of certain values.
The font family selector contains the four fonts which you set in the Theme Customizer. These are now available to be used anywhere in the theme you may wish. Please note that if you use this option, the fonts will be embedded in the content of the post, so if you change one of the fonts from the Theme Customizer, these will not change. They will remain as you put them, so you'll have to redefine.
This theme allows the use of videos in several places and in several ways. One is the hero area and the other is the video modules. These work pretty well, but there are some things which need to be taken into consideration when using them.
These work well both in the hero header and video modules. They resize properly with just a bit of extra scaling (and cropping of the actual video size), but it's only a little so it should not create any problems.
There is a bug related to YouTube videos though - you can only use one such video per page. For example, you cannot have more than two video modules with YouTube as source, or a YouTube video hero and a YouTube video module. You can either have a hero that uses YouTube or a module that uses YouTube at the same time.
Since Vimeo doesn't offer a really great API to work with, there are some know bugs which at the moment cannot be fixed (for undefined time).
When you're using a Vimeo video in the hero header, you'll notice that the options don't quite work (these cannot be controlled really good so if something doesn't work, it simply doesn't).
Also, resizing is pretty bad, because the actual resizing is done relatively to the entire screen so large portions of the video might go missing, even if you're using a fixed size header. This is how it works and it cannot be fixed at all.
Last thing, Vimeo hero headers don't play at all on mobile devices.
When you're using a Vimeo video in a module, the resizing of the video will not be perfect, so you will get black bars (on top/bottom or left/right) depending on the module's size. Play with different sizes, find what's best for you, and then simply go with it. Also, at the moment there is an unknown bug on iPads only, which causes the pages with Vimeo videos in them not to load on the device.Here's a bug regarding both Vimeo & YouTube videos - on mobile devices the poster image will not work. Embedded videos with poster images will have no posters on any mobile devices, to ensure maximum compatibility.
These are really stable and work well in terms of resizing, compatibility, etc.. The theme supports *.mp4 files which should display on all kinds of devices using a mixture of HTML5 and Flash functions. However, there is a know bug regarding the usage of *.mp4 files in Firefox under OSX if you do not have Flash installed - they will not work in this case.
This theme uses a unique module builder to handle it's content in modular pages and portfolio projects. There are 8 different modules that can be added into the pages and customized how you want.
Note that in pages, the builder does not appear until you save and publish the page you're working on as modular page template!
Inserting a module is a simple as hitting the "Insert Module" button and configuring the clearly detailed fields. After a module is inserted, it can be edited, cloned, deleted, moved or played with its size.— See the module builder in action
This subject was discussed a bit in the previous section. Well, it's the same. Each module can be either 25%-50%-75%-100% in both width and height. The base for each square is 480px, so with this in mind, here are a few examples on how will your modules look like:
Of course, these sizes are taken at a maximum screen width of 1920px. If the screen is smaller, everything will resize accordingly, keep it's aspect ratio. So on a 1200px screen, the 50%-25% module will actuall be 600x240.
All the inner images or videos will also be resized to fit the containing area. Note that text modules don't have a sidebar or something like this, so make sure that you increase the size of a module if the text requires it.
There's an exception about module size when using the image module! You will see a certain "Auto" value - if you use this value, the image will have an auto size, proportionally to it's set height. It will be more than 100%, so if you won't use a full width with this setting and have modules near the "Auto" module, you might experience broken layouts. But this is normal and you should make sure that your layout works well.
The text module is pretty intuitive, just like the other modules, but the wrapping is a bit complex, so i'll tackle it more in depth here. There are four types of wrapping
This is the original wrap of most that you see in the online preview. It creates large paddings in left/right areas and it is resized according to the module size. Should be used in most cases and it works with the vertical alignment option.
Please note that the height is proportionally resized to the width, so it might look bad on smaller screens if you have lots of text. If this is the case, it's simply how the module works - you can either increase it's size, reduce text or use a different wrapping.
This removes all the wrapping and it is special for shortcodes like: content/team/twitter slider & the contact form.
Nothing different than the regular wrap, but it offers more horizontal space.
This one will kill the default resizing of this text module and it will be switched to an automatic height, based on your text size. It is useful for modules with lots of text, but be careful, because it might break the resizing of your layout. Use at your own risk - works best with 100% width modules, otherwise the layout might act crazy.
These are the only available wrapping methods and if you want to achieve anything else than what's already available, you will need to do these changes yourself, because we do not offer assistance for custom work.
Along with the module builder, the theme also uses some shortcodes in order to be complete. These can be added anywhere in default pages or inside text modules.
As with the modules, inserting a shortcode is as simple as hitting the "Insert Shortcode" button and configuring the clearly detailed fields.— See a few of the shortcodes
Of course, shortcodes can be inserted manually in case you prefer to write code. Below you'll see a list of all shortcodes and their properties.
[lobo_accordion opened="0"] [lobo_accordion_section title="Title 1"] Section Content [/lobo_accordion_section] [lobo_accordion_section title="Title 2"] Section Content [/lobo_accordion_section] [/lobo_accordion]This shortcode adds an accordion into the module. It has one parameter opened, which refers to the section which will be opened (indexing starts from 0, while -1 means that all sections will be closed).
[lobo_button url="#" bgcolor="#fff" color="#000" target="_self" label="Button Text"]A simple button with options for complete styling in terms of colors.
[lobo_form label_name="Name" label_email="Email" label_subject="Subject" label_message="Message" label_send="Send" email="firstname.lastname@example.org" success="Success Message\nNew Line" required="Fields are required"]A simple contact form with unique details.
This form is protected against spam and it also uses the wp_mail() function, so if your hosting provider doesn’t support the php mail() function, you can use a plugin like: WP SMTP
[lobo_cslider style="tabs"] [lobo_cslider_slide title="Slide #1" icon="fa-icon"] Slide Inner Content #1 [/lobo_cslider_slide] [lobo_cslider_slide title="Slide #2" icon="fa-icon"] Slide Inner Content #2 [/lobo_cslider_slide] [/lobo_cslider]This is a simple content slider in which you can insert anything. The style can either be slider or tabs.Each slide has these params:
[lobo_icon size="fa-2x" icon="fa-star-o" color="#000" break="float"]A simple icon to insert anywhere along the way.
[lobo_tslider type="one"] [lobo_tslider_slide title="Member #1" subtitle="Position #1" image="http://yourwebsite.com/image1.jpg"] [lobo_social twitter="#"] [/lobo_tslider_slide] [lobo_tslider_slide title="Member #2" subtitle="Position #2" image="http://yourwebsite.com/image2.jpg"] [lobo_social facebook="#"] [/lobo_tslider_slide] [/lobo_tslider]This is similar to the content slider, but it is adjusted specifically for teams (or product displays or anything which you may think that fits the context). There are two types of slider, one and two. The inner slides have these params:
[lobo_social twitter="#" facebook="#" vimeo="#"]This is simply a list of social icons with links to your social profiles. Each new attribute represents an url, and these are the possible values: twitter, facebook, gplus, pinterest, youtube, vimeo, linkedin, tumblr, evernote, reddit..
[lobo_twitter user="username" no="5"]A simple twitter slider which uses a certain amount of your latest tweets.
[lobo_widget id="custom_id_here"]This shortcode adds a custom widget area in the module. You can use it to add some of the default WordPress widgets or custom widgets created by plugins. The only option is the id of the sidebar, which you set when you create the sidebar in the Theme Options.
This chapters describes the process of using WooCommerce (a bit). The full WooCommerce documentation can be found at this link, so the purpose of this short doc is to highlight some theme features.
After installing the plugin you'll have to create the shop pages and set them up (really important step). If the pages are not created automatically by the plugin, you should manually create pages for shop, cart, checkout & account, tie them up in the settings and use the proper shortcodes in them.
Also, make sure that you go through the settings and setup those settings based on your own needs. One theme requirement would be to disable the lightbox in order to make sure that it doesn't break the theme (lobo already offers a custom lightbox which replaces the WooCommerce default one).Useful links:
As you might have noticed in the preview, the theme allows you to use custom hero headers on all WooCommerce page. This is why it's also important to setup all the pages properly, because these pages will be also used for the hero settings.
So when you (or the plugin) create the cart page for example, you can also set a custom hero just like in any other page and that one will be used for all cart related page. The same goes on for the other pages, such as checkout, account & shop (the shop hero settings will be used in all shop archive (tags, categories, filters, etc.) pages.
A custom search area is created by the theme, but it should be setup by you. If you go to Appearance > Widgets you'll see a certain "Shop filter sidebar" widget area. This widget area will be used for the theme's search, which by default includes the basic "order by" function and a product search field.
Widgets compatible with this area:
If you wish to translate certain areas of the site (even if you're still using English but want to change certain words), you should translate via the .po/.mo files! Refer to section 6.4 for more details regarding translation.
Please note that some strings are in the theme's translation files (all of the strings are there, so there's no one missing), and some are in the plugin's file. So if you cannot find a certain string in the theme files you should also translate the plugin.
Keep in mind that this is a third party plugin implemented in a highly unique way, so not every possible third party plugin may work. Look in the online demo to understand what's possible and what's not, because you cannot edit it except of what it's already offered.
This short chapter covers some tips & tricks that you can do in order to make the site look and run better.
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child theme allows you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.
This theme already comes with a child theme (lobo-child-theme), in which you have some comments about the replaceable functions and also a second portfolio post type definition (which you can duplicate as many times as you wish).
You can read more about child themes here.
You may not think that this is important, but if you want your site to display really fast you need to get a good hosting. This is the first step in having a fast site, which also translates into more views, which also translates into a better SEO, which finally translates into more sales.
There are three hosting companies which i recommend:
Always optimize/compress your jpeg images before uploading them to the server. Large images should be compressed at around 90% image quality and you should also try to limit the use of lossless image files (uncompressed pngs).
I can’t recommend enough the necessity go good caching. If you use a managed hosting such as WPEngine you don’t need this. But if you are using ASO or MT or any other hosting you need to cache your content. For this purpose, i recommend W3 Total Cache! It’s a great and easy to use plugin, and with only a bit of work you can double your site’s speed.
The theme is built in a way to be SEO friendly, by emphasizing titles with heading tags, having the content before anything else, stripping out useless content, fast loading, setting titles in the header for better crawling, etc.. All these help.. But you have to remember that Content is King! So you shouldn’t blame the theme because your website doesn’t appear in search engines. You should always focus on providing good content and in this way, your website will definitely look great in search engines.
Also, you should always install a popular SEO plugin which will make the most of keywords and descriptions..
I suggest using Yoast for SEO.
This theme is localized, which means it can easily be translated in your own language. There are various methods to do a simple translate or create a website in multiple languages, so just use the one which works best for you.
If you’re not familiar with translating themes manually, there’s a cool plugin which does the hard part for you. Just install it and you’ll be able to edit the language directly from the WordPress dashboard, without touching a single external file: Codestyling Localization. If you also don't know how to enable a certain language for your theme (because the translate languages don't work if your theme isn't configured in that language), use this plugin: WordPress Language.
If you want a more "hacking" way, here it is:
Let’s take a practical example. If you are using WordPress in spanish, your .po file should be called es_ES.po and the WordPress language should be defined like ('WPLANG', 'es_ES').
If you're looking for having your website in two or more languages, there is a powerful plugin which you can use. Because of the module builder, you need a plugin which handles meta fields. This plugin is WPML!
And a special big THANK YOU for those great artists and creatives that provide us with some of their amazing pieces to illustrate Lobo Portfolio Wordpress Theme.