Getting Started with

Lobo Portfolio WordPress Theme

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 or query about some detail explained here or any other just open a support ticket, we will try to help as better as possible. Support Area →

  1. First Steps
  2. Adding Content
  3. Features & Tips

1. First Steps

The first point that we must talk about is 'how to install' any WordPress Theme.


Package contents

  • 01 - Theme
    • lobo.zipFile to upload within WordPress Admin Area → Customize → Themes.
    • LoboYou can directly upload this folder to your site via FTP
    • lobo-child.zipYou should use it when making modifications in your site. Read more here.
  • 02 - PSDContains the Photoshop PSD files
  • 03 - DocumentationContains the main theme documentation reference link (it´s me!)
  • 04 - XML Dummy ContentContains dummy data.

1.1 Installing the theme

Please watch this video for a complete video guide on the installation & setup process

  • Runing the installer

    Installing the theme using the WordPress Theme Installer is really easy.

  • Log into your WordPress Dashboard → Appearance → Themes
  • Here notice the tab at the top side → Install Themes

    You must click on "Upload".

  • Now you must choose the zip file you will find within the whole package that you downloaded from Themforest.

    01 - Theme folder → "lobo.zip" file.

  • The last step is clicking "Activate" once the file is correctly uploaded.


1.1.2. Installing Plugins & Setting up the demo content

After activating the theme, maybe you want to have some content like the one you can see in the main theme demo in order to help you to understand better how some options work or simply because you would like to have some guides to start from. Then you can import the dummy contents, these are contents based in the demo where images will be replaced by blurred placeholders but you will preserve all the layouts and pages. Also, you want to install all the theme plugins dependencies.


  • Installing Plugins

    When you first will install the theme just follow the notice you will find in the top part where you will be guided to install all the required plugins.

  • Find the XML file with the dummy content

    Within the package you downloaded you will see '04 - XML Dummy Content' folder. Within you will find 'lobo-import.xml' file.

  • Upload the XML file to your site

    Within your WordPress installation, you go to Tools > Import. There you will see 'WordPress > Install Now'. This will install the WordPress Importer plugin. Once this is done, you must upload the XML file using the plugin interface. This step will import the entire demo content with blurred images. Please note that there is a lot of content to be imported, so be patient and do not reload the page.

  • All done! You can view your website and start editing.
Watch this video in order to see how to import the dummy contents




1.1.3. Plugins breakdown

Here's a breakdown of all the plugins that the demo installer installs, so that you know which does what.


Required plugins

  • Core
    Lobo Portfolio

    This is the plugin which activates the portfolio custom post type. It doesn’t require any setup, just installation and activation, for the theme to have portfolios.

  • Core
    Lobo Shortcodes

    This is the plugin which will offer you some shortcodes to use in the theme.

  • Content
    oAuth Twitter Feed for Developerss

    This isn’t a critical plugin, but it is needed if you want to use the Twitter widget anywhere in your website. More about how to work with it later on.



1.2. Theme Customizer

Take a look at all the customizer options in this video

In the WordPress dashboard, there is a submenu under 'Appearance' with the tag 'Customize'. If you click on it you will be taken to the WordPress customizer, a WordPress core tool which will allow you to modify the look and feel of your entire website with some few clicks.

Logo

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 also need to 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).

Header

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.

Navigation

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.

Menu Actions

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.

Footer

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.

Preloader

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.

Blog

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).

Portfolio

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.

Shop

In this area you can configure the shop design and how many items do you want to have per page (only available for WooCommerce).

404

As above, you can choose a default 404 page, and the header of that page will be used instead of a blank header.

Colors

There is only main color to be chosen, the rest of the pallete being generate by the theme based on this color.

Additional CSS

The place where you want to add any custom CSS. If you have lots to add, you could also use the child theme's stylesheet for this purpose (recommended).

Typography

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:

  • Font #1: Lato
  • Font #2: Open Sans
  • Font #3: Lekton
  • Font #4: Crimson Text


