“Appdev” WordPress Theme for Mobile App Showcase - Documentation by “LiveMesh” v3.6


“Appdev”

Created: 05/24/2013

By: LiveMesh Email: Use my ThemeForest profile page
 

Thank you for purchasing our theme. If you have any questions that are beyond what is provided in this help file, feel free to email us through the contact form here. You should also follow us on twitter to get the updates. Thanks again!

 

Table of Contents

  1. Installation and Single Page Site Configuration
  2. General Options
  3. Header and Logo Options - How to Add Custom Logo, Customize Header and add Social Icons
  4. Footer Options
  5. Site Layout Options
  6. Fonts, Colors and Background Options
  7. Primary and Sticky Menu Options - How to add Navigation Menus to your site.
  8. Custom CSS
  9. Portfolio Page Options - How to make Portfolio Entries
  10. Setting up Sliders (Revolution/Nivo/Flex) and related configuration
  11. Set Featured Image
  12. Video Options
  13. Custom Post Types, Shortcodes and Shortcodes Builder
  14. Contact Form
  15. Custom Widgets and Sidebars
  16. Custom Page Templates
  17. Translation and Localization
  18. 500+ Icons Usage
  19. Unlimited Sidebars
  20. Custom Headings for Post/Page
  21. Site Configuration with Legacy Page Sections
  22. Important - Migrating to v3.1 from versions v3.0 and below

Installation and One Page Site Configuration - top

  1. For easy help on installation of any theme released by LiveMesh, go through the Video Tutorials posted on Youtube - http://www.youtube.com/channel/UCgI4wSJ0TDigLHzyVORWo8g.
  2. Download and unzip theme package file. The following folders will be in the unzipped file:
    • appdev - theme files that you need upload to your wordpress installation.
    • resource\psds - all layered psd files for the theme.
    • licensing - license for the theme.
    • documentation - documentation files for the theme.
  3. Before you install the theme, make sure your wordpress version is 4.3 or higher. Then upload only the folder "appdev" to the /wp-content/themes folder of your WordPress installation root directory or ftp the folder to /wp-content/themes/ through your FTP Client.
  4. Next login to your WordPress admin panel and go to Appearance -> Themes subpanel. Then look for Appdev theme and activate it just like you would activate any other theme.
  5. Once activated Appdev, you will see the new panels below added to the Administration Panels.

    Appdev Admin Panel

Importing Theme Data - top

If you need help installing Wordpress see the link below to know more about: http://codex.wordpress.org/Installing_WordPress

It's not so difficult to use our theme to build your website. Actually to make it easy for you to build your website, we have attached the content xml file with the theme package, so that you can import lots of ready content to your installation. Once you have activated the theme, all you need to do is save the xml file to any location and import the contents using Wordpress importer plugin.

If you want to know how to import the contents from xml file please see this video tutorial on how to import a WordPress XML File Of Posts and Pages

Once you are done importing the content, Please explore the "Pages", "Posts" etc on the admin panel and edit them as per your requirement. Please read this documentation for any assistance on the theme, and also we will be happy to assist you in all possible manner.

Site Configuration with SiteOrigin Page Builder - top

If you import the sample data, all the required pages including home pages, page sections part of these pages, portfolio entries are all created for you. If you need to know about how the initial site configuration works with Appdev, this section can help you. Some of these steps are covered in the video tutorial.

Appdev can function as a multi-page or as a single page or as popularly known, an one page theme. Appdev recommends using SiteOrigin page builder to help building a site of either type easier.

Step 1: Appdev recommends installing the following plugins for page building. The theme prompts the users to install the below plugins automatically upon activation. Just follow the prompts at the top to install the below plugins.

Plugin Activation Prompt

SiteOrigin Page Builder - is the most intuitive, lightweight yet feature-rich WordPress page builder around that lets you compose your page using page builder elements/widgets. The theme comes preloaded with about 30 page builder elements and additional 15 elements are provided via our LiveMesh SiteOrigin widgets plugin linked below.

SiteOrigin Widgets Bundle - that lets you develop widgets or page builder elements and comes with about 10 highly configurable page builder widgets of its own.

Livemesh SiteOrigin Widgets - is a free yet well supported plugin on wordpress.org, developed and maintained by the author of this theme. This plugin adds about 17 premium quality widgets to the SiteOrigin page builder. This is in addition to about 30 page builder elements provided by the theme itself.

If you use the widgets from Livemesh SiteOrigin Widgets plugin and need support, feel free to get in touch with us in our support forum. You can see all the widgets in action at the plugin live demo site.

Step 2: Once activated, you can use page template One Column No Sidebars to design your home page and additional pages for your site. Refer to the documentation for the respective plugins to know more about using the page builder and its widgets.

Page Builder

When using page builder, do pay special attention to a few options that are used in the theme sample pages as shown in the below image. The theme has often these attributes set in the Row Edit window.

Edit Row Styles

When you set Row ID, navigation menu on the top can house internal links to these page elements in the page builder helping to navigate within the page.

Edit Row Layout

For more information on using the Page Builder by SiteOrigin, pls refer to the documentation

https://siteorigin.com/page-builder/documentation/.

https://siteorigin.com/widgets-bundle/

Step 3: Make this page the home page by choosing it as one in the 'Settings->Reading' tab. Pls have a look at the video tutorial if you not familiar with these functions or hit a roadblock somewhere.

Set Home Page

Step 4: Use the WordPress menu to populate the top navigation menu in Appearance->Menus tab in the WordPress admin. Make sure you setup one of the menus as the primary menu for the site and also make sure setup all internal links to page sections inside a single page manually.

WordPress Menu Setup for Single Page

Step 5: To set custom background for pages/posts/portfolio items, navigate to Theme Options->Backgrounds tab and change the options for 'Background for Title Header Area' and 'Background for Portfolio Title Area' as seen the screenshot below. You can adjust the height of the background as well using the available options 'Height of Top Title Area' and 'Height of Top Portfolio Title Header Area'.

Custom Headers for Posts/Pages/Portfolio

Once you have the page created and set as home page, just open the home page to verify that the page does contain the desired sections and the chosen navigation is displayed at the top of the page.

You now have a small working site setup now. With the help of page builder you can now continue developing your site in an easy yet productive way.

To create multiple single pages, you will need to create another page with the page template 'One Column No Sidebars' and then in the page edit window, use the SiteOrigin page builder to build the pages just as described above. This helps you to create multiple one page templates to showcase multiple products or multiple aspects of your business in a single wordpress installation.

Since each of these sub-pages have page sections of their own, you can create a custom menu in the WordPress Appearances -> Menus window and configure a custom WP menu for a page. The theme provides a dropdown for choosing a custom menu in the page edit window (see bottom of the screenshot below).

In order to save time replicating some of the menu items in the primary menu in custom menu, you can use the Duplicate Menu plugin to duplicate the primary menu used for home page and then start customizing it to meet the needs of another One Page (Single Page) template page.

Single Page Options Panel


General Options - top

Once activated, Appdev provides a number of options for customizing your site. The options panel is mostly self-explanatory with reasonable documentation on each and every option provided there. While not repeating the documentation already provided there, we will try to cover some of the less obvious details here in this document. Let us look at the General tab of Appdev Options.

General Tab of Appdev Options

.

