Installing and Activating the Theme
Login into your WordPress Dashboard, under the ‘Appearance‘ tab, and select ‘Themes‘. Click the box ‘Add New Theme‘, click the ‘Upload‘ link under the ‘Install Themes‘ page.
Choose the Piccolo.zip file you have downloaded and click the ‘Install Now‘ button. Once the theme has been uploaded, click the ‘Activate‘ button to enable the theme.
Using the theme options panel
You can easily and quickly add your own branding and alter the functionality of the theme by using the Theme Options panel. To do so navigate to ‘Dashboard’ => ‘Appearance’ => ‘Theme Options’.
The theme options contain many settings that enable you to change all the colors, upload your own branding graphics, alter your portfolio and blog configuration and many more options.
To create your header menu, navigate to ‘Dashboard’ => ‘Appearance’ => ‘Menus’.
To create a new menu, click the link called ‘Create a new menu’. Name your menu ‘Primary’ or any generic name that will help you identify where the menu will be used. Once the new menu is created you can add your links from the dropdown menu panels on the left.
You can then drag and drop the menu blocks into your new menu, if you wish to reorder them, you can create a submenu by dragging the menu items under each other.
When you’re finished, click the ‘Save Menu’ button.
Under the ‘Menu Settings’ title, locate the ‘Theme locations’ checkboxes, be sure to tick the menu location you wish to add your newly created menu to, click ‘Save’ to finish.
Create a homepage
By default WordPress usually sets your homepage to display your blog posts.
To set up a homepage like the theme demos, create a new page: ‘Dashboard => Pages => Add New’.
Give your page a title, for example ‘Home’, in the right column of the page editor find the box named ‘Page Attributes’.
In ‘Page Attributes’ you will see a dropdown box under the heading labeled ‘Templates’, here you need to select the page template called ‘Page – Home’. Click ‘Publish’ to finish.
Next you need to make your homepage a static page, in this case, the page you just created. Navigate to ‘Dashboard => Settings => Reading’.
Find the ‘Front page displays’ heading and tick the box labeled ‘A static page (select below)’. In the ‘Front page’ select box locate and select your newly created page, in this case ‘Home’.
Click ‘Save Changes’ to complete’. Nothing will be added to your homepage yet as you will need to add your own content.
Adding Homepage Work, Welcome Text & Testimonials
The homepage template uses widget areas and custom Themejug widgets to build in your text, work and testimonial items. Navigate to ‘Dashboard => Appearance => Widgets’.
Homepage Image Icon Items: Drag in the widget ‘Themejug – Homepage Services’ to the ‘Homepage Services’ widget area. You can upload your image icon in the WordPress media library, then copy the full image path into the widget option.
Homepage Below Video Text: Drag in the widget ‘Text’ to the ‘Homepage Welcome’ widget area.
Homepage Portfolio Items: Drag in the widget ‘Themejug – Homepage Portfolio’ to the ‘Homepage Work’ widget area.
Homepage Testimonial Items: Drag in the widget ‘Themejug – Homepage Testimonials’ to the ‘Homepage Work’ widget area.
Create the homepage video & text overlay
Navigate to the theme options panel. ‘Dashboard’ => ‘Appearance’ => ‘Theme Options’.
Under the ‘Front page‘ tab you can upload your desired video formats. It is suggested to include all three formats of your video for best compatibility.
In our demo, we have an image overlay above our video. You can do this or just add normal text by entering your text or image into the option called ‘Homepage Banner Message‘.
It is strongly suggested to include an image to display with your video, the option called ‘Homepage Image Background‘ is where you can upload this.
Many phones or tablets do not autoplay an inline video, in these situations the uploaded image will be served rather then the video.
Creating Your Self-hosted Video Formats
You need to have your own video, from this you can then create the three different video formats recommended using this free video conversion software: http://www.mirovideoconverter.com.
Once you have created your desired video formats, you can upload those into the corresponding theme option.
Create a blog
If you have something other than your blog posts on your homepage, such as a homepage template like in the demo, you can set up another page to display your blog posts on.
To set it up, simply create a new page: ‘Dashboard => Pages => Add New’.
Give your page a title, for example ‘Blog’ and click ‘Publish’ to save and finish.
Next you need to set your blog page as a ‘static page’, in this case, the page you just created. Head over to ‘Dashboard => Settings => Reading’.
Find the ‘Front page displays‘ heading and tick the box labeled ‘A static page (select below)‘. In the ‘Posts page‘ select box locate and select your newly created page, in this case the page called ‘Blog’ that we just created.
Click ‘Save Changes’ to complete.
Create a blog post
This theme supports multiple post formats – this means you can post your own videos, images and slideshows and of course the normal standard posts.
To create a new blog post, in the left sidebar click ‘Dashboard => Posts => Add New’. In the right sidebar you can choose which post format you wish to use.
Standard: A standard post full of anything you wish!
Gallery: A slideshow containing your images is automatically created from all the pictures you upload.
Video: Embed a video from YouTube or Vimeo.
Create a portfolio page
This theme uses a custom post type called ‘Portfolio’ to build and manage your portfolio items. To start first you will need to create a new ‘Page’. ‘Dashboard => Pages -> Add New’.
Give your page a title, for example ‘Work’, in the right column of the page editor find the box named ‘Page Attributes’.
In ‘Page Attributes’ you will see a dropdown box under the heading ‘Templates’, here you need to select the page template called ‘Page – Portfolio’. Finish this step by publishing the page.
Your portfolio items will be added to this page once you have created and published a portfolio item.
Creating portfolio items
To start filling the portfolio pages, Click ‘Portfolios => Add New’ in your dashboard.
There are three different ‘Portfolio Types’ supported, you need to select one to use:
Image: All portfolio images uploaded to that item are displayed on the page one item at a time.
Slideshow: Automatically create a slideshow that loops through all images you upload to the portfolio item.
Video: Embed a video from Vimeo or YouTube.
Image Uploading Note: To display your images within a portfolio item you must upload your images and close the WordPress image uploader. Do not insert the images into the post content, this theme will display your uploaded images automatically.
Setting a featured image: In the right sidebar click the link ‘Set featured image’. Select or upload your desired image. This image is displayed as the thumbnail.
Managing portfolio images
You can delete, add and drag & drop to reorder your portfolio items very easily from within your portfolio item.
Select and edit the portfolio item you wish to edit images on, click the ‘Add Media’ button at the top of the content editor. Select ‘Images uploaded to this post’ and you will be present with your images for that portfolio item.
Create a contact page
This theme comes with a handy built in contact form, to set it up, simply create a new page: ‘Dashboard => Pages -> Add New’.
Give your page a title, for example ‘Contact’, in the right column of the page editor find the box named ‘Page Attributes’.
In ‘Page Attributes’ you will see a dropdown box under the heading ‘Templates’, here you need to select the page template called ‘Page – Contact’.
You set the email address for the contact form in the theme options panel ‘Appearance => Theme Options => Contact’, if one is not supplied it will grab the email associated to the WordPress install.
Click ‘Publish’ to save and finish.
Creating testimonial items
To create a testimonial item, navigate to ‘Dashboard => Testimonials => Add New’ in your dashboard.
Testimonial Text: This is the text you add into the content editor.
Testimonial Client: Add the client name in this meta box.
Testimonial link: You can optionally add an external URL, do this in the ‘Testimonial link’ meta box.
Ideal image sizing
If you need to regenerate image sizes for previously uploaded images, this can be done automatically via this plugin: AJAX Thumbnail Rebuild.
Blog posts: Equal to or greater than 740px in width.
Portfolio images: Equal to or greater than 1200w x 1200h pixels.
Exclude featured images from portfolio items
Navigate to the theme options panel. ‘Dashboard’ => ‘Appearance’ => ‘Theme Options’.
Under the ‘Portfolio Settings’ tab, locate and check the option labeled ‘Exclude The Featured Image‘.