1.3 Theme Options

The theme provides you 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.


Analytics & Meta

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.

Custom CSS

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.

Admin

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.







1.4 Staying up to date

It is crucially important that you always stay up to date with all of your themes, plugins & WordPress installation. For this purpose, Envato created a plugin called Envato Market, which you can install in your theme.


The plugin is pretty straightforward to use. Once you install & activate it, you will get a new menu item with the same name. Inside it, you have instructions on how to connect your marketplace account (which is a breeze - just click the big button and if you're logged into your Envato account, everything is done automatically). Once you are connected you get access to all of your past and future marketplace purchases.

As soon as we release a theme update you will be notified in your WordPress dashboard.


2. Contents

Adding your content is really simple and easy with our page builder and all the options that the theme has to offer. Just make sure that you take your time to carefully explore all the settings that can be changed and learn how to create some amazing layouts in order to impress your users.



2.1 Setting up the Home Page

To set up your homepage, you first need to create a basic page, or any page template (about page templates later). Once you have decided which page you want to use, go to Settings > Reading and in the 'Front page' choose 'A static 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 step, you should make sure that your permalinks look pretty. For this, please go to Settings > Permalinks, choose the Custom Structure, and use this: /%category%/%postname%/


2.2 Module Builder

Lobo provides a unique module builder to handle the content in modular pages and portfolio projects. There are 8 different modules that can be added into pages and customized the way you want.

Please watch this video to learn how to create a page from scratch using the theme's Page Builder

Inserting a module is as simple as hitting the "Insert Module" button and configuring the clearly detailed fields. When a module is inserted, it can be edited, cloned, deleted, moved or you can play with its size.

Due to the way that Lobo works, because its 'modularized' approach, we needed a simpler tool for you to add the different modules. This is the main reason because we developed this simple and easy tool for you to add your contents in the easiest way possible.

If you have properly installed all the required plugins when you first installed the theme, when you will open an existing page and you will try to create a new one, you will see this:



As you can see in the screenshot, enabling the module builder is really easy. Just open a new page or portfolio page, choose the 'Modular Page' template and save your page. This process will enable the module builder and you will be ready to start adding new blocks with their related contents.



In this screenshot you can see how you can create the different modules available. As shown, the process is really straightforward. You just need to choose the kind of module you want to add (text, image, slider, video...) and choose the size that you can also change with the UI handlers without opening the module.

Of course, you can drag and drop your modules in order to better organize your contents witin the page.



When you have finished your page layout, maybe you plan to reuse this same layout in the future, for this, the builder provides an option for you to save module templates that you can use later.





List of Modules

Quick explanatory list about each module:

Text

A simple text module, which allows the input of HTML content and even shortcodes, using the default TinyMCE editor. But until that, it offers options to set a custom background color, or image (fill or pattern), general text color, alignment and wrap.

Image

Inserts an image. The caption is optional.

Slider

Inserts a slider. When creating the gallery you can choose captions for each of the used images.

Gallery

Inserts a gallery. It looks like a basic image module in the front-end, but when you click it, a full blown gallery will appear. All options can be changed here, but the skin is a global value set in the Theme Customizer > Styles section.

Video

Inserts a video either from YouTube / Vimeo or a self hosted one. The poster is optional, but should be used for a better styling.

Audio

Inserts an audio file with a poster as background.

Map

This is an instance of Google Maps with all the required fields.

Latest projects / posts

This is a complex module, which inserts an instance of the latest posts or projects into the page. These will look exactly like in their dedicated pages, but you can set the number and categories here. The module will always be 4-4 (you cannot change it's size).

Separator

A simple module which should be used for dividing sections. It has some options and it's a 4-1 module with fixed size.

Call to action

This one has the same background & color options like the text module, but features a different type of content - title, subtitle and a link.

Portfolio navigation

This module is only available in portfolio projects and it actually inserts a 2-1 module which will contain links to previous and next projects. The project navigation is done in this form for you to be able to insert it wherever you wish.


Modules Size

This subject was discussed a bit in the previous section. 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:

  • 25%-25% → will turn into 480x480
  • 50%-25% → will turn 960x480
  • 25%-75% → will turn 480x1440
  • and so on...

Of course, these sizes are taken at a maximum screen width of 1920px. If the screen is smaller, everything will resize accordingly, keeping its aspect ratio. So on a 1200px screen, the 50%-25% module will actually 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 its 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.


Text Modules and Wrapping Options

The text module is pretty intuitive, just like the other modules, but the wrapping options are just a little bit more complex, so we'll tackle it more in detail here. There are four types of wrapping:

Regular Wrap

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.

Auto Height

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.

Don't Wrap

This removes all the wrapping and it is special for shortcodes like: content/team/twitter slider & the contact form.

Custom Wrap

Nothing different than the regular wrap, but it offers more horizontal space.


2.3 Page Options

Lobo provides three content types: regular pages (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 and how the page options work.


2.3.1 Hero Header

As you saw in the theme preview, each page, post or portfolio project can have a cool hero (entry/welcome content), or not. This unique hero area 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 to work with is this process.

2.3.1.1 Hero Elements

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 hero area based on a certain screen 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.

2.3.1.2 Text hero helpers

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 different. These are:

  • < p class="text-hero-title">text goes here< /p>
  • < p class="text-hero-subtitle">text goes here< /p>

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.



2.3.1.3 Hero Title

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).




2.3.2 Options Summary


Custom titles

In this area you can write the title and subtitle that will appear when you have enabled a hero element.



Hero Header

The hero header is an eye catching way for you to take your visitors attention. This feauture is really easy to use and properly self explained within the option.



You have different options for your hero element:

  • None: No hero element is present in this page
  • Image: You place a single image as hero element
  • Slider: You set an slider as hero element
  • Video: Just place your video URL and the theme will handle it
  • Text: You have the text field below, at the end of the options

Logo Detection

We are jumping to this option since the other ones are self explained within the page options in your backend.

This feature is really interesting an useful. By default, most of the themes just allow you to set a single logo graphic. This will be hard to handle when you have a hero image with a light scheme and your logo is white, your logo will get lost over this image. In order to deal with these scenarios, Lobo provides a dynamic solution that will review the image to display no matter if it is a single image or within an slider, and will display a darker logo or a lighter one depending in the luminance scheme in the background image.

For this feature to work as explained, you will need to set it as 'Auto', if you want to 'force' this particular page to show the dark or light version of your logo, just select the logo you want to use. By default 'Auto' is set and this is how the theme will handle your logo graphic.




3. Creating Pages

The process of adding pages is really straightforward:

  • Go to Pages → Add New
  • Enter a title.
  • Setup the page style (optional - info previously explained).
  • Setup the hero header (optional - info previously explained).
  • Insert all of your remaining content in the content area. You should use the module manager for this purpose.
  • Select a page template or leave the default one. If you're using the modular page template, please select the template, "Publish" or "Update" the page and only after that you will be able to see the module manager and start adding your contents.
  • Write a few words excerpt (it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your post).
  • Hit "Publish" and you're all done.

3.1 Page Templates

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.



  • Default Template — This is the default template and it outputs exactly the content of the page.
  • Blog — This page outputs all the posts that you have in your blog. It uses a grid format. Don't forget to select the blog page in the Theme Customizer after you create it. This page's hero header will be used for all archives and search pages.
  • Modular Page — This page template enables the awesome modular builder, which is the core of the theme. Portfolio projects are also modular by default. Please refer to the related area in the documentation to learn how to use the module builder.
  • Portfolio — This page outputs all the portfolio projects that you have on your site. In the "Portfolio Settings" area you can choose a layout, a number of columns (only for the masonry layout) and also select from a list of categories to appear in this certain page. Using the categories selector, you can add only certain categories to certain pages and create unlimited portfolio pages. This is cool.


3.2 Shortcodes

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.



Shortcodes by hand

Of course, you can always write the shortcodes by hand. Below you have some examples:


Accordion
[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).




Button
[lobo_button url="#" bgcolor="#fff" color="#000" target="_self" label="Button Text"]

A simple button with options to complete styling in terms of colors.

  • label → the button's text
  • url → any valid URL, don't forget the protocol (http(s)://)
  • target → either _self (same window) or _blank (new window)
  • bgcolor → an hexadecimal color value used as background color
  • color → an hexadecimal color value used as text color

Contact Form
[lobo_form label_name="Name" label_email="Email" label_subject="Subject" label_message="Message" label_send="Send" email="youremail@domain.com" success="Success Message\nNew Line" required="Fields are required"]

A simple contact form with unique details.


  • label_name → the form's name field label
  • label_email → the form's email field label
  • label_subject → the form's subject field label; if new lines are present (\n), the subject will take the form of a select box.
  • label_message → the form's message field label
  • label_send → the form's send button label
  • email → your email address
  • success → the success message; new lines can be used (\n)
  • required → the required message



Content Slider
[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:

  • title → slide title, will appear above the content
  • icon → a simple icon name from the Font Awesome package (optional)
  • inner content → between the inner slide shortcode tags you can insert your HTML content

Icon
[lobo_icon size="fa-2x" icon="fa-star-o" color="#000" break="float"]

A simple icon to insert anywhere along the way.

  • icon → the icon's name, as it can be found here
  • size → the icon-s size, as it can be found here
  • color → an hexadecimal value
  • break → if can either be float or break, and refers to the way the icon aligns with the content; a floating icon will go along the paragraphs, while a breaking icon will take a new row.

Team Slider
[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:

  • title → the team member's name
  • subtitle → the team member's position
  • image → absolute path to the image that you wish to use
  • inner content → between the inner slide shortcode tags you can insert the social icons shortcode (see below)



Social Icons
[lobo_social twitter="#" facebook="#" vimeo="#"]

This is just a list of social icons with links to your social profiles. Each new attribute represents a url, and these are the possible values: twitter, facebook, gplus, pinterest, youtube, vimeo, linkedin, tumblr, evernote, reddit..


Twitter Slider
[lobo_twitter user="username" no="5"]

A simple twitter slider which uses a certain amount of your latest tweets.

  • user → your twitter username
  • no → the number of tweets you want in the slider

Widget Area
[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.


3.3 Video Usage

Lobo Portfolio WordPress 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.


Youtube

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.

Please note that YouTube requires an API key for videos to be played properly within custom players, such as the one in our theme. For this purpose, you have to create an API key on your google account and paste it inside Theme Options > YouTube API panel.


Vimeo

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. Self hosted

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.


3.4 Text Styles

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 visual style or using only HTML.

Also, you will 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:

  • Cite → which adds a smaller text block
  • Left Note → which creates an absolutely positioned note in the left side of the other text block (works best in blog posts)
  • Big Text → which adds some really large text block
  • Special Link → which creates a custom link style

Please note that after you add a certain style, in order to remove it you'll have to go to the HTML editor or completely remove the text you've added.

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.




4. Creating a Portfolio Project

The process of adding projects is quite similar to adding posts or pages:

  • Go to Portfolio → Add New
  • Enter a title
  • Select a portfolio category.
  • Choose a featured image. If you don't add any, it could break the grid.
  • Setup the hero header for the current post (optional, of course).
  • Insert all of your remaining content in the content area. You can use the module manager for this purpose.
  • Write a few words excerpt (it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your post).
  • Click "Publish" and you're all done.

About featured images

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:

  • uploaded img size: 480x480 → will remain the same
  • uploaded img size: 960x480 → will remain the same
  • uploaded img size: 550x500 → will become 480x480
  • uploaded img size: 800x480 → will become 480x480
  • uploaded img size: 1300x1000 → will become 960x960
  • uploaded img size: 1600x560 → will become 1440x480
  • and so on...

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's module builder!

Custom Lightbox: New feature since Lobo v2.1.0

Now you are able to create thumbs within your grid that will open in a lightbox window instead of opening a new page with the whole project information. This is just another way to display your projects.



4.1. About Projects

Some interesting details about how to work with your projects.


Sorting your projects within the portfolio grid

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.



Number of projects to display and Infinite Scroll

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.


Custom links in the portfolio grid

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.




5. Creating Posts

These are the default steps that you need to do in order to add a blog post:

  • Go to Posts → Add New
  • Enter a title.
  • Select a post category.
  • Add some relevant tags.
  • Choose a featured image.
  • Insert all of your remaining content in the content area.
  • Write a few words excerpt (it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your post).
  • Click "Publish" and you're all done.


About featured images

The theme does its 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.

  • One column → as large as possible (over 1200px)
  • Two columns → around 900px
  • Three columns → around 600px
  • Four columns → around 400px
  • Five columns → around 250px

6. Installing WooCommerce

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.


Useful links:

Hero Headers

As you might have noticed in the preview, the theme allows you to use custom hero headers on all WooCommerce pages. 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:

  • WooCommerce Product Categories
  • WooCommerce Layered Nav
  • WooCommerce Price Filter
  • WooCommerce Product Tags

Do not select the "display type" to dropdown for any of the added widgets - use only lists!



6. Features & Tips

This short chapter covers some tips & tricks that you can do in order to make the site look and run better.


6.1. Child Theme

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), which you can use directly if you want to replace PHP functions from the theme or have lots of css code that you want to paste in.

You can read more about child themes here.


6.2. Make your site faster


6.2.1. Get a good hosting

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:

  • SiteGround → This is a very good hosting company, which we are currently using to host our theme demos on. If you bought this theme you probably liked the speed as well, so we highly recommend SiteGround to host your themes on (especially the Cloud VPS option).
  • Media Temple → if you want a premium WordPress hosting which is easy to manage and works pretty well, this is a good choice to host your website on.
  • WPEngine → definitely not as cheap as the two examples above, but if you really want an incredibly fast website and absolutely no headaches in managing it, WPEngine is the way to go. With it you don’t have to worry about security, caching, updates, etc. Everything is handled by a great theme of professionals ready to help you with everything. You just need to care about your content.
Responsive
Customizable
Full of features

6.2.2. Optimize images

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). An app you'll love and will help you to save lots of bandwidth in your site is ImageOptim, with app for Mac and web service to compress all your image files.


6.2.3. Use a caching plugin

We can’t recommend enough the necessity to good caching. If you use a managed hosting such as WPEngine you don’t need this, or maybe SiteGround, where they include their own cache plugin for WordPress. But if you are using MediaTemple or any other hosting you need to cache your content. For this purpose, we 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.


Cache tips:

  • Enable page caching
  • Enable database caching (it might be a bit unstable but you need to check it out at least)
  • Don't enable object caching (the theme doesn't use that, so it's useless)
  • Don't minify anything! CSS / HTML minification usually breaks themes, and the JS files are already compiled into a single minified one.

6.3 SEO Advices

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.

We suggest using Yoast for SEO, which will help for sure to optimize your site in terms of search indexability.


6.4 Translating the theme

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.

6.4.1. Simple translate

The theme offers a .pot file which contains all the used strings (backend & frontend included). You can use this file in order to create your own translation or even change english words/literals you would like to read different. For example, you may want to change the literal 'Next' by 'Next Project', for this propose you could even use this methodology. However, the most easy way is to use a third party plugin. We recommend Loco Translate. It's an amazing piece of software, which allows you to do translations with ease.


6.4.2. Multilanguage

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!