apps
Content
PROTHEMEUS.
“Appster” WordPress Theme Documentation
Page 1
A Quick Thank You!
Dear customer, My name is Paul Victor and I am the founder of Prothemeus.com. Before we get to the theme documentation, I would like to personally thank you for supporting Prothemeus. This document has been created as a general theme guide and as such can be used for various other Prothemeus WordPress themes. I have tried to write it as detailed as possible to avoid wasting your time. If you still have questions about the use of this template, please send an email to [email protected] or refer to the website www.prothemeus.com to find more information. With best regards, Paul Victor
- Founder of Prothemeus.com
Page 2
Table of Contents
1. Getting Started
- 1.1 Installation ..................................................................................................................................................4
- 1.2 Setting up the Homepage...........................................................................................................................4 • 1.2.1 Adding Slides to the Homepage.......................................................................................................4 • 1.2.2 Homepage Widget Areas ................................................................................................................5
- 1.3 Setting up the Blog.....................................................................................................................................5 - 1.4 Setting up the Portfolio...............................................................................................................................5
• 1.4.1 Adding Portfolio Items.....................................................................................................................5 • 1.4.2 Adding Portfolio Categories .............................................................................................................5
2. Theme Features
- 2.1 Custom Menus ...........................................................................................................................................6 - 2.2 Theme Options...........................................................................................................................................6
• 2.2.1 Basic Settings................................................................................................................................6 • 2.2.2 Home Settings ...............................................................................................................................6 • 2.2.3 Portfolio Settings............................................................................................................................6
- 2.3 Custom Widgets.........................................................................................................................................6
• 2.3.1 Popular Posts ................................................................................................................................6 • 2.3.2 Recent Posts .................................................................................................................................6 • 2.3.3 Latest Tweets.................................................................................................................................6 • 2.3.4 Flickr ............................................................................................................................................7 • 2.3.2 Testimonials...................................................................................................................................7
- 2.4 Shortcodes .................................................................................................................................................7 - 2.5 Custom Page Templates ............................................................................................................................8
• 2.5.1 Full Width Template........................................................................................................................8 • 2.5.2 Home Template..............................................................................................................................8 • 2.5.3 Portfolio Template...........................................................................................................................8
- 2.6 Custom Login Logo & Gravatar..................................................................................................................8 - 2.7 Featured Images ........................................................................................................................................8
3. Theme Files
- 3.1 Cascading Style Sheets .............................................................................................................................9 - 3.2 JavaScript File............................................................................................................................................9 - 3.3 Photoshop Files .........................................................................................................................................9
Page 3
1. Getting Started To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex. - 1.1 Installation Open the .zip package which you have downloaded and locate the two zip files called “appster” and “appster-child”. Log in to your WordPress admin area and navigate to Appearance > Themes > Upload. First upload the “appster” zip file, once this is complete repeat the process for the “appster-child” zip file. Now go to Appearance > Themes and find the Appster Child theme and activate it. - 1.2 Setting up the Homepage To set up the homepage you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title and some content. Select the “Home” template from the Page Attributes section and click “Publish”. Once you have created your new page which uses the “home” page template, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your front page. Your homepage is now created and can be viewed by visiting your root URL. You can configure the display of the homepage by visiting the theme options panel.
• 1.2.1 Adding Slides to the Homepage The homepage features a slider into which you can insert your own content. To add a new slide to the slider, navigate to Slides > Add New and give your slide a title and excerpt. You will also need to set a featured image. There are three different types of slides you can create. The first being a slide with a title, content and featured image.
This slide will be displayed with the image to the right and the title and content to the left. You can also create a slide with just a featured image and title. This will make the image fullwidth, the title is just for your benefit. The last type of slide you can create is a full widget content slide, simply create a title and add content but leave out the featured image.
Page 4
• 1.2.2 Homepage Widget Areas The homepage sections directly below the slider are controlled by widgets. To customize these widget areas go to Appearance > Widgets. There is also a bottom homepage widget area.
- 1.3 Setting up the Blog To set up the blog, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “blog” yet you do not have to include any content. Click “Publish”. Once you have created your new page, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your posts page. Your blog index is now created and can be viewed by visiting the page you just published. - 1.4 Setting up the Portfolio To set up the portfolio section, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page any title that you might find relevant. Select the “Portfolio” template from the Page Attributes section and click “Publish”. The main portfolio section can now be viewed by visiting the page you just created.
• 1.4.1 Adding Portfolio Items To add a new portfolio item, navigate to Portfolio > Add New. Here you can add a brief description of the project, an excerpt, assign various categories and upload images. The excerpt is an important piece of each post as it is displayed on the thumbnails in the portfolio, ensure you create a short, punchy excerpt for each.
When adding multiple images to a single portfolio post, simply click the upload icon and upload all of your images to that post. Nothing else is needed. A featured image is needed for the thumbnail. You can also optionally configure your portfolio post with some additional options such as making it featured (which in turn will make it display larger on your portfolio page).
• 1.4.2 Adding Portfolio Categories If you wish to categorise your portfolio items, you can assign portfolio categories. A portfolio category is similar to a post category and assigning them will make the portfolio section filterable by the end user. You can create new portfolio categories by navigating to Portfolios > Categories or they can be created from the portfolio item creation page.
2. Theme Features The theme comes packed with features that control the layout and extend the functionality of WordPress. This section will document those features and how to use them successfully.
Page 5
- 2.1 Custom Menus If you using WordPress 3.0+ you can setup custom menus to configure your site’s navigation. The theme comes with two custom menu locations called “Primary Menu” and “Footer Menu”. Setting up custom menus To setup your custom menus, navigate to Appearance > Menus. Give your menu a name and build it up using the available widgets. You can add a variety of items including pages, categories, custom links. To extend the available widgets, click the screen options tab at the very top of the screen and configure your options. Once you have built and saved your menu, simply select the theme location using the widget on the left. Under “Primary Navigation”, select your custom menu from the drop down list to use it as the site’s main navigation. - 2.2 Theme Options The theme comes with a simple to use administration panel. You can access it by navigating to Appearance > Theme Options. The theme options are conveniently spread over a number of tabs and each tab contains the options that pertain to a particular area of the theme.
• 2.2.1 Basic Settings As the label suggests, these general options allow you to configure your site’s setup. Here you have options to upload your own logo and select a skin amongst others.
• 2.2.2 Home Settings Here you can enable widget areas and configure the slider.
• 2.2.3 Portfolio Settings Here you can configure how many related posts you want to show and select the page you’re using as the port folio page.
- 2.3 Custom Widgets The theme comes with 5 custom widgets that can be used to configure how your site displays content - they can be found under Appearance > Widgets.
• 2.3.1 Popular Posts This widget allows you to display your most commented posts.
• 2.3.2 Recent Posts This widget allows you to display your most recent posts.
• 2.3.3 Latest Tweets Widget This widget allows you to configure and display your latest Twitter tweets.
Page 6
• 2.3.4 Flickr This widget allows you to configure and display your images from Flickr.
• 2.3.5 Testimonials This widget allows you to configure and display your testimonial posts that you can create in Testimonials > Add New.
- 2.4 Shortcodes The theme comes with a variety of content styles which include columns, buttons and alerts. You can insert this into your content by navigating to the styles drop down in the visual editor. - The Visual Editor You can access the visual editor simply by adding a new post where you can choose between a visual or HTML editor. There have been a few extra options added which will be explained below.
Page 7
You’ll notice some additional buttons on the WordPress visual editor when editing or creating a new post. These are your shortcodes that come packaged with the theme. Hover over each one to find out what they are. Click on one of the shortcode buttons to insert an example directly into your content box. Some shortcodes such as tabs and sliders have additional options which you can see in the opening shortcode after you have inserted it. You also have “Styles” to play with. You should see a drop down box with a bunch of styles inside. Here you can create buttons, alerts and columns. Your front end content area can hold up to 12 columns horizontally. If you want to add two half columns, you’l need to insert a six column and a six-last column. Notice how the last column style has “last” in its name, you need to ensure that this is used to keep the column from dropping onto the next line. - 2.5 Custom Page Templates The theme comes with a number of in built custom page templates. These templates can be used on individual pages to alter the display or functionality.
• 2.5.1 Full Width Template The Full Width template allows the creation of a page without a sidebar. The main content will span the full width of the site. To use the template, simply create a page using the “Full Width” page template. • 2.5.2 Home The Home template allows the creation of a page with a few widget areas and an optional slider.
• 2.5.2 Portfolio Template The Portfolio template allows the creation of a page that lists all your portfolio posts.
- 2.7 Featured Images The theme supports the use of featured images. The theme supports auto-resizing of the featured images and so there is only the requirement to specify a single image. Auto-resizing will only occur however when the image is uploaded for the first time, images that have previously been uploaded will not be resized. To ensure the correct display of images across your site, ensure you specify an image with dimensions of 960px x 500px or larger. To upload a post thumbnail, go to Posts > Add New or open an existing post in editing mode. Locate the Featured Image module and click the Set featured image link. Clicking the link will open up the usual WordPress image uploader where you will upload your image. Simply make sure that it is either the same size or larger than what the final thumbnail will be.
Page 8
Once you’re done uploading the image, simply click the link that says “Set Featured Image”, which is next to the button to insert it into the post. For more on how to use the WordPress 2.9+ Post Thumbnail feature you can view this article http://en.support.wordpress.com/featured-images/ 3. Theme Files This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification. - 3.1 Cascading Style Sheets Style.css - The theme’s main stylesheet and determines the majority of the theme’s styling. - 3.2 JavaScript Files The theme imports various Javascript files depending on the page being viewed, widget configuration and settings in the theme options. jQuery Library - jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. More information can be found at http://jquery.com/. Superfish - Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds much-soughtafter enhancements. More information can be found at http://users.tpg.com. au/j_birch/plugins/superfish/ Cycle.js - Cycle is a simple slideshow plugin for jQuery. http://jquery.malsup.com/cycle/ Custom.js - This file controls various sections of JS throughout the theme dependant on settings in the theme options. Jquery.isotope.js - This file provides the filterable functionality of the portfolio section as well as a masonry layout effect. More info can be found here http://isotope.metafizzy.co/. - 3.3 Photoshop Files All PSDs included with the theme contain the necessary styling for all elements including layouts, icons and all custom widgets. Again, thank you for purchasing this theme! If you have any questions that are beyond the scope of this document, feel free to post them in the dedicated support forum at www.prothemeus.com/support.
Page 9
“Appster” WordPress Theme Documentation
Page 1
A Quick Thank You!
Dear customer, My name is Paul Victor and I am the founder of Prothemeus.com. Before we get to the theme documentation, I would like to personally thank you for supporting Prothemeus. This document has been created as a general theme guide and as such can be used for various other Prothemeus WordPress themes. I have tried to write it as detailed as possible to avoid wasting your time. If you still have questions about the use of this template, please send an email to [email protected] or refer to the website www.prothemeus.com to find more information. With best regards, Paul Victor
- Founder of Prothemeus.com
Page 2
Table of Contents
1. Getting Started
- 1.1 Installation ..................................................................................................................................................4
- 1.2 Setting up the Homepage...........................................................................................................................4 • 1.2.1 Adding Slides to the Homepage.......................................................................................................4 • 1.2.2 Homepage Widget Areas ................................................................................................................5
- 1.3 Setting up the Blog.....................................................................................................................................5 - 1.4 Setting up the Portfolio...............................................................................................................................5
• 1.4.1 Adding Portfolio Items.....................................................................................................................5 • 1.4.2 Adding Portfolio Categories .............................................................................................................5
2. Theme Features
- 2.1 Custom Menus ...........................................................................................................................................6 - 2.2 Theme Options...........................................................................................................................................6
• 2.2.1 Basic Settings................................................................................................................................6 • 2.2.2 Home Settings ...............................................................................................................................6 • 2.2.3 Portfolio Settings............................................................................................................................6
- 2.3 Custom Widgets.........................................................................................................................................6
• 2.3.1 Popular Posts ................................................................................................................................6 • 2.3.2 Recent Posts .................................................................................................................................6 • 2.3.3 Latest Tweets.................................................................................................................................6 • 2.3.4 Flickr ............................................................................................................................................7 • 2.3.2 Testimonials...................................................................................................................................7
- 2.4 Shortcodes .................................................................................................................................................7 - 2.5 Custom Page Templates ............................................................................................................................8
• 2.5.1 Full Width Template........................................................................................................................8 • 2.5.2 Home Template..............................................................................................................................8 • 2.5.3 Portfolio Template...........................................................................................................................8
- 2.6 Custom Login Logo & Gravatar..................................................................................................................8 - 2.7 Featured Images ........................................................................................................................................8
3. Theme Files
- 3.1 Cascading Style Sheets .............................................................................................................................9 - 3.2 JavaScript File............................................................................................................................................9 - 3.3 Photoshop Files .........................................................................................................................................9
Page 3
1. Getting Started To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex. - 1.1 Installation Open the .zip package which you have downloaded and locate the two zip files called “appster” and “appster-child”. Log in to your WordPress admin area and navigate to Appearance > Themes > Upload. First upload the “appster” zip file, once this is complete repeat the process for the “appster-child” zip file. Now go to Appearance > Themes and find the Appster Child theme and activate it. - 1.2 Setting up the Homepage To set up the homepage you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title and some content. Select the “Home” template from the Page Attributes section and click “Publish”. Once you have created your new page which uses the “home” page template, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your front page. Your homepage is now created and can be viewed by visiting your root URL. You can configure the display of the homepage by visiting the theme options panel.
• 1.2.1 Adding Slides to the Homepage The homepage features a slider into which you can insert your own content. To add a new slide to the slider, navigate to Slides > Add New and give your slide a title and excerpt. You will also need to set a featured image. There are three different types of slides you can create. The first being a slide with a title, content and featured image.
This slide will be displayed with the image to the right and the title and content to the left. You can also create a slide with just a featured image and title. This will make the image fullwidth, the title is just for your benefit. The last type of slide you can create is a full widget content slide, simply create a title and add content but leave out the featured image.
Page 4
• 1.2.2 Homepage Widget Areas The homepage sections directly below the slider are controlled by widgets. To customize these widget areas go to Appearance > Widgets. There is also a bottom homepage widget area.
- 1.3 Setting up the Blog To set up the blog, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “blog” yet you do not have to include any content. Click “Publish”. Once you have created your new page, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your posts page. Your blog index is now created and can be viewed by visiting the page you just published. - 1.4 Setting up the Portfolio To set up the portfolio section, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page any title that you might find relevant. Select the “Portfolio” template from the Page Attributes section and click “Publish”. The main portfolio section can now be viewed by visiting the page you just created.
• 1.4.1 Adding Portfolio Items To add a new portfolio item, navigate to Portfolio > Add New. Here you can add a brief description of the project, an excerpt, assign various categories and upload images. The excerpt is an important piece of each post as it is displayed on the thumbnails in the portfolio, ensure you create a short, punchy excerpt for each.
When adding multiple images to a single portfolio post, simply click the upload icon and upload all of your images to that post. Nothing else is needed. A featured image is needed for the thumbnail. You can also optionally configure your portfolio post with some additional options such as making it featured (which in turn will make it display larger on your portfolio page).
• 1.4.2 Adding Portfolio Categories If you wish to categorise your portfolio items, you can assign portfolio categories. A portfolio category is similar to a post category and assigning them will make the portfolio section filterable by the end user. You can create new portfolio categories by navigating to Portfolios > Categories or they can be created from the portfolio item creation page.
2. Theme Features The theme comes packed with features that control the layout and extend the functionality of WordPress. This section will document those features and how to use them successfully.
Page 5
- 2.1 Custom Menus If you using WordPress 3.0+ you can setup custom menus to configure your site’s navigation. The theme comes with two custom menu locations called “Primary Menu” and “Footer Menu”. Setting up custom menus To setup your custom menus, navigate to Appearance > Menus. Give your menu a name and build it up using the available widgets. You can add a variety of items including pages, categories, custom links. To extend the available widgets, click the screen options tab at the very top of the screen and configure your options. Once you have built and saved your menu, simply select the theme location using the widget on the left. Under “Primary Navigation”, select your custom menu from the drop down list to use it as the site’s main navigation. - 2.2 Theme Options The theme comes with a simple to use administration panel. You can access it by navigating to Appearance > Theme Options. The theme options are conveniently spread over a number of tabs and each tab contains the options that pertain to a particular area of the theme.
• 2.2.1 Basic Settings As the label suggests, these general options allow you to configure your site’s setup. Here you have options to upload your own logo and select a skin amongst others.
• 2.2.2 Home Settings Here you can enable widget areas and configure the slider.
• 2.2.3 Portfolio Settings Here you can configure how many related posts you want to show and select the page you’re using as the port folio page.
- 2.3 Custom Widgets The theme comes with 5 custom widgets that can be used to configure how your site displays content - they can be found under Appearance > Widgets.
• 2.3.1 Popular Posts This widget allows you to display your most commented posts.
• 2.3.2 Recent Posts This widget allows you to display your most recent posts.
• 2.3.3 Latest Tweets Widget This widget allows you to configure and display your latest Twitter tweets.
Page 6
• 2.3.4 Flickr This widget allows you to configure and display your images from Flickr.
• 2.3.5 Testimonials This widget allows you to configure and display your testimonial posts that you can create in Testimonials > Add New.
- 2.4 Shortcodes The theme comes with a variety of content styles which include columns, buttons and alerts. You can insert this into your content by navigating to the styles drop down in the visual editor. - The Visual Editor You can access the visual editor simply by adding a new post where you can choose between a visual or HTML editor. There have been a few extra options added which will be explained below.
Page 7
You’ll notice some additional buttons on the WordPress visual editor when editing or creating a new post. These are your shortcodes that come packaged with the theme. Hover over each one to find out what they are. Click on one of the shortcode buttons to insert an example directly into your content box. Some shortcodes such as tabs and sliders have additional options which you can see in the opening shortcode after you have inserted it. You also have “Styles” to play with. You should see a drop down box with a bunch of styles inside. Here you can create buttons, alerts and columns. Your front end content area can hold up to 12 columns horizontally. If you want to add two half columns, you’l need to insert a six column and a six-last column. Notice how the last column style has “last” in its name, you need to ensure that this is used to keep the column from dropping onto the next line. - 2.5 Custom Page Templates The theme comes with a number of in built custom page templates. These templates can be used on individual pages to alter the display or functionality.
• 2.5.1 Full Width Template The Full Width template allows the creation of a page without a sidebar. The main content will span the full width of the site. To use the template, simply create a page using the “Full Width” page template. • 2.5.2 Home The Home template allows the creation of a page with a few widget areas and an optional slider.
• 2.5.2 Portfolio Template The Portfolio template allows the creation of a page that lists all your portfolio posts.
- 2.7 Featured Images The theme supports the use of featured images. The theme supports auto-resizing of the featured images and so there is only the requirement to specify a single image. Auto-resizing will only occur however when the image is uploaded for the first time, images that have previously been uploaded will not be resized. To ensure the correct display of images across your site, ensure you specify an image with dimensions of 960px x 500px or larger. To upload a post thumbnail, go to Posts > Add New or open an existing post in editing mode. Locate the Featured Image module and click the Set featured image link. Clicking the link will open up the usual WordPress image uploader where you will upload your image. Simply make sure that it is either the same size or larger than what the final thumbnail will be.
Page 8
Once you’re done uploading the image, simply click the link that says “Set Featured Image”, which is next to the button to insert it into the post. For more on how to use the WordPress 2.9+ Post Thumbnail feature you can view this article http://en.support.wordpress.com/featured-images/ 3. Theme Files This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification. - 3.1 Cascading Style Sheets Style.css - The theme’s main stylesheet and determines the majority of the theme’s styling. - 3.2 JavaScript Files The theme imports various Javascript files depending on the page being viewed, widget configuration and settings in the theme options. jQuery Library - jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. More information can be found at http://jquery.com/. Superfish - Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds much-soughtafter enhancements. More information can be found at http://users.tpg.com. au/j_birch/plugins/superfish/ Cycle.js - Cycle is a simple slideshow plugin for jQuery. http://jquery.malsup.com/cycle/ Custom.js - This file controls various sections of JS throughout the theme dependant on settings in the theme options. Jquery.isotope.js - This file provides the filterable functionality of the portfolio section as well as a masonry layout effect. More info can be found here http://isotope.metafizzy.co/. - 3.3 Photoshop Files All PSDs included with the theme contain the necessary styling for all elements including layouts, icons and all custom widgets. Again, thank you for purchasing this theme! If you have any questions that are beyond the scope of this document, feel free to post them in the dedicated support forum at www.prothemeus.com/support.
Page 9
