Created: 05/24/2013
By: LiveMesh Email: Use my ThemeForest profile pageThank 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!
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.
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.
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.
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.
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.
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.
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'.
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.
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.
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.
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).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.
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.
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.
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.
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.
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 -
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.
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.
You can enter portfolio pages by choosing to add Portfolio Custom Post Type in the Portfolio Admin Panel as shown below
More precise instructions on portfolio entry below -
If you want to add a new portfolio item, follow the steps below:Click "Add New" in the "Portfolio" panel.
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.
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 -
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.
If you want to add a new slide for the Nivo or an Flex slider, here are the steps:
Click "Add New Slide" in the "Showcase Slides" admin panel.
Below are the options provided for Nivo sliders.
Flex Slider Options
Nivo Slider Options
Find the Featured Image section and click the Set featured image link.
Once the image is uploaded, choose the size of the image, and click on the Use as featured link:
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.
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.
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.
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.
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 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.
[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 is documented below in a separate section.
You can easily use Shortcodes with the help of Shortcode Builder tool accessible from the WordPress post/page editor.
Fill in the required details of shortcode attributes on the shortcode entered.
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
Example shortcode - [contact_form class="contact-form" mail_to="john.doe@example.com" human_check=true phone=true web_url=true subject=true]
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.
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.
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]
None
[pullquote align="right"]Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.[/pullquote]
align - Can be left, right, center or none. The default is none. (optional).
author - A string indicating author information. (optional)
[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]
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.
Highlights the text wrapped by the shortcode. Useful for highlighting text. Has two variations - highlight1 and highlight2.
[highlight1]Lorem ipsum dolor sit amet, consetetur[/highlight1]
[highlight2]Lorem ipsum dolor sit amet, consetetur[/highlight2]
None
A shortcode to create a styled unordered list element UL.
[list]
<ul><li>Item 1</li>
<li>Item 2</li>
[/list]
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.
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)
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.
[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
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)
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/
[icon class="icon-cart" style="font-size:32px;"]
[icon class="icon-thumbnails" style="font-size:48px;"]
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)
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.
[action_call text="Ready to get started <strong>on your project?</strong></h3>" button_url="http://themeforest.net/user/LiveMesh" button_text="Purchase Now"]
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)
Displays an image with the optional attributes.
[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"]
Displays a HTML5 audio clip with controls.
[html5_audio ogg_url="http://mydomain.com/song.ogg" mp3_url="http://mydomain.com/song.mp3" ]
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.
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.
[pricing_plans post_count=4 pricing_ids="234,235,236"]
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).
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 .
[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.
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).
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.
[team post_count=6 column_count=3 member_ids="123,234,456,876,654,321"]
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).
Displays the most recent blog posts sorted by date of posting.
[recent_posts post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]
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.
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.
[popular_posts post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]
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.
Displays the blog posts belonging to one or more categories.
[category_posts category_slugs="nature,lifestyle" post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]
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.
Displays the blog posts with one or more tags specified as a parameter to the shortcode.
[tag_posts tag_slugs="growth,motivation" post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]
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.
Displays the posts of one or more custom post types.
[show_custom_post_types post_types="portfolio,post" post_count=5 hide_thumbnail="false" show_meta="false" excerpt_count=70 image_size="small"]
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.
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.
[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"]
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.
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.
[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"]
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.
Helps to display a portfolio page style display of portfolio items with JS powered portfolio category filter. Packed layout option is also available.
[show_portfolio number_of_columns=4 post_count=12 image_size='small' filterable=true]
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.
Use this shortcode to create a slider out of any HTML content. All it requires a UL element with children to show.
[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]
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.
[smartphone_slider], [iphone_slider], [galaxys4_slider], [htcone_slider].
The image URLs are provided via a comma separated list of URLs pointing to the images.
[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"]
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.
Displays a list of social icons with links to various social network pages.
[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"]
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).
Lets you display a Paypal donate button wherever you need - inside a post or a page.
[donate title="Please Donate to John Smith Foundation" account="email@example.com" display_card_logos="true" cause="Earthquake Relief"]
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.
Displays a box that lets users invite users to subscribe to the RSS feed for the blog.
[subscribe_rss]
None
Each tab is displayed with a title and content.
[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]
title - The title of the tab. The content of the tab is derived from content wrapped by the shortcode.
Displays a toggle box with content hidden. The content is shown when the toggle is clicked.
[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]
type - CSS class name to be assigned to the toggle DIV element created.
title - The title of the toggle.
[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]
style - Inline CSS styling (optional)
title - Title displayed above the text in bold.
[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]
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)
Draws a line or a divider of various kinds depending on the shortcode used.
[divider]
[divider_line]
[divider_space]
[divider_fancy]
style - Inline CSS styling applied for the div element created (optional)
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.
[divider_top]
None
Create a DIV element aimed at clearing the layout. Useful to avoid elements wrapping around when using floats.
[clear]
None
Draws a nice looking header with a title displayed in the center and with a line dividing the content.
[header_fancy class="header1" style="margin-bottom: 20px;" text="Smartphone Section"]
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.
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.
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:
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.
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.
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.
The custom sidebars defined will appear in the widgets WP admin page. Drag and drop the required widgets into the sidebars
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.
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.
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.
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.
Step 3: Make this page the home page by choosing it as one in the 'Settings->Reading' tab.
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.
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'.
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.
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.
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.
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.
LiveMesh
Go To Table of Contents
Social Shortcodes