Welcome

Thanks for buying the Studio 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 Studio_v1_2.zip file and unzip it in a directory.
  • Using an FTP client to access your host web server, upload the "Studio" 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 "Studio" 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".

Congratulations, you have just installed the Studio 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.1. Permalink structure

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

2.2. Number of posts

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

2.3. Menu

To set the menu's up go to "Appearance > Menu's" and click "create a new menu"

Once the menu has been created, set the "Theme location" on "primary location" and click on "Save menu"

Your menu is now saved, and you can add or remove new items to it!

2.4. Categories

You can choose to display all blogposts on the homepage, or only the posts that are in the "Portfolio" category.

If you have installed the demo content you should already have a category named portfolio. If you have a fresh install you can create the category by going to "Posts > Categories" and fill in the form like shown on the screenshot.

*Optional
If you want to have your homepage to only display the portfolio posts, go to "Appearance > Customize" and in the layout section change the setting "Show Portfolio or all (Blog) posts?" to "Portfolio"

The homepage will now only show the posts that are in the "Portfolio" category.

2.5. Featured Images

To add a thumbnail to your post, upload an image to the "Featured Image" section when you make a new post.

The second featured image will be used in the slideshow.

2.6. Slideshow

You can add posts to the slideshow by making them "Sticky"

To do this, go to "Publish > Visibility > Edit" and enable "Stick this post to the front page".

The theme will show the latest 5 Sticky posts on top of the page.

The images in the slideshow, should have a resolution of at least 1600x600 pixels.

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

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

3.2. Header

In this tab you can the header style.

You can place the header on the left or on top of the page.

You can also set a background image or colour for the header.

The "header styles" only work when the header is positioned on top of the page.

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

3.4. Typography (Google Fonts)

If you have installed the "Easy Google Fonts" plugin, you can use these settings to change the font that is used for the headers, and paragraphs in the theme.

3.5. Layout Opions

In this tab you can change the layout of the homepage, and enable or disable the sidebars on the site

For the homepage you can select wether you want to show the site description, sidebar or slideshow.

You can also change the category of the posts that are displayed on the homepage

3.6. Thumbnails

In this tab you can change various options of how thumbnails will be shown.

You can change the following options

  • Aspect Ratio
  • Thumbnail Style
  • Thumbnail Overlay Color
  • Gap
  • Columns
  • Title Placement

3.7. Footer Content

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

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

3.8. Site Title & Tagline

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

4. Shortcodes & Styles

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

4.1. Styles

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

4.2. Shortcodes

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

4.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]

4.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/

4.2.3. Button

Add to following code to add a button your posts:

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

4.2.4. Divider

Add to following code to add a divider your posts:

[divider]

4.2.5. Gallery

If you insert a gallery, make sure to change the Link to setting to Media File.

4.2.6. Slideshow

Add to following code to add the slideshow to your posts or pages:

[studio_slider]

5. Credits

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

  1. Underscores starter theme - http://underscores.me/
  2. Regenerate Thumbnails - http://wordpress.org/plugins/regenerate-thumbnails/
  3. Dynamic Featured Image - http://wordpress.org/support/plugin/dynamic-featured-image
  4. Contact Form 7 - http://wordpress.org/plugins/contact-form-7/
  5. Column shortcodes - http://wordpress.org/plugins/column-shortcodes/
  6. jquery.lightbox.js - http://github.com/duncanmcdougall/Responsive-Lightbox
  7. Stock images from http://unsplash.com/ and http://www.gratisography.com/
© LV Themes