Slider Choice - Appdev comes with three responsive Slider options including the premium Revolution Slider for building a rich home pages for your website. The Revolution Slider is bundled with the theme and comes with its own documentation. Do refer to the same for help with Revolution slider. Do check our Appdev live preview website for many different types of home page formats that are available for use by the users.

To know more about how to add sliders to a page, go the section How to Add Slides for Sliders


Appdev Logo Options Panel allows the user to upload logo image. Option to forego image logo and go for text also is provided.

Logo Option Panel

Appdev Header Options Panel allows the user to manage the top header area of a page. You can insert social icons here. Navigation menus can be enabled through standard WordPress Admin panel for Menu under Appearance tab.

Tagline for Blog Post - For blog post, specify the text to display in this area. 'Blog' is the default. Unlike blog posts, the tagline area of a page displays the page title.

Remove tagline from Home Page - Remove tagline displayed on top of the home page (the default WordPress blog view shown when no static page is specified as home page).

Header Option Panel

The theme allows you to have social icons on the top right corner of each page. Social icons are not shown when Get App button is enabled. Hence, this has no effect unless the Get App button is disabled in the Header tab above.

Social Icons Option Panel

Footer area of Appdev is quite flexible with many different options on number of widgets you can place and how you want them to be arranged. The Widget panel lists a total of six Footer areas to which you can drag and drop a WordPress native widgets as well as widgets provided by Appdev.

Footer Columns - Along with providing simple option of having equal sized 2,3,4,5,6 columns, you also have options to specify how the footer widgets need to be arranged. Google Analytics Code - The Google Analytics option can be found in the miscelleneous tab of the theme options panel.Appdev is Google Analytics ready. To start tracking users, signup for Google analytics, obtain the tracking code and paste it into this text box to start tracking user activity for your website.

You can modify the copyright text shown in the footer of each page by providing the modified text in the header tab.

Footer Option Panel


Site Layout Options - top

Appdev supports single column and 2 column layouts for static pages, portfolio pages as well as blog posts. The options panel helps change the layouts for static pages, blog pages and archive pages like those of categories, tags or authors. The Appdev Live Preview Site showcases many of these layouts and styling (see below) to help familiarize the user with them.

Site Layout


Fonts, Colors and Backgrounds Options - top

Appdev provides options to change font family, font size and font spacing for your Headings and Body. More than 500 fonts are available for use. If you need additional fonts, you may import and use the same with the help of the Custom CSS panel in theme options. Do visit http://www.google.com/webfonts for instructions on adding additional fonts through css.

Fonts Options Pane

Appdev comes with extraordinary amount of customizations for colors. Most of these options helps build a custom website for yourself with your custom fonts, custom colors, backgrounds, banners, icons etc.

Choose the right colors for your website to come up with a unique looking site where every element blends well with every other one.

Color Options Pane

Choosing the right backgrounds for your site can greatly enhance its appeal. Almost any part of any Appdev page can be customized for its background.

Choose boxed layout for that extra effect when setting custom backgrounds. Most of these are straightforward and online contextual help should explain the purpose of each customization.

Backgrounds Options Pane


Primary and Sticky Menu Options - How to add Navigation Menus to your site. - top

Pls visit WordPress Menu User Guide to know more about how to add menus to WordPress site.

Below you can see options to customize the primary menu shown on the top header of any page -

Primary Menu Options

.

Custom CSS - top

No matter how many font, color and backgrounds you have on the options panel, there is always some custom CSS code that you may like to see applied to achieve that perfect look. Use Custom CSS tab to override or extend every other option, including the styles defined by skins. This Custom CSS is handy when you can't find the option you want or just in a mood to write CSS code instead of choosing an option.

Custom CSS


Portfolio Page Options - How to make Portfolio Entries - top

Appdev provides following page templates for building your portfolio pages as shown below. Use these templates to customize your portfolio pages in the page edit window.

Portfolio Page Templates

You can specify that the excerpts be shown in the Portfolio Pages through the below options.

Portfolio Page Options

You can enter portfolio pages by choosing to add Portfolio Custom Post Type in the Portfolio Admin Panel as shown below

Portfolio Admin Panel

More precise instructions on portfolio entry below -

If you want to add a new portfolio item, follow the steps below:
  1. Click "Add New" in the "Portfolio" panel.

    Portfolio Page Entry

  2. Portfolio thumbnail is specified by Featured Image function of WordPress. Go here to see how to set a Featured Image for a post, page or a custom post type in WordPress.
  3. Then specify the title, and add content to the rich text editor. You can also provide excerpt through to the Excerpt textarea for display in the portfolio page.
  4. Once you have done, click Publish button.

Portfolio Page Entered


How to Add Slides for Sliders - top

The Slider options panels for each of the slider types are self-explanatory. To display Nivo or Flex sliders, slider entries of custom post type named "Showcase Slides" that corresponds to a slider have to be created before Nivo or Flex Sliders can be displayed.

To create a page with sliders on the top, you just need to choose the desired options in the Page Edit window as seen below

The specific slider to be displayed can be chosen in the "Display Slider and Remove Title Header" dropdown provided in the Page Edit window as seen in the below screenshot. The title header for the page is automatically disabled when a slider is chosen for a page.

Page Creation with Slider

The data and images required for the Sliders are sourced as explained below. This provides for rich customization of the site with the option to showcase multiple types of data on the website.

Revolution Slider:

The Revolution Slider is installed as a plugin into WordPress. Pls read plugin install guide for instructions on how to install plugins into WordPress. The Revolution Slider is bundled with the theme as a separate zip file or can be installed by following the prompts displayed in the WordPress admin by the theme to install revolution slider plugin.

To display Revolution Slider on your site, follow the below steps -

  1. Create a new WordPress page and choose the Revolution Slider as the option
  2. Choose Revolution Slider as the option in the "Display Slider and Remove Title Header" dropdown provided in the Page Edit window as seen in the below screenshot.
  3. Choose specific instance of Revolution Slider as the option in the "Revolution Slider Choice" dropdown provided.

Page Creation with Slider

  1. You can browse through the Revolution Slider documentation on how to use the admin panel for the slider.
  2. Admin Panel for Revolution Slider

  3. The theme comes with import data for the Revolution Slider instance displayed in the live preview page.Do refer to the documentation for Revolution Slider for help on importing the data.

Nivo Slider, FlexSlider

These sliders display posts created of type Showcase Slide custom post type. You will need to create posts of this custom post type in the Showcase Slides admin panel.

Showcase Slides

If you want to add a new slide for the Nivo or an Flex slider, here are the steps:

  1. Click "Add New Slide" in the "Showcase Slides" admin panel.

    Slider Slide Entry

  2. Use the Featured Image function to set the image for the Slide of the Slider. The image size for Flex as well Nivo Slider should be minimum 1920px width and minimum 600px height so as to render the slider images right on wide screens. Click here to see how to set a Featured Image.
  3. Specify the link, description (Showcase Slider Information) , click Publish Button.

Below are the options provided for Nivo sliders.

Flex Slider Options

Flex Slider Option Panel

Nivo Slider Options

Nivo Slider Option Panel


