Welcome

Thanks for buying the Porta Blog Wordpress theme!
In this documentation you can find instructions for how to install and setup the theme. If you have any questions that are not answered in this documentation, feel free to mail your question to support@lucversleijen.nl.

1. Installation

If you don't have wordpress installed on your server, please  visit http://codex.wordpress.org/Installing_WordPress and follow these instructions.

1.1. Upload the theme.

There are two options to install the theme in your wordpress installation.

1.1.1. FTP Upload

You can add a new theme by uploading it directly to your server, follow these basic steps:

  • Find the Porta_v1_0.zip file and unzip it in a directory.
  • Using an FTP client to access your host web server, upload the "Porta" folder in the wp-content/themes directory.

1.1.2. Manual upload

You can upload your theme directly in the Wordpress CMS, follow these basic steps:

  • Log in to the WordPress Administration Panels.
  • Select the Appearance panel, then Themes.
  • Select Add New.
  • Click on the upload link in the top links row to upload a zipped copy of a Theme that you have previously downloaded to your machine.
When you have uploaded the theme, go to "Appearance > Themes" and activate the "Porta" theme.

1.2. Plugins

After you have installed the theme, you will see a notification that asks you to install and activate a couple of plugins that are required for the theme. If you don't already have these plugins installed, press "Begin installing plugins".

1.2.1 Post Order setup

Once you have installed and activated all the plugins you will get a message asking you to setup the post order plugin.

Click on "Settings Page" and save the following settings:

Congratulations, you have just installed the Porta theme!

2. Setup

2.1. Demo content (Optional)

You can start with a fresh install, but if you need some content to test the theme, we have provided a demo file that creates a couple of posts and pages to get you started with the theme.

