Panels: One-Page Responsive WP Theme

    Resources

    Theme Installation

    1. Download and unzip the folder from ThemeForest.
    2. Upload the theme folder (with the "style.css" file inside) to the themes directory of your blog, which is located within the wp-content directory.
    3. Activate the theme from your admin panel by navigating to "appearance" > "themes".
      • NOTE: If you get a message like “stylesheet missing” (it isn’t) or “broken theme” (it’s not), please read this post: http://tinyurl.com/75qmrxa
    4. Options will be accessible from “appearance” > “customize”.

    Theme Options

    Theme options are controlled from the theme customizer panel. Once finished installing the theme, be sure to review the options available by navigating to “Appearance” > “Customize”.

    options

    Home Page

    By default the built-in home page for the theme will display. If you want a different page to display instead, navigate to the "reading settings" page and select the page in the "front page" drop down menu.

    Organizing Vertical Panels

    To organize your panels, navigate to “Appearance” > “Menus” and create a new menu named “Main”. Assign this menu to the “Main Navigation Menu” in the drop down (see image below). For more information and instruction, watch the “Using WordPress 3.0 Menu System” video here: http://tinyurl.com/48dozan.

    NOTE: Only pages and categories are supported for the main menu. Also, sub menus are not support for the main menu.

    Creating Horizontal Panels

    To create horizontal panels within a single vertical panel, use the "Insert Page Break" button in your page content box editor. If you're using the "text" tab editor (not the "visual" tab), use <!--nextpage--> to separate sections.

    Visual Editor

    page_break_button

    Text Editor

    next page

    Custom Background Images/Patterns

    To control the background image/pattern for pages, use the custom fields on the page edit screen (see first screenshot below). For categories, use the "Background Pattern URL" field on the category edit screen (see second screenshot below). Images can be uploaded from the "Add New Media" page (under the "Media" menu).


    Page Edit Screen:

    custom_bg

    Category Edit Screen:

    category_bg

    Number of Posts in Category Panels

    To control the number of posts that appear on category panels, navigate to "Settings" > "Reading" and adjust the "Blog pages show at most" number to your liking (see screenshot below). It's recommended that you use a number divisible by 3 (i.e. 3, 6, 9, etc) as the width is built for 3 posts per row.

    post_display

    To feature images for posts, use the “Featured Image” section on the lower right side of the post edit page (see screenshot below). After uploading the image, select "Use as featured image". When uploading an image, it automatically creates all the different sizes for you.


    Embedding Video

    Review the below screenshots for where you can find embed codes on sites like Vimeo and YouTube. Copy/Paste the embed code into the page/post content box. Keep in mind, when you're dealing with raw code like this make sure you're using the "HTML" tab (not the "visual" tab) on the WordPress page/post edit screen. NOTE: The maximum width for video embeds should be 700px.

    Vimeo:

    embed

    YouTube:

    Slider Gallery

    To create a slider gallery, simply upload images to the post. You DO NOT need to insert any shortcodes or images for the slider. NOTE: If you want to use an image in the post content, but don't want to have it show up in the slider gallery, simply use the "Media Upload" page to upload the image and not have it attached to the slider.

    slider

    WordPress Grid Gallery

    To create an image gallery, simply upload images to a page/post. Click "Create Gallery" and select the images you want in the gallery. When finished, click "Create a new gallery" in the lower right. Then click "insert gallery" in the same location.

    gallery
    grid_gallery

    Widgets

    The widgets section is controlled from the "widgets" page (under "appearance").

    Comments

    This theme uses PrettyPhoto as a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

    Shortcodes

    This theme has the below shortcodes built into the theme. For a live demo of these shortcode, click here

    JavaScript

    This theme imports the following JavaScript files:

    1. jQuery: jQuery is a JavaScript library that greatly reduces the amount of code that you must write.
    2. Custom Scripts: The custom.js file provides some custom scripts for jQuery.
    3. PrettyPhoto: PrettyPhoto is a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
    4. Backstretch: Allows the fullscreen image effect to work across all major browsers.

    Changelog

    v 1.1.3 - May 2015
* Added support for WordPress 4.2 sidebar requirements
* General code optimizations and improvements

v 1.1.2 - Nov 2013
* Added: Retina support.
* Added: "Show Main Menu Text" theme option.
* Added: "Show Pagination Numbers" theme option.
* Fixed: Error in .POT file for translation.

v 1.1.1 - Aud 2013
* Minor improvements.

v 1.1.0 - June 2013
* Added shortcodes and 300+ icon fonts

v 1.0.3 - Feb 2013
* Minor improvements.

v 1.0.2 - Feb 2013
* Minor improvements.

v 1.0.1 - Feb 2013
* Minor improvements. 

v 1.0.0 - Feb 13
* Initial release.