Featured Images function of WordPress is central to specifying thumbnail images posts, portfolio items, slider items etc. If you want to set Featured Image for page, post, or custom post types like portfolio or slider slides, follow the steps below:
  1. Go to Add New or open an existing post in editing mode.
  2. Find the Featured Image section and click the Set featured image link.

    Setting Featured Image for a Portfolio

  3. You will see popup window for uploading an image for inserting into a blog post, page or custom post type or for using this image as featured image on the post, page or custom posts. Follow the on-screen prompts to choose the image from your computer (or better drag and drop the one or more images into the file uploader) and upload it or choose one one of the images already uploaded to your Media Library.
  4. Once the image is uploaded, choose the size of the image, and click on the Use as featured link:

    Set Featured Image

    Close the Set Featured Image window once you’ve chosen the featured image. The image is now available for use wherever the post, portfolio item or slider slide is displayed as in a slider or portfolio page.

Video Options - top

The Video options panel helps set the default height and width for videos and only take effect if custom width and height are not specified within the shortcode itself.

Video Option Panel


Custom Post Types, Shortcodes and Shortcodes Builder - top

Appdev supports a number of custom post types including the ones for pricing table, team members, testimonials and portfolio items. They all come with an easy to use intuitive GUI for input of data and then shortcodes for inserting these post types almost any where you like.

Custom Post Types

Pricing Custom Post Type

Once the data is input in the admin panel for pricing plans (see screenshot below), you may use the shortcode -

[pricing_plans post_count=4 pricing_ids=""]

where pricing_ids is a comma separated list of post ids for pricing custom post type.

Testimonials Custom Post Type

Once the data is input in the admin panel for testimonials, you may use the shortcode -

[responsive_slider type="testimonials2" animation="slide" control_nav="true" direction_nav=false pause_on_hover="true" slideshow_speed=4500]

[testimonials post_count=4 testimonial_ids="234,235,236"]

[/responsive_slider]

The testimonial shortcode need to be wrapped inside [responsive_slider] shortcode to enable slider function. By default, the [testimonials] and [testimonials2] shortcode displays a unordered list (UL element) of testimonial elements which can be styled differently if a slider is not desired. Separating out the slider part also helps control the slider properties like animation speed, slider controls, pause on hover etc. as explained in the documentation for [responsive_slider] shortcode.

The testimonial_ids parameter is a comma separated list of post ids for testimonials custom post type.

Team Custom Post Type

Once the data is input in the admin panel for team members, you may use the shortcode -

[team post_count=4 column_count=4 member_ids=""]

where member_ids is a comma separated list of post ids for team custom post type.

Appdev additionally comes with nearly 70 custom shortcodes that can be used inside your post or page content. The Appdev Live Preview site has many pages listed for demo of shortcodes with their corresponding code and is a good resource for familiarizing yourself with the the shortcodes provided by Appdev. Check for the demo shortcode pages under 'Pages' dropdown menu.

We have documented below a few shortcode whose usage is not apparent at first look or which have not been covered in the preview site shortcode pages

The [segment] shortcode

The [segment] shortcode applies only when developing pages using page sections. If using SiteOrigin Page Builder, ignore this shortcode and use the page builder Row element for function similar to what is provided by this shortcode.

Any full width or home page created in the Appdev theme is divided into multiple segments. The sample data bundled with the theme has examples of many pages broken into multiple full width segments with the help of [segment] shortcode. The [segment] shortcode is used across all home pages and many other full width pages in Appdev. The Appdev theme provides unlimited flexibility when creating full width pages - pages that, by default, span the entire browser/screen width instead of being limited to a 960px or 1140px grid ( typical of any blog influenced WordPress template). The job of the [segment] shortcode is to help provide top and bottom 70px padding between next and previous segment and constrain the segment content width to a 1140px grid while allowing you to set image backgrounds, background patterns or colors that span the entire browser width. You are free to use a custom markup of your choice if you do not want to use [segment] shortcode - like if you want the content to occupy the browser width or if you want a wider/narrower layout.

The [segment] shortcode creates a wrapper HTML element that can take background options and an inner content HTML div element that houses the content constrained to 1140px grid.

Usage:

[segment id="client-testimonials1" class="dark-bg" background_color='#374a4e' style='padding:50px 0;' background_image="http://example.com/background3.jpg" parallax_background="true" background_speed="0.4"]

All parameter values are optional and they are are explained below -

id - The id of the wrapper HTML element created by the segment shortcode.
class - The CSS class of the HTML element wrapping the content.
style - Any inline styling you would like to apply to the segment. You may want to override the default top/bottom padding, provide custom markup for backgrounds etc.
background_image - Provide the URL of the background image. See examples in the sample data provided with the theme. The image supplied is not repeated and is scaled to occupy the entire segment width (same as browser width).
parallax_background - Specify if the background is a parallax one. By default, the parallax background is set to true. On mobile devices and browser window size less than 1100px, the parallax effect is disabled.
background_speed - Speed at which the parallax background moves with user scrolling the page. The default value assigned to this property is 0, which means the background acts like the one whose background-attachment property is set to fixed and hence does not scroll at all. A value of 1 implies the background scrolls with the page in equal increments ( same effect as background-attachment: scroll). To obtain best results, experiment with multiple values to test the parallax effect.
background_pattern - As an alternative to 'background_image' option above, you can provide the URL of the background image which acts like a pattern. This image is repeated horizontally as well as vertically to help occupy the entire segment width (same as browser width).
background_color - The background color to be applied to the segment that spans the entire browser width.

The [contact_form] shortcode

The [contact_form] shortcode is documented below in a separate section.

Shortcodes Builder

You can easily use Shortcodes with the help of Shortcode Builder tool accessible from the WordPress post/page editor.

Shortcode Builder

Simply select the shortcode you would like to use then click "Insert" button to insert the shortcode into the post editor.

Shortcode Builder

Fill in the required details of shortcode attributes on the shortcode entered.


Contact Form Shortcode - top

To add a contact form to your website, first create a blank page and then use Shortcode Builder to add Contact Form shortcode listed under Social Shortcodes. Also see our live preview page for Contact Form shortcode

Usage:

Example shortcode - [contact_form class="contact-form" mail_to="john.doe@example.com" human_check=true phone=true web_url=true subject=true]

Contact Form Shortcode

Enter in the email address to which you want the email to be received. Once the theme is setup, test out the Contact Form functionality. The Contact Form function utilizes wp_mail function to send emails. If emails are not being received, please make sure the contact email entered is the right one and then check with your hosting provider to make sure SMTP and smtp_port have been setup right on your server. Or you can install a Plugin like the Configure SMTP plugin for Wordpress to configure SMTP.

Parameters -

class - Custom CSS class name to be set for the div element created (optional)
mail_to - A string field specifying the recipient email where all form submissions will be received.
web_url - Can be true or false. A boolean indicating that the user should be requested for Web URL via an input field.
phone - Can be true or false. Request for phone number of the user. A phone number field is displayed.
subject - Can be true or false. A mail subject field is displayed if the value is set to true.
human_check - Can be true or false. Displays a small validation box to verify if the information is not being entered by a spam bot.
button_color - Color of the submit button. Available colors are black, blue, cyan, green, orange, pink, red, teal, theme and trans.


Code Shortcode -

Usage:

Wraps the content in HTML tag pre with required class name to enable custom theme styling for source code.

[code]

[one_half]Content[/one_half]

