Skip to content

ShoutOut Documentation

Thank you for using ShoutOut to build your beautiful website. In this documentation, we will show you how to install and setup the basic demo for your website. This takes you only 5 minutes to have the website ready!

#Installation

We have written a very detailed guide on how to download and install a WordPress theme, please follow the instruction in that article.

IMPORTANT:

In order to make the theme works properly, you need to install the Jetpack plugin. Simply go to the Dashboard → Plugins → Add New. The plugin will appear in the list below, click Install Now button to install it.

After activating Jetpack, you need to connect to WordPress.com to use it (it requires you to create an account on wordpress.com – which is free). If you don’t want to create an account on wordpress.com, you can enable the Jetpack development mode.

#Header Setup

Custom Logo

You can add a custom logo by going to Customize → Site Identity and uploading your own logo image.

We recommend the size of the logo is 50x50 (px).

#Navigation

The main navigation appears at the top right of every pages of your website. On tablet and mobile devices, it will be hidden behind a toggle button. To set it up, simply create a new menu via Customize → Menus and assign it to the Header Menu location.

#Social Links Menu

The social links menu displays at the bottom right of your website. To add social links, create another menu and add links to your social network profiles. Then assign it to the Social Menu location.

Linking to any of the following sites will automatically display its icon in your menu:

  • Codepen
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • Foursquare
  • Github
  • Google+
  • Instagram
  • Linkedin
  • Path
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • Skype
  • Spotify
  • Stumbleupon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • Vine.co
  • WordPress
  • Youtube

#Setting up your front page

When you first activate ShoutOut, your homepage will display posts in a traditional blog format. To set up your homepage, follow these steps:

  1. Create a page.
  2. Go to the Customizer’s Static Front Page panel and set Front page displays to A static page.
  3. Select the page you created in step one as the Front page, and, if you plan to have a blog as well, choose another page as the Posts page to display your blog posts.

#Front page sections

#Hero Section

The hero section displays site title and site description on the left and the content of the front page on the right. To setup the content on the right, edit the front page and add the content as follows:

To add the featured song in the hero area, please click the Add Media Button → Create Audio Playlist → Upload your song → Select song → Create a new playlist → Insert audio playlist:

 

#Sticky Audio Player In The Footer

This audio player shows a list of songs featured by you.

First, create a page that has a playlist of featured songs like this:

Then go to Customize → Theme Options → Playlist Page and select the page that you created in the previous step.

#Media (Video) Section

First, you need add new a page and choose template Video Template for that page as follows:

Next you add new one or more pages and choose the previous page as its parent as follows:

Those child pages will automatically show on the front page.

To set number of videos show on front page, go to Customize → Theme Options → Number Of Videos In Video Slider.

#Gallery Section

ShoutOut will automatically show posts which have post format "gallery" as a gallery section on the front page. You do not need to do anything here.

#Featured Slider Section

ShoutOut allows you to set up your pages as “featured”. They’ll be displayed in a slider under featured video.

To set up the Featured Slider, you need to publish some pages with featured images and give them all the same Tag, like “featured”:

Next, go to Customize → Featured Content , and enter the tag you used in the previous step in the “Tag name” field. Click Save & Publish.

#Blog Section

ShoutOut automatically display latest posts on the front page. To customize the section title and number of posts shown, please go to Customize → Theme Options → Blog Section Title.

#Events

Setting up events is very similar to setting up video pages.

First, you need add new a page and choose template Event Template for this page.

Next you add new one or more pages and choose the previous page as their parent.

#Footer

The footer displays the social links menu and credits. If you already assigned a social links menu earlier, you'll see them here.

To show Instagram images in the footer, please install Instagram Slider Widget and add Instagram widget to the Footer Instagram sidebar.

#Customization

We recommend using a child theme to customize the theme. Here is the guide how to do that.

In addition, you can customize the theme CSS by going to Customize → Additional CSS.

If you want to customize the fonts or colors, we have 2 powerful and easy-to-use plugin: Ultimate Fonts and Ultimate Colors that can help you do that.

If you have any question, please send us a support ticket!

Table Of Content

Scroll To Top