Responsive Visual

This post includes the instructions on setting up the Responsive Visual Theme for WordPress. If you have any questions, be sure to post them in our forum and we’ll be glad to help you out.

To install the theme, go to the Appearance section of your WordPress control panel and select Themes. At the top right, you’ll see a tab labeled “Install Themes.” Click that tab and then select upload. You can then browse for the ZIP file you downloaded and install it. After the theme has been installed, activate it. There is also a quick screencast in our video section that can show you how to install a WordPress theme if you need help.

Theme Options

After installing the theme, you’ll want to go to the theme options page to set up your theme. Go to the “Appearance” section of your WordPress control panel and select “Theme Options” to get started. The first tab is the “General Options.”

General Options

First up is your logo. You can choose to have an image logo or a text one. The text one will use your site’s title as its logo. The image one will use the image you upload in the next field. Just click upload and you can add the image of your choice.

The next two options are for a “Favicon” and a “Apple Shortcut Icon.” The favicon is the small graphic that you see often next to the URL in your browser’s navigation bar. Some browsers place it on the tab next to the page title. To add one, just upload a small PNG, GIF, or ICO file here.

The Apple Shortcut Icon is used when someone adds a shortcut to your site to their home screen on their iPhone, iPad, or iPod Touch.

You can also choose to include the site’s tagline in the right hand side of the header. To set what the tagline says, go to Settings and select “General.” The tagline is entered there. Even if you choose not to display the tagline, you’ll want to enter one as this text is often picked up and used in page titles/descriptions.

Last up on the General Tab is the footer text. You can enter text here that will be displayed in the left hand side of the footer.

Navigation Bar

The next tab of the theme options page deals with options relating to the navigation bar. To set up the navigation menu, go to the Appearance section and select menu. There you can add your pages and categories to make up your navigation. There is also a screencast in our video section that can help you with setting up your menu.

The navigation bar options deal with the right hand side of the navigation bar. You can choose to have a MailChimp sign up box, a search box or nothing on that side. If you choose MailChimp, you’ll need to enter your MailChimp API number and your List ID number into the boxes provided. You can get both of those numbers from inside your MailChimp account. You can sign up for a free MailChimp account here. You can also specify the text to go on the submit button that people click when adding their email address.

The rest of the Navigation Bar options are for social media links. The theme has built in support for several social media sites. To include a site’s icon, just enter the URL to your page with that site and it will appear in your header. Only sites that have a URL present will be displayed. While we wouldn’t advise listing all of them, it’s a great way to add links to your most important ones.

Home Page Options

The home page tab provides the controls for the slideshows that are used throughout the theme. You can set the type of transition, the length of time each slide is visible as well as how fast the transitions are.

You can add the slides for the home page by going to Media and selecting “Slides.” Adding a slide is similar to adding a post. The “featured image” is the picture that’s used for the slide. Here is a quick video that shows how to add slides:

Podcast

The Responsive Visual theme includes built in support for podcasting. This tab allows you to enter in the details about your podcast feed. You can set the graphic that will be used, the name of the feed “owner” as well as the category you’d like to have the podcast part of.

Styling

The last section of the theme options page is for “Styling.” Here you can add a background and change some of the colors in the theme. There are several sample backgrounds included in the ZIP file you downloaded from this site. To use those, unarchive the ZIP file and look in the folder called “backgrounds” to access the included ones.

Every other field is optional. Just select the color for each part you’d like to change and you’ll have a new color. Any fields where you don’t select a color will remain unchanged.

The box at the bottom is where you can enter any custom css you’d like to use.


Creating Your Home Page

Page TemplatesTo set up a home page like the demo, first go to pages and select “add new.” This new page will serve as your home page. You can give it any title you like, but “home” is a good starting point. In the right hand column, you’ll notice a box labeled “Page Attributes” with a drop-down menu in it. Choose “Home Page” from the list of available templates there (we’ll cover the other templates shortly). Now publish your page.

Next go to the Settings section of your WordPress control panel and select “Reading.” Here you can select a page to serve as your home page. Choose “Front page displays” a “Static page” and then select your home page from the drop down of available pages.
Reading Settings

The video that’s in the “Home” section of the theme options describes how to add your slides.

The content on the home page comes from “widgets.” To add a widget, go to the Appearance section and select “widgets” The home page will display the widgets you add to the area called “Home Sidebar.”

The home page can also display widgets below the slideshow. To include widgets there, add them to the “Lower Sidebar” and they will be included in that location.


Galleries, Images and Videos

FormatsThe Responsive Visual theme has support for various types of “post formats.” These allow you to choose how the content on that page will be displayed. When editing a page or post, you’ll see a box in the right hand column labeled “Format.” Just choose the style you’d like this page to have from those available options.

Galleries

To include a gallery, just choose the “gallery” format. Next upload your images. All images that you upload on this page/post will be included in the gallery. If you’ve previously uploaded an image on another post that you want to include in the gallery, you’ll have to upload it again while editing your new post. Only images uploaded while editing the gallery post will be included. It’s not necessary to insert the image into the post content. Simply uploading the image while editing the post will cause WordPress to associate the image with your post and include it in the gallery.

You can also choose from a few layout options. These are available in the middle section below the main content box.
Layout Options