[one_half_last]Another content[/one_half_last]

[/code]

Parameters -

None

Pullquote Shortcodes -

Usage:

[pullquote align="right"]Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.[/pullquote]

Parameters -

align - Can be left, right, center or none. The default is none. (optional).
author - A string indicating author information. (optional)

Blockquote Shortcode -

Usage:

[blockquote align="right" author="Tom Bodett"]They say a person needs just three things to be truly happy in this world: someone to love, something to do, and something to hope for.[/blockquote]

Parameters -

align - Can be left, right, center or none. The default is none. (optional).
id - The element id to be set for the blockquote element created (optional).
style - Inline CSS styling applied for the blockquote element created (optional)
class - Custom CSS class name to be set for the blockquote element created (optional)
author - A string value indicating the author of the quote.
affiliation - The entity to which the author of the quote belongs to.
affiliation_url - The URL of the entity to which this quote is attributed to.

Highlight Shortcodes -

Highlights the text wrapped by the shortcode. Useful for highlighting text. Has two variations - highlight1 and highlight2.

Usage:

[highlight1]Lorem ipsum dolor sit amet, consetetur[/highlight1]
[highlight2]Lorem ipsum dolor sit amet, consetetur[/highlight2]

Parameters -

None

List Shortcode -

A shortcode to create a styled unordered list element UL.

Usage:

[list]

<ul>

<li>Item 1</li>
<li>Item 2</li>

</ul>

[/list]

Parameters -

style - Inline CSS styling applied for the UL element created (optional)
type - Custom CSS class name to be set for the UL element created (optional). Possible values are from list1, list2, list3 to list10. Default is list1.

Heading Shortcodes -


Heading shortcodes are used across all pages in the theme as introductory texts/titles to the page sections.

Usage:


[heading2
title="Connect with us on our <strong>blog</strong>"
pitch="Lorem ipsum dolor sit amet, consectetuer elit. Aenean leo ligula, porttitor eu, consequat vitae. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat"]

Parameters -


style - Inline CSS styling applied for the div element created (optional)
title - A string value indicating the title of the heading.
pitch - The text displayed below the heading title.
separator - boolean (false) - Specify if a separator needs to be inserted between the title and the pitch text (optional)

Wrap Shortcodes -

This shortcode is used to create a DIV wrapper elements for other shortcodes.

Helps to display these elements in the visual editor of WordPress. The regular DIV elements entered in the HTML tab are not visible in the visual editor which leads to mistakes and lost/malformed elements.

Usage:

[ancestor_wrap class="marketing-ancestor"]

[parent_wrap id="marketing-parent"]

[wrap class="marketing-section"]

[one_half]Content[/one_half]

[one_half_last]Another content[/one_half_last]

[/wrap]

[/parent_wrap]

[/ancestor_wrap]

Each of the wrapper shortcodes accept the following parameters

Parameters -

id - The element id to be set for the DIV element created (optional).
style - Inline CSS styling applied for the DIV element created (optional)
class - Custom CSS class name to be set for the DIV element created (optional)

Icon Shortcode -

Shortcode to display one of the font icons, chosen from the list of icons listed at https://www.livemeshthemes.com/faqs/how-to-use-500-icon-fonts-bundled-with-the-theme/

Usage:

[icon class="icon-cart" style="font-size:32px;"]
[icon class="icon-thumbnails" style="font-size:48px;"]

Parameters -

style - Inline CSS styling applied for the icon element created (optional). Useful if you want to specify font-size, color etc. for the icon inline.
class - Custom CSS class name to be set for the icon element created (optional)

Action Call Shortcode -

Useful to create action call segments which typically display a text urging the user to take action and a button which leads to the action.

Usage:

[action_call text="Ready to get started <strong>on your project?</strong></h3>" button_url="http://themeforest.net/user/LiveMesh" button_text="Purchase Now"]

Parameters -

text - Text to be displayed urging for an action call.
button_text - The title to be displayed for the button.
button_color - The color of the button. Available colors are black, blue, cyan, green, orange, pink, red, teal, theme and trans.
button_url - The URL to which the button links to. The user navigates to this URL when the button is clicked.


Usage:

Pls refer to https://www.livemeshthemes.com/appdev/column-shortcodes/

[six_col]One Half[six_col]
[six_col_last]Second Half[six_col_last]

[four_col]One Third[/four_col]
[four_col]One Third[/four_col]
[four_col_last]One Third Last[/four_col_last]

[four_col]One Third[/four_col]
[eight_col_last]Two Third Last[/eight_col_last]

[three_col]One Fourth[/three_col]
[three_col]One Fourth[/three_col]
[three_col]One Fourth[/three_col]
[three_col_last]One Fourth Last[/three_col_last]

[three_col]One Fourth[/three_col]
[nine_col_last]Three Fourth Last[/nine_col_last]

[two_col]One Sixth[/two_col]
[two_col]One Sixth[/two_col]
[two_col]One Sixth[/two_col]
[two_col]One Sixth[/two_col]
[two_col]One Sixth[/two_col]
[two_col_last]One Sixth Last[/two_col_last]

[two_col]One Sixth[/two_col]
[ten_col_last]Five Sixth Last[/ten_col_last]

Parameters -

id - The element id to be set for the div element created (optional).
style - Inline CSS styling applied for the div element created (optional)
class - Custom CSS class name to be set for the div element created (optional)

Usage:

[button id="purchase-button" style="padding: 10px 20px;" color="green" type="rounded" size="large" href="http://targeturl.com" align="left" target="_blank"]Green Button[/button]

Parameters -

id - The button DIV element id (optional).
style - Inline CSS styling (optional)
class - Custom CSS class name (optional)
color - Color of the button. Available colors are black, blue, cyan, green, orange, pink, red, teal, theme and trans.
align - Alignment of the button and text alignment of the button title displayed.
type - Can be large, small or rounded.
href - The URL to which button should point to. The user is taken to this destination when the button is clicked.
target - The HTML anchor target. Can be _self (default) or _blank which opens a new window to the URL specified when the button is clicked.


Image Shortcode -

Displays an image with the optional attributes.

Usage:


See examples at https://www.livemeshthemes.com/appdev/image-shortcodes/

[image link="true" title="Visit Mountain Lion Page" src="http://example.com/lion.jpg" alt="Mountain Lion" align="left" image_frame="true" wrapper="true" wrapper_class="image-bordered" wrapper_style="margin-top: 20px;" width="320" height="240"]

[image link="true" title="Visit Mountain Lion Page" src="http://example.com/lion.jpg" alt="Mountain Lion" align="left" image_frame="true" wrapper="true" wrapper_class="image-bordered" size="large"]

Parameters -


link - Specify if the image should be a link.
title - The title of the link to which image points to.
type - The CSS class of the IMG element created.
src - The URL of the image. An IMG element will be created for this image and the image will be cropped and styled as per the parameters provided.
alt - The alt text for the image.
align - The alignment - left, right, center or none for the image element.
image_frame - A boolean value specifying if the image should be wrapped in a frame and this frame can be styled by the theme.
wrapper - A boolean value indicating if the a wrapper DIV element needs to be created for the image.
wrapper_class - The CSS class for any wrapper DIV element created for the image.
wrapper_style - The inline CSS styling for any wrapper DIV element created for the image.
width - Any custom width specified for the element. The original image (pointed to by the src parameter) will be cropped to this width.
height - Any custom height specified for the element. The original image (pointed to by the src parameter) will be cropped to this height.
size - Takes effect if no custom width or height is specified. Can be mini, small, medium, large, full, square. The original image (pointed to by the src parameter) is cropped to the size specified.