To install the demo content go to Tools > Import and choose “Wordpress”,
(if you don't have the importer installed, it will automatically install the Importer plugin.)

Next,¬† upload the file “demo.xml” that you can find in the demo folder and wordpress will insert the demo posts and page in your wordpress site.

2.2. Posts

The sections of the theme are build up as posts, if you want to add a new section, simply create a new post.

The default post format is "standard", this is used for the content sections

The "aside" post format is used for posts with a background image. The "aside" post format uses the image in the "Featured Image" as the background, so make you sure have attached a featured image.

The minimum size for the image should be at least 2000x1000 pixels.

2.2.1 Menu

You can add a post to the menu by enabling the checkbox "add to menu"

2.3. Posts Order

Once you have added all your posts, you will notice that wordpress orders the posts based on their date of creation.

To change this go to "Posts > Re-order"

In this page you can change the order of the posts by dragging and dropping them in the right place.

Once you have changed the order of the posts, dont forget to press update, to save your changes!

2.4. Number of posts

Because this theme is an one page website, we dont want wordpress to add any pagination.

To change the number of posts displayed go to "Settings > Reading" and change the setting "Blog pages show at most"

The number should be higher then the amount of posts(sections) that you have on your site.

2.5. Permalink structure

Click Settings > Permalinks. Under ‘Common Settings' and select ‘Post Name'

3. Custom Post Types

To help you manage your content a little bit easier, Porta adds a few new post types to your dashboard.

You can use these post types to manage the home slideshow, portfolio services, testimonials and news items.

3.1. Home Slideshow

To add a new slide to the Home slideshow go to "Home Slideshow > Add New"

In this slide you can add pretty much any content to the slideshow. Once you have added a slide it will be automatically added to the slider on the homepage.

The slideshow uses the "Featured Image" as a background image.

The minimum size for the image should be at least 2000x1000 pixels.

3.2. Testimonials

To add a new testimonial go to "Testimonials > Add New"

The content will be displayed as a quote, and you can also add the author of the quote in the "Author" box.

To display the testimonials in your post you need to add the the following shortcode in your post:

[Testimonials]

3.3. Latest News

To add a new news item go to "News > Add New"

These posts work like normal blog posts. have a read more button that lead to the full news article.

To display the latest news items in your post you need to add the the following shortcode in your post:

[latest_news count="3"]

By changing the number in the attribute "count" you can change the amount of news items that are being displayed.

3.4. Services

To add a new service/feature go to "Services > Add New"

For each service you can enter the title, a descriptiond and a icon.

The icons make use of the Font Awesome library, in this field you need to enter the name of the icon.

You can check out all the icons that you can use on this page: http://fontawesome.io/icons/

To display the services in your post you need to add the the following shortcode in your post:

[services]

3.5. Portfolio

To add a portfolio item go to "Portfolio > Add New"

For each portfolio item you can enter the title, a descriptiond and the featured image (that is used as the thumbnail).

To display the services in your post you need to add the the following shortcode in your post:

[portfolio]

3.6. Portfolio Detail Layout

You can use pretty much any content or shortcode for the portfolio content, but to make it a little bit easier there is also a shortcode that will place the description of the portfolio item on the left, and the images on the right

[portfolio_description]
Your content....
[/portfolio_description]

[portfolio_content]
Your Images...
[/portfolio_content]

4. Theme Customization

The theme uses the wordpress customize interface to help change the basic look of your theme. To access the customize screen go to "Appearance > Customize".

Wordpress will now show your site with a sidebar on the left with all the customization options. As soon as you change an option here you will get a live preview of your site on the right side.

If you want to keep these changes be sure to click "Save & Publish" before you close the customizer.

4.1. Logo

In this tab you can upload your own logo.

The retina logo is used to make your logo look sharp and clean on tablets and devices that have retina displays

In the retina logo option you should upload a logo that is exactly twice as big as your original logo.

4.2. Site Title & Tagline

In this tab you can change your site title and tagline.

4.3. Menu Style

In this tab you can change the visibility of your menu.

4.4. Site Type

By default the site is a one page website, if you want to change it to a blog then change this setting.

3.4.1. Blog Setup

If your site is a blog you need to create a new menu by going to "Appearance > Menu" and clicking on "Create Menu"

Once you have created the menu set the "Theme Location" on "Primary Menu"

This menu will now be used for your navigation!

4.5. Footer Content

In this tab you can add content to the colored footer bar.

You can place pretty much any content here. In this example we have added social links to the footer bar.

4.6. Theme Colors

In this tab you can change the colors of the theme

The theme uses a blue/orange color scheme by default. You can change the colors by using the color picker.

If you ever want to go back to the original color scheme, simply click default

(This option doesn't have a live preview, in order to see the changes you need to click "Save & Publish" and refresh the site manually.)

5. Shortcodes & Styles

Porta comes with a few usefull shortcodes and editor styles that allow you to enhance your content.

5.1. Styles

You can use the styles by making a selection of the text and clicking on one of the buttons or the styles.

5.2. Shortcodes

You can use the shortcodes by adding the tags to your posts.

5.2.1 F.A.Q Toggle

Add to following code to add a F.A.Q toggle to your posts:

[faq question=" FAQ QUESTION "] FAQ ANSWER [/faq]

5.2.2 Icon & Icon Links

Add to following code to add an icon your posts

[fa-icon icon="download" size="100" color="#000"]

Add to following code to add an icon link to your posts

[icon_link icon="apple" url=" WEBSITE-URL " size="50"]

The icons make use of the Font Awesome library, in the "icon" field you need to enter the name of the icon.

You can check out all the icons that you can use on this page: http://fontawesome.io/icons/

5.2.3 Colored Section

Add to following code to add a colored section to your posts:

[colored_section bg="#ff7f66" text_color="#fff"] YOUR CONTENT [/colored_section]

5.2.4 Latest Tweets

Add to following code to add the latest tweets to your post:

[latest_tweets type="name" name="mojomarketplace" count="3"]

You can change the type to "query" or "name".

With the type "query", the shortcode will display the latest tweets that match the string in the "name" field.

With the type "name", the shortcode will display the latest tweets from the account that is filled in the "name" field.

5.2.5 Stats List

Add to following code to add a stats list to your posts:

[stats]
[stat name="Coffee Served" icon="coffee" count="2345"]
[stat name="Games Played" icon="gamepad" count="1257"]
[/stats]

The icons make use of the Font Awesome library, in the "icon" field you need to enter the name of the icon.

You can check out all the icons that you can use on this page: http://fontawesome.io/icons/

5.2.6 Team List

Add to following code to add a team list to your posts:

[team]
[team_member]
<img src=" IMAGE-URL " />
<span class="name">Luc Versleijen</span><
<span class="function">CEO</span>
[icon_link icon="envelope" url="http://www.lucversleijen.nl/lvthemes"]
[icon_link icon="twitter" url="http://www.lucversleijen.nl/lvthemes"]
[icon_link icon="facebook" url="http://www.lucversleijen.nl/lvthemes"]
[/team_member]
[team_member]
 Team member 2 content....
[/team_member]
[/team]

5.2.7 Price Table

Add to following code to add a price table to your posts:

[price_table]
[price_table_item title="Free" price="Free" highlight="no"]
[price_table_feature title="Free Setup"]
[price_table_feature title="20GB Storage"]
[price_table_feature title="5 Projects"]
[price_table_feature title="10 Donuts"]
[btn url="#"]Download[/btn]
[/price_table_item]
[price_table_item title="Free" price="Free" highlight="no"]
 Price table 2 content....
[/price_table_item]
[/price_table]

5.2.8 Button

Add to following code to add a button your posts:

[btn url="#"] BUTTON-NAME [/btn]

5.2.9 Divider

Add to following code to add a divider your posts:

[divider]

6. Credits

The following plugins/frameworks have been used in this theme:

  1. Underscores starter theme - http://underscores.me/
  2. Post Types Order - http://wordpress.org/plugins/post-types-order/
  3. Regenerate Thumbnails - http://wordpress.org/plugins/regenerate-thumbnails/
  4. Contact Form 7 - http://wordpress.org/plugins/contact-form-7/
  5. Column shortcodes - http://wordpress.org/plugins/column-shortcodes/
  6. MixitUp - http://mixitup.io/
  7. Flexslider - http://flexslider.woothemes.com/
  8. jquery.lightbox.js - http://github.com/duncanmcdougall/Responsive-Lightbox
  9. Tweet.js-mod - https://github.com/StanScates/Tweet.js-Mod
  10. Stock images from http://unsplash.com/ and http://www.gratisography.com/
© LV Themes