You can select to display the content box on the left, on the right or to leave it out completely if you just want to display the images. You can also include the lower sidebar widgets on that page/post by adding widgets to that sidebar and by selecting “yes” here.

Images

The image format works basically the same way as the gallery does. The image that’s displayed will be the “featured image” for that page/post. You’ll want to size the image to be 960 pixels wide by 620 pixels tall. You also have the same layout options as the gallery format.

Video

Video BoxFor videos, you’ll want to place the embed code from the video service of your choice into the box provided for it in the top right. Your video will then be displayed at the top of your page/post with the content below that. If you’re not already committed to a service, we highly recommend Vimeo as they have a great player and a very user friendly site.

Standard

The default format is a basic page/post. There is no large image or video being displayed. You can still add in images/videos but visually it will resemble more of a traditional webpage.


Staff

Staff List
The Responsive Visual theme includes a built in staff section so you can easily create a directory of your staff members.

To add a staff member, go to “Staff” in your WordPress control panel and select “Add New.” Adding a staff member is similar to adding a post. Enter the staff member’s name at the top. The main content area is where you’ll place their bio. You’ll notice in the top right, a series of fields where you can enter the contact information for the staff members as well as their job title. All of these are optional and will only be displayed if there is content in a particular field.

The image for your staff member is the “featured image” again. You’ll want to size these to be 960 pixels wide by 620 pixels tall.

If you’d like to have more than one staff “page” or listing, you’ll want to add a “Staff Type.” A Staff Type is essentially a “category” for your staff members. If you only need one list, then you can ignore this section. If you’ll need more than one, you’ll want to create a “staff type” for each list you’ll create. Say you want one for your senior leadership, then create a type with that name. If you want to display your interns, then create an “intern” list as well. Each staff member you add to those types will be included in the “page” for that type.

Once you’ve entered in all the information about your staff member, click publish.

Adding Staff Pages

There are two methods to add staff pages to your site. If you only need one directory, go to the pages section and create a new page. In the right hand column, you’ll see a box labeled “page attributes” with a drop-down menu called “templates.” From that drop down, choose “Staff Archive” and publish your page. You will now have a staff archive page. You can add it to your navigation menu and arrange it to fit in with the rest of your content.

Staff NavigationIf you need to have more than one list, then we go about this a bit differently. Go to the Appearance section of your WordPress control panel and select “Menu” to open up the navigation builder. In the left hand column you should see a box labeled “Staff Type” which has your available staff types. If you don’t see that box, then click “Screen Options” in the top right and make sure the box next to “Staff Types” is checked.

Now you can select the Staff Types you’d like to add to your navigation and add them. This will create a “page” for each staff type you add.


Podcasting

Podcasting

To get started, go to Podcasting and select “Add New.” Adding a podcast works essentially the same way as adding in a post. You have the same format options as a post or page does as well as the same layout options.

The elements that are unique to the podcast are in the file upload section. You can find this right below the layout options. Here you can upload your podcast audio file. You can also upload any notes that accompany your podcast too.

Series

To help organize your podcast, we have a “series” section you can use. You’ll find it in the right hand column when editing a podcast. Basically you can add a series to group podcast episodes together. It’s great for churches who have series of messages on the same topic. This is optional and can be left out if you don’t wish to use it.

Speaker

You can also add in the name of the speaker in the podcast episode. This way you can allow your visitors to find every episode that a particular speaker has published. Again this is optional, but is also highly recommended.

Once you’ve added in the information for your episode, click publish. You now have a published podcast.

Podcast Archive

To add a podcast archive, go to pages and select “Add New” to create a new page. In the right hand column, find the page attributes box and select “Podcast Archive” form the template drop-down. Publish your page. Now you can add your archive to your navigation just like any other page.

Podcast Feed

In order to include your Podcast in iTunes or another podcast directory, you’ll need to create a feed for it. To do that, go to Pages and select “Add New.” In the “Page Attributes” box, choose “Custom Feed” from the template drop-down menu. Click publish.

This page is a bit different in that it isn’t one you add to your navigation for your visitors to see. Instead you’ll want to copy the URL to the page (you can find the URL just below the page title). You can then submit that URL to iTunes and any other podcast directories you use to include your feed. The feed details come from “Podcasting” tab in the theme options page.


Page Templates

The theme includes page templates you can use.

  • Full Width
    That page has a large content box that spans the width of the site. It does not include a sidebar next to the content.
  • Podcast Archive
    This page will display all of your podcast episodes.
  • Staff Archive
    This template will create a directory of your staff members
  • Home
    This is the template for your home page
  • Custom Feed
    This page creates a custom feed for your podcasts
  • Image Sizes

    We built the theme around an image size of 960 pixels wide by 620 pixels tall. There are spots in the theme where you’ll see an image smaller than that, but it keeps the same aspect ratio. For your best results, we recommend making all of the “featured images” or gallery images you use 960 by 620.

    You can add images to your pages/posts that aren’t “featured” images and use other sizes there. That’s flexible.


    If you have any questions, please feel free to post them in our forum.

    Thank you for creating with Organized Themes!

    Bill Robbins

    I'm the creator of the Organized Themes. We're here to help you create a fantastic website. Let us know how we can help.