HTML5 Audio Shortcode -

Displays a HTML5 audio clip with controls.

Usage:

[html5_audio ogg_url="http://mydomain.com/song.ogg" mp3_url="http://mydomain.com/song.mp3" ]

Parameters -

ogg_url - The URL of the audio clip uploaded in OGG format.
mp3_url - The URL of the audio clip uploaded in MP3 format.


Appdev supports a number of custom post types including the ones for pricing table, team members, testimonials and portfolio items. They all come with an easy to use intuitive GUI for input of data and then shortcodes for inserting these post types almost any where you like.

Custom Post Types

Pricing Custom Post Type

Once the data is input in the admin panel for pricing plans (see screenshot below), you may use the shortcode below to display the pricing table with the columns drawn from the pricing information provided by creating a custom post type named pricing.

Usage:

[pricing_plans post_count=4 pricing_ids="234,235,236"]

Parameters -

post_count - The number of pricing columns to be displayed. By default displays all of the custom posts entered as pricing in the Pricing Plan tab of WordPress admin (optional).
pricing_ids - A comma separated post ids of the pricing custom post types created in the Pricing Plan tab of WordPress admin. Helps to filter the pricing plans for display (optional).

Testimonials Custom Post Type

Once the data is input for testimonials by creating Testimonial custom post types in the Testimonials tab of the WordPress Admin, you may use the shortcode below to display a slider of testimonials. These testimonials are entered by .

Usage:

[responsive_slider type="testimonials2" animation="slide" control_nav="true" direction_nav=false pause_on_hover="true" slideshow_speed=4500]

[testimonials post_count=4 testimonial_ids="234,235,236"]

[/responsive_slider]

The testimonial shortcode need to be wrapped inside [responsive_slider] shortcode to enable slider function. By default, the [testimonials] and [testimonials2] shortcode displays a unordered list (UL element) of testimonial elements which can be styled differently if a slider is not desired. Separating out the slider part also helps control the slider properties like animation speed, slider controls, pause on hover etc. as explained in the documentation for [responsive_slider] shortcode.

Parameters -

post_count - The number of testimonials to be displayed. By default displays all of the custom posts entered as testimonial in the Testimonials tab of the WordPress Admin (optional).
testimonial_ids - A comma separated post ids of the Testimonial custom post types created in the Testimonials tab of the WordPress Admin. Helps to filter the testimonials for display (optional).

Team Custom Post Type

Once the data is input in the admin panel for team members for creating Team custom post types in the Team Profiles tab of the WordPress Admin, you may use the [team] shortcode to display a list of team members entered.

Usage:

[team post_count=6 column_count=3 member_ids="123,234,456,876,654,321"]

Parameters -

post_count - Number of team members to display if the query returns more than the specified number (optional).
column_count - The number of columns for each row of team members shown.
member_ids - The custom post ids of the member profiles to be displayed. (optional).


Recent Posts Shortcode -

Displays the most recent blog posts sorted by date of posting.

Usage:

[recent_posts post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]

Parameters -

post_count - 5 (number) - Number of posts to display
hide_thumbnail false (boolean) - Display thumbnail or hide the same.
show_meta - false (boolean) Display meta information like the author, date of publishing and number of comments.
excerpt_count - 50 (number) The total number of characters of excerpt to display.
image_size - small (string) - Can be mini, small, medium, large, full, square.

Popular Posts Shortcode -

Displays the most popular blog posts. Popularity is based on by number of comments posted on the blog post. The higher the number of comments, the more popular the blog post.

Usage:

[popular_posts post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]

Parameters -

post_count - 5 (number) - Number of posts to display
hide_thumbnail false (boolean) - Display thumbnail or hide the same.
show_meta - false (boolean) Display meta information like the author, date of publishing and number of comments.
excerpt_count - 50 (number) The total number of characters of excerpt to display.
image_size - small (string) - Can be mini, small, medium, large, full, square.

Category Posts Shortcode -

Displays the blog posts belonging to one or more categories.

Usage:

[category_posts category_slugs="nature,lifestyle" post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]

Parameters -

category_slugs - (string) The comma separated list of category slugs whose posts need to be displayed.
post_count - 5 (number) - Number of posts to display
hide_thumbnail false (boolean) - Display thumbnail or hide the same.
show_meta - false (boolean) Display meta information like the author, date of publishing and number of comments.
excerpt_count - 50 (number) The total number of characters of excerpt to display.
image_size - small (string) - Can be mini, small, medium, large, full, square.

Tag Posts Shortcode -

Displays the blog posts with one or more tags specified as a parameter to the shortcode.

Usage:

[tag_posts tag_slugs="growth,motivation" post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]

Parameters -

tag_slugs - (string) The comma separated list of tag slugs whose posts need to be displayed.
post_count - 5 (number) - Number of posts to display
hide_thumbnail false (boolean) - Display thumbnail or hide the same.
show_meta - false (boolean) Display meta information like the author, date of publishing and number of comments.
excerpt_count - 50 (number) The total number of characters of excerpt to display.
image_size - small (string) - Can be mini, small, medium, large, full, square.

Custom Post Types Shortcode -

Displays the posts of one or more custom post types.

Usage:

[show_custom_post_types post_types="portfolio,post" post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]

Parameters -

post_types - post (string) The comma separated list of post types whose posts need to be displayed.
post_count - 5 (number) - Number of posts to display
hide_thumbnail false (boolean) - Display thumbnail or hide the same.
show_meta - false (boolean) Display meta information like the author, date of publishing and number of comments.
excerpt_count - 50 (number) The total number of characters of excerpt to display.
image_size - small (string) - Can be mini, small, medium, large, full, square.


Post Snippets Shortcode -

See https://www.livemeshthemes.com/appdev/portfolio-shortcodes/ ‎for examples.

Displays the post snippets of blog posts or another custom post types with featured images. The post snippets are displayed in a grid fashion like a typical portfolio page or grid based blog page.

The number_of_columns parameter helps decide on the number of columns of posts/custom post types to display for each row displayed. Total number of posts displayed is derived from post_count parameter value.

This shortcode is quite powerful when used with custom post types and with filters based on custom taxonomy/terms specified as arguments.

Usage:

[show_post_snippets layout_class="rounded-images" post_type="portfolio" number_of_columns=3 post_count=6 image_size='medium' excerpt_count=100 display_title="true" display_summary="true" show_excerpt="true" hide_thumbnail="false"]

With taxonomy and terms specified, the portfolio items can be drawn from a specific portfolio category as shown below.

[show_post_snippets number_of_columns=3 post_count=6 image_size='large' terms="inspiration,technology" taxonamy="portfolio_category" post_type="portfolio"]

Parameters -

post_type - (string) The custom post type whose posts need to be displayed. Examples include post, portfolio, team etc.
post_count - 4 (number) - Number of posts to display
image_size - medium (string) - Can be mini, small, medium, large, full, square.
title - (string) Display a header title for the post snippets.
layout_class - (string) The CSS class to be set for the list element (UL) displaying the post snippets. Useful if you need to do some custom styling of our own (rounded, hexagon images etc.) for the displayed items.
number_of_columns - 4 (number) - The number of columns to display per row of the post snippets
display_title - false (boolean) - Specify if the title of the post or custom post type needs to be displayed below the featured image
display_summary - false (boolean) - Specify if the excerpt or summary content of the post/custom post type needs to be displayed below the featured image thumbnail.
show_excerpt - true (boolean) - Display excerpt for the post/custom post type. Has no effect if display_summary is set to false. If show_excerpt is set to false and display_summary is set to true, the content of the post is displayed truncated by the WordPress tag. If more tag is not specified, the entire post content is displayed.
excerpt_count - 100 (number) - Applicable only to excerpts. The excerpt displayed is truncated to the number of characters specified with this parameter.
hide_thumbnail false (boolean) - Display thumbnail image or hide the same.
show_meta - false (boolean) Display meta information like the author, date of publishing and number of comments.
excerpt_count - 100 (number) The total number of characters of excerpt to display.
taxonamy - (string) Custom taxonomy to be used for filtering the posts/custom post types displayed.
terms - (string) The terms of taxonomy specified.

Rounded Post Snippets Shortcode -

Displays rounded post thumbnails for portfolio or blog items with featured image set for them.

See https://www.livemeshthemes.com/appdev/portfolio-shortcodes/ ‎for examples.

Displays the post snippets of blog posts or another custom post types with featured images. The post snippets are displayed in a grid fashion like a typical portfolio page or grid based blog page.

The number_of_columns parameter helps decide on the number of columns of posts/custom post types to display for each row displayed. Total number of posts displayed is derived from post_count parameter value.

This shortcode is quite powerful when used with custom post types and with filters based on custom taxonomy/terms specified as arguments.

Usage:

[show_post_snippets layout_class="rounded-images" post_type="portfolio" number_of_columns=3 post_count=6 image_size='medium' excerpt_count=100 display_title="true" display_summary="true" show_excerpt="true" hide_thumbnail="false"]

With taxonomy and terms specified, the portfolio items can be drawn from a specific portfolio category as shown below.

[show_rounded_post_snippets number_of_columns=3 post_count=6 terms="inspiration,technology" taxonamy="portfolio_category" post_type="portfolio"]

Parameters -

post_type - (string) The custom post type whose posts need to be displayed. Examples include post, portfolio, team etc.
post_count - 4 (number) - Number of posts to display
title - (string) Display a header title for the post snippets.
number_of_columns - 4 (number) - The number of columns to display per row of the post snippets
taxonamy - (string) Custom taxonomy to be used for filtering the posts/custom post types displayed.
terms - (string) The terms of taxonomy specified.

Show Portfolio shortcode -

Helps to display a portfolio page style display of portfolio items with JS powered portfolio category filter. Packed layout option is also available.

Usage:

[show_portfolio number_of_columns=4 post_count=12 image_size='small' filterable=true]

Parameters -

post_count - 9 (number) - Total number of portfolio items to display
number_of_columns - 3 (number) - The number of columns to display per row of the portfolio items
image_size - medium (string) - Can be mini, small, medium, large, full, square.
filterable - true (boolean) The portfolio items will be filterable based on portfolio categories if set to true.


Responsive Slider Shortcode -

Use this shortcode to create a slider out of any HTML content. All it requires a UL element with children to show.

Usage:

[responsive_slider type="testimonials2" animation="slide" control_nav="true" direction_nav=false pause_on_hover="true" slideshow_speed=4500]

<ul>
<li>Slide 1 content goes here.</li>
<li>Slide 2 content goes here.</li>
<li>Slide 3 content goes here.</li>
</ul>

[/responsive_slider]

Parameters -

type (string) - Constructs and sets a unique CSS class for the slider. (optional).
slideshow_speed - 5000 (number). Set the speed of the slideshow cycling, in milliseconds
animation_speed - 600 (number). Set the speed of animations, in milliseconds.
animation - fade (string). Select your animation type, "fade" or "slide".
pause_on_action - true (boolean). Pause the slideshow when interacting with control elements, highly recommended.
pause_on_hover - true (boolean). Pause the slideshow when hovering over slider, then resume when no longer hovering.
direction_nav - true (boolean). Create navigation for previous/next navigation? (true/false)
control_nav - true (boolean). Create navigation for paging control of each slide? Note: Leave true for manual_controls usage.
easing - swing (string). Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
loop - true (boolean). Should the animation loop?
slideshow - true (boolean). Animate slider automatically without user intervention.
style - (string) - The inline CSS applied to the slider container DIV element.

Device Slider Shortcode -


Use this shortcode to create a image slider part of a container that looks like a smartphone. Possible sliders are

[smartphone_slider], [iphone_slider], [galaxys4_slider], [htcone_slider].

The image URLs are provided via a comma separated list of URLs pointing to the images.

Usage:

[smartphone_slider
device="nexus6p"
animation="fade"
direction_nav=true
control_nav=false
slideshow_speed=4000
animation_speed=600
pause_on_action=true
pause_on_hover=true
easing="swing"
style="margin-bottom:20px;"
image_urls="https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide3.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide1.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide2.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide4.jpg"]

[galaxys4_slider
animation="fade"
image_urls="https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide3.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide1.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide2.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide4.jpg"]

[htcone_slider
animation="fade"
image_urls="https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide3.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide1.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide2.jpg,https://www.livemeshthemes.com/agile/wp-content/uploads/2014/03/web-slide4.jpg"]

Parameters -

style - (string) - The inline CSS applied to the slider container DIV element.
device - iphone (string) - The device type - valid values are iphone, iphone7rosegold, iphone7gold, iphone7silver, iphone7black, iphone7jetblack, googlepixelsilver, googlepixelblue, googlepixelblack, nexus6p, galaxys7, galaxys4, htcone.
slideshow_speed - 5000 (number). Set the speed of the slideshow cycling, in milliseconds
animation_speed - 600 (number). Set the speed of animations, in milliseconds.
animation - fade (string). Select your animation type, "fade" or "slide".
pause_on_action - true (boolean). Pause the slideshow when interacting with control elements, highly recommended.
pause_on_hover - true (boolean). Pause the slideshow when hovering over slider, then resume when no longer hovering.
direction_nav - true (boolean). Create navigation for previous/next navigation? (true/false)
control_nav - true (boolean). Create navigation for paging control of each slide? Note: Leave true for manual_controls usage.
easing - swing (string). Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
loop - true (boolean). Should the animation loop?
image_urls (string) - Comma separated list of URLs pointing to the images.


Social List Shortcode -

Displays a list of social icons with links to various social network pages.

Usage:

[social_list googleplus_url="http://plus.google.com" facebook_url="http://www.facebook.com" twitter_url="http://www.twitter.com" youtube_url="http://www.youtube.com/" linkedin_url="http://www.linkedin.com" include_rss="true"]

Parameters -

email - The email address to be used.
facebook_url - The URL of the Facebook page.
twitter_url - The URL of the Twitter account.
flickr_url - The URL of the Flickr page.
youtube_url - The URL for the YoutTube channel.
linkedin_url - The URL for the LinkedIn profile.
googleplus_url - The URL for the Google Plus page.
include_rss - A boolean value(true/false string) indicating that the link to the RSS feed be included. Default is false.
align - Can be left, right, center or none. The default is left. (optional).

Paypal Donate Shortcode -

Lets you display a Paypal donate button wherever you need - inside a post or a page.

Usage:

[donate title="Please Donate to John Smith Foundation" account="email@example.com" display_card_logos="true" cause="Earthquake Relief"]

Parameters -

title - The title of the link that displays the Paypal donate button.
account - The Paypal account for which the donate button is being created.
display_card_logos - A boolean value to specify display of the logo images of the credit cards accepted for Paypal donations
cause - The text indicating the purpose for which the donation is being collected.

Subscribe RSS Shortcode -

Displays a box that lets users invite users to subscribe to the RSS feed for the blog.

Usage:

[subscribe_rss]

Parameters -

None


Tab Group Shortcode -


Creates a list of tabs by converting a group of shortcodes indicating tab title and tab content.

Each tab is displayed with a title and content.

Usage:

[tabgroup]
[tab title="Tab 1"]Tab 1 content goes here.[/tab]
[tab title="Tab 2"]Tab 2 content goes here.[/tab]
[tab title="Tab 3"]Tab 3 content goes here.[/tab]
[/tabgroup]

Parameters -

title - The title of the tab. The content of the tab is derived from content wrapped by the shortcode.

Toggle Shortcode -

Displays a toggle box with content hidden. The content is shown when the toggle is clicked.

Usage:

[toggle type="first" title="Toggle 1"]Toggle 1 content goes here.[/toggle]
[toggle title="Toggle 2"]Toggle 2 content goes here.[/toggle]
[toggle title="Toggle 3"]Toggle 3 content goes here.[/toggle]

Parameters -

type - CSS class name to be assigned to the toggle DIV element created.
title - The title of the toggle.


Box Shortcodes -

Usage:

[success title = 'Congrats!']Your success message[/success]

[success]Your success message without title[/success]

[info]Your info message without title[/info]

[attention]An attention message without title[/attention]

[warning]Your warning message without title[/warning]

[tip]Your tip message without title[/tip]

[info]Your info message without title[/info]

Parameters -

style - Inline CSS styling (optional)
title - Title displayed above the text in bold.

Box Frame Shortcode -

Usage:

[box_frame style="background: #FFF;" width="275px" type="pricing-box" align="center" title="Pet Care" inner_style="padding:20px;"]
Any HTML content goes here - images, lists, text paragraphs, even sliders.
[/box_frame]

Parameters -

style - Inline CSS styling (optional)
type - Class name to be assigned for the box div element. Useful for custom styling.
align - Can be aligned left, right or centered.
title - Title for the box in bold.
width - Custom width of the box. Include px suffix.
inner_style - Inline CSS styling for the inner box (optional)


Divider Shortcodes -

Draws a line or a divider of various kinds depending on the shortcode used.

Usage:

[divider]
[divider_line]
[divider_space]
[divider_fancy]

Parameters -

style - Inline CSS styling applied for the div element created (optional)

Divider Top Shortcode -

Draws a line or a divider with a Back to Top link on the right. The user is smooth scrolled to the top of the page upon clicking the Back to Top link.

Usage:

[divider_top]

Parameters -

None

Clear Shortcode -

Create a DIV element aimed at clearing the layout. Useful to avoid elements wrapping around when using floats.

Usage:

[clear]

Parameters -

None

Header Fancy Shortcode -

Draws a nice looking header with a title displayed in the center and with a line dividing the content.

Usage:

[header_fancy class="header1" style="margin-bottom: 20px;" text="Smartphone Section"]

Parameters -

id - The id to be set for the div element created for custom styling (optional).
style - Inline CSS styling applied for the div element created (optional)
text - The text to be displayed in the center of the header.


Custom Widgets and Sidebars - top

Appdev comes with 9 custom widgets:
  1. Flickr: Displays thumbnails from the Flickr ID specified.
  2. Social Icon: Displays the social media icons .
  3. Contact Form: Displays a contact form.
  4. Contact Info: Displays a contact information.
  5. Popular Posts: Displays the popular posts on your site.
  6. Recent Posts: Displays the popular posts on your site.

Simply drag one of your theme's custom widgets to a sidebar and enter the appropriate settings if needed. Appdev also has several sidebars as shown in the image below.

Twitter Widget: To display tweets, the theme recommends you install the 'Recent Tweets' plugin or use the default widget provided by Twitter itself. Detailed instructions on how to use this widget is here

Instagram Widget: To display your Instagram feeds, the theme recommends you install the 'Brankic Photostream Widget' plugin to display photos from Flickr, Pinterest, Dribbble or Instagram.

Custom Widgets and Sidebars


Template Pages - top

Appdev comes with 15 WordPress template pages that you can select when you edit/publish a page from the “Edit Page” “Attributes” settings box as seen below:

Custom Page Templates

Some of the important ones are:
  1. One Column No Sidebars: This is the page template recommended for building a home page or similar full width pages using SiteOrigin page builder.
    Displays content constrained to 1140px content grid by default. Displays no sidebars. A page created with this template does not span across the entire browser window width (unlike the Full Width template) and hence requires you to use 'Full Width' or 'Full Width Stretched' option in Layout section for the row in SiteOrigin page builder, if you need the background or the content to be stretched to occupy full width of the browser. Displays no sidebars.
  2. Blog: Displays the blog posts on the page. The nature of display- full width, grid, thumbnail etc. can be configured through the options panel as depicted under layout management
  3. Left Sidebar: Displays the theme's sidebar on the left side of the page.
  4. Right Sidebar/Default: Displays the theme's sidebar on the right side of the page - the default layout for a page/post.
  5. Portfolio 3 Columns: Displays the portfolio items in the a 3 column grid. Similar pages available for 2 column and 4 column display of portfolio items.
  6. Single Page Site: (legacy) - Do not use if using SiteOrigin page builder for page development.
    Template for one page sites developed using Legacy Page Sections. Composed of several instances of page section custom post type as explained in the Installation section above. Displays content across full width of the browser window unless you specify the [segment] shortcode (see documentation of the shortcode under shortcodes section) to constrain the content to 1140px centered grid. Displays no sidebars.
  7. Advanced Home Page: (legacy) - Do not use if using SiteOrigin page builder for page development.
    Displays content across full width of the browser window unless you specify the [segment] shortcode (see documentation of the shortcode under shortcodes section) to constrain the content to 1140px centered grid. Displays no sidebars.
  8. Full Width: (legacy) Do not use if using SiteOrigin page builder for page development.
    Displays content across full width of the browser window unless you specify the [segment] shortcode to constrain the content to 1140px centered grid. Displays no sidebars.
To activate one of your theme's page templates simply select it from the drop-down box and then click the “Publish” or “Update” button.

Translate - top

You can learn from here about translating your site into your language. Use the appdev.pot in 'appdev/languages' folder as a template to create .po files. Poedit is the popular free editor for creating .po and the corresponding binary .mo files. Do reach out to us in case you find something that is not translation ready.


500+ Icons and Icon Fonts usage - top

The list of icons bundled with the theme is listed here - Font Icons bundled with Appdev To use the icons, you just insert a markup like

<span class="icon-pencil"></span>
or some prefer
<i class="icon-pencil"></i>
to display the icon.

The above link provides you with the class names to use to display the corresponding icon. These font icons can be styled in CSS for color and size. You can utilize the custom.css file or the Custom CSS tab in the options panel to insert styling information like this -

#my-section i { font-size: 32px; color: #333; }. 

Do look for some examples of the usage in the demo content provided with the theme.

Although I am not going to recommend it, theoretically you can use inline styling as well to scale the icon and color it like this -

<i class="icon-switch" style="color:blue; font-size:48px;"></i>. 

If you cannot insert HTML markup into your content as explained above, you may want to look at the option of using icon sprites or icon images bundled with the theme in the folder [theme directory]/images/icons/icomoon/. The sprites folder has information on icons available in the sprite and the [theme directory]/images/icons/icomoon/sprites.css file has required markup to use these sprites.


Unlimited Sidebars - top

The creation of unlimited custom sidebars is depicted below. Essentially, the custom sidebars are created in the 'Sidebar' options tab in options panel and the user gets to choose the required sidebar in the post/page edit window.

Unlimited Sidebars

The custom sidebars defined will appear in the widgets WP admin page. Drag and drop the required widgets into the sidebars

Custom Sidebar Widgets

In the page/post edit window, choose the custom sidebar of your choice or leave default as the choice to help theme defined widgets panels to take effect.

Specifying Custom Sidebars


Custom Titles and Headers for pages/posts - top

Appdev offers unlimited flexibility in creating a custom header for a page/post. The above the fold content for any page/post can be configured through custom content by specifying the required markup and/or backgrounds through the input boxes provided in the page/post edit window in the WordPress admin panel as shown below. You may use [segment] shortcode to constrain the headings to a 1140px centered grid.

Custom Headers for Posts/Pages

Site Configuration with Legacy Page Sections - top

Prior to 3.1 version, all page development was done through page sections and is no longer recommended but will continue to be supported for existing users. This section exists as a reference for those who have their site setup using page sections.

If you are starting to build a site, we recommend you use SiteOrigin page builder for development instead of page sections.

If you import the sample data, all the required pages including home pages, page sections part of these pages, portfolio entries are all created for you. If you need to know about how the initial site configuration works with Appdev, this section can help you. Some of these steps are covered in the video tutorial.

Appdev can function as a multi-page or as a single page or as popularly known, an one page theme. Prior to v3.1, Appdev was built on the concept of page sections to make building a site of either type easier.

Step 1: Create Page Sections that go into the your single page. Page section custom post type is meant for acting as individual units/sections that make up a typical one page site home page. Navigation menu on the top house internal links to these page sections helping to navigate the site.

Appdev theme framework lets you any any number of page sections and you can actually compose multiple one page instance in your site by using these page sections. More on that later.

Page Section Edit for Single Page

After your create page sections, make sure you set the value of Order attribute for each of the page sections as shown in the above screenshot to indicate the order in which these sections are laid out in the single page. The page sections are placed one below the other in a single page template in the order of increasing/ascending value of Order attribute. Hence, pages with higher values of order go into bottom section of the page while the pages with lower numbers starting with zero value make the top sections of the one page template.

If managing the order of the page sections seems cumbersome, we recommend that you install the popular Post Types Order plugin to make your job easier.

Step 2: Once you have the page sections ready, add a new page with page template of type 'Single Page Site'.

You then choose the Page sections that go into the single page by selecting the page sections under "Single Page Options" side panel in the Page Edit window below as shown in the screenshot below.

Single Page Options Panel

Step 3: Make this page the home page by choosing it as one in the 'Settings->Reading' tab.

Set Home Page

Step 4: Use the WordPress menu to populate the top navigation menu in Appearance->Menus tab in the WordPress admin. Make sure you setup one of the menus as the primary menu for the site and also make sure setup all internal links to page sections inside a single page manually.

WordPress Menu Setup for Single Page

Step 5: To set custom background for pages/posts/portfolio items, navigate to Theme Options->Backgrounds tab and change the options for 'Background for Title Header Area' as seen the screenshot below. You can adjust the height of the background as well using the available option 'Height of Top Title Area'.

Custom Headers for Posts/Pages/Portfolio

Once you have the page created and set as home page, page sections created and options set for which sections go into the one page home, just open the home page to verify that the page does contain the desired sections and the chosen navigation is displayed at the top of the page.

You now have a small working site setup now. With the help of page sections you can now continue developing your site in an incremental/iterative fashion.

Multiple Single Pages in a site

To create multiple single pages, you will need to create another page with the page template 'Single Page Site' and then in the page edit window, choose the page sections that go into this page. These one page "sub-pages" or page sections help you create multiple one page templates to showcase multiple products or multiple aspects of your business in a single wordpress installation.

Since each of these sub-pages have page sections of their own, you can create a custom menu in the WordPress Appearances -> Menus window and configure a custom WP menu for a page. The theme provides a dropdown for choosing a custom menu in the page edit window (see bottom of the screenshot below).

In order to save time replicating some of the menu items in the primary menu in custom menu, you can use the Duplicate Menu plugin to duplicate the primary menu used for home page and then start customizing it to meet the needs of another One Page (Single Page) template page.

Single Page Options Panel

Important - Migrating to v3.1 from versions v3.0 and below - top

If you are migrating an existing site running on v3.0 and below of Appdev to v3.1+, you must perform these simple steps to setup sliders and menus for the home page or other single page style pages. Depending on how you have setup your site, the whole exercise should take not more than 5-10 min.

Step 1: - If you did setup the slider and page sections from theme options earlier, you will need to repeat the setup from Page Edit window as seen below. Setting up sliders/page sections from theme options, auto-built menu functions are no longer part of Appdev 3.1 to help achieve greater flexibility, simplify the theme functions and provide more maintainable features.

Choose the slider of your choice in Page Edit window under Advanced Entry Options or choose 'None' if you need to disable sliders altogether.

If you have choose 'None' as your slider choice, you may want to remove title header for the single page. Check the option 'Remove Title Header' in the page edit window under 'Advanced Entry Options' as seen in the screenshot below.

Single Page Options Panel

Step 2: - In the page edit window, choose the page sections for the page including the one set as home page. In earlier versions, one could specify page sections part of home page from the theme options panel and in v3.1 this function has been removed to make theme more flexible by handling selection at individual page level.

Step 3: If you had setup the site earlier using auto-built menu, you need setup the menu manually using the WordPress menu to populate the top navigation menu in Appearance->Menus tab in the WordPress admin. Make sure you setup one of the menus as the primary menu for the site and also make sure setup all internal links to page sections inside a single page manually. Auto-built menu feature is no longer part of the theme.

After you configure the menu in Appearance->Menus, you can set a custom menu for a page in the Page Edit window under Advanced Entry Options.

WordPress Menu Setup for Single Page


Again, thank you so much for purchasing our theme. We will be glad to help, resolve issues for you, answer your questions and plan to provide updates to you. Since Appdev is built on common framework, we expect that any updates we do for any of our themes will be released as a framework update for all of our themes. For more general questions on WordPress or on ThemeForest themes, do visit the active forums maintained by them.

LiveMesh

Go To Table of Contents