Theme Documentation v1.0

“News Magazine Wordpress Theme”

Created: 19th Oct, 2012
Updated: 19th Oct, 2012

Thank you for purchasing the 'News' theme for Wordpress.

Changelog
Theme Installation
Dummy Contents
Theme Options Page
Widgetised Areas
Featured Images
Adding Video
Building a Menu
Using Shortcodes
Using Facebook Comments
Tips

A) Changelog - top

Version 1.0
(19th October 2012)

Initial release

B) Theme Installation - top

Installing the News Theme is a very simple process that will literally take you seconds to complete regardless of your experience with Wordpress, allow me to walk you through the installation process in full.

Extract the contents of the ZIP file you have downloaded to somewhere convenient such as your desktop.
Login to your Wordpress administration area.
Select 'Themes' within the 'Appearance' admin menu.
Click the 'Install Themes' tab located at the top of the page.
Select the 'Upload' link as shown in the above screenshot.
Using the file browser, locate the theme ZIP file 'News.zip' and upload it.
Once uploaded, you can go ahead and activate the theme.

C) Dummy Contents - top

We have included an XML file that will import all contents from our theme demonstration, it is located within the 'XML' folder and just needs uploading via your Wordpress administration menu as shown below.

Login to your Wordpress administration area and click 'Import' within the 'Tools' menu.
If this is a fresh installation of Wordpress you'll need to install the importer tool to import the XML file. Simply click the 'Wordpress' link, followed by the red 'Install Now' button to proceed with the installation.
Be sure to activate the plugin you just installed, you will now be able to browse to the XML file we supplied you with.
Follow on-screen prompts and import everything from the file.
Again, if this is a fresh installation of Wordpress, you'll want to remove the 'Hello World' post for perfect results.

All images used within the demonstration contents are taken from Photodune.net. All authors have been credited and linked to at the bottom of every post within the demonstration posts.

Our theme demonstration displays 12 posts, you can change this figure via the 'Reading' link within the 'Settings' administration menu.

D) Theme Options Page - top

Built within the Wordpress administration area is a comprehensive theme options page which allows you to modify a variety of theme elements without touching any code whatsoever.

Open the options page by clicking on the 'Options' link within the 'Appearance' admin menu.

You will be presented with an array of sections (see above screenshot), allow me to explain each of these sections.

Global Settings - These settings will affect the theme globally on every visible page. You can select a base color for the theme (dark or light), along with a secondary color (7 flavours to choose from) and the main font for all of your headings. You can also choose between 1 or 2 columns for the theme structure.

Header Settings - This section contains settings for the header area, you can change the sitename (see screenshot above), add a site logo, and modify the default search field text.

Post Settings - There are several selectable options within this section that will affect what your visitor see's when viewing one of your posts, you can choose wether to add social links to your posts, how you want the author's name to appear and select which commenting system to use.

Category Settings - You can choose which category layout to use when a visitor views one of your categories.

We have also provided seperate template files for each of these category layouts, they can be found within the theme folder as shown above (category-alternate.php and category-blog.php).

If for example you wanted to use the 'Alternate' layout for your 'Videos' category only, simply rename the 'category-alternate.php' file to 'category-video.php'. The category with a slugname of 'video' will now use the alternate layout, overriding the layout you selected in the theme options page, cool huh?

Advertisement Settings - There are two pre-defined advertisement blocks for you to use to generate an income from your Wordpress site, simply paste your advertisement code in the relevant fields and the theme will position your banner in the correct location.

Adding your banner code is very straight-forward if you are using an advertisement agency such as Google Adsense, or an affiliate scheme for example, but to use your own banner advertisement you would need to create your own banner code as shown in the above screenshot, for the benefit of IE browsers you should remove the border, you can do this by adding 'class="banner"' to your code.

Miscellaneous Settings - This sections allows you to modify your site description and keywords for the search engines to use when displaying it's search results. It is advised to be very descriptive when describing your websites contents, and you need to seperate your site keywords with a comma (keyword1,keyword2,keyword3 etc...).

Footer Settings - The footer area of the theme can be controlled via this section. It gives you the ability to add your own custom copyright text (see screenshot above) aswell as adding a variety of linked social buttons for your Youtube channel, Facebook page, Twitter page, and RSS feed.

Reset Button - You should be warned that by pressing the reset button at the bottom of the theme options page, all settings will be reset, there is no going back so only press when you are sure you want to reset all settings immediately.

E) Widgetised Areas - top

All widgetised areas are appropiately named in accordance to their position within the theme, as shown in the screenshots below.

The homepage is completely widgetised (as shown in the above screenshot) allowing you to place your contents precisely where you would like. Only widgets marked with [COLUMN] should be placed in the 'Home Column' widgetised area.

The above screenshot is an example of the 'Post Sidebar' widgetised area, only widgets placed here will appear in the sidebar on your POSTS, the same applies to your CATEGORIES, PAGES, and all other ARCHIVES (Category Sidebar, Page Sidebar, Archive Sidebar respectively).

There are also upto 3 footer widgets that you can place any widget,(remember [COLUMN] widgets should only be placed in the 'Home Column' area)

If you select the '1 Column' option then the 'Footer Middle' widgetised area will be removed leaving just 2 widgetised areas, so your footer widgets may need relocating once you change column layouts.

F) Featured Images - top

To make the theme look so cool, you need to add a featured image to each of your posts, but Wordpress makes this a very straight-forward process, just follow these steps.

When writing a new post, click the 'Set Featured Image' link located (by default) at the bottom of your right sidebar (see above screenshot).
Simply drag your chosen image into the window that just popped-up, for perfect results you should use a large image (620*400px or equivalent), you can use the built-in image editor to crop any image you want.
Once your happy with your image, click the 'Use as featured image' link at the bottom of the pop-up (see below screenshot). You can close the window and will see your image attached to your post.

G) Adding Videos - top

We have made it very easy for you to add a video to your post, it's a case of obtaining any video embed code from websites such as Youtube, Google Video, Vimeo.

Copy the code to your clipboard (Ctrl+C) and paste it into the Video field (Ctrl+V) directly below your post text (see screenshot below).

Be sure to update your post, the video you attached will replace the post image when the post is being viewed (see screenshot below), it will be centralised automatically and sit nicely in a color-coded area in accordance to which base color you are currently using.

H) Building a Menu - top

Wordpress makes life very easy for you to build your own menu structure, using links to your categories, pages, or any other link you like. It's as simple as dragging your menu items into the location you desire.

Click the 'Menus' link within your 'Appearance' administration menu to open the menu builder page.

Create a new menu as shown in the above screenshot, you can call it anything you like, once you save the menu you need to tell Wordpress that it is the menu you would like to use for this theme, so select it in the dropdown list of available menu's as shown in the below screenshot (you can make as many menu structures as you like).

Using the links in the left sidebar (Custom Links, Pages, Categories), you can build any desired menu structure, the theme supports any menu with a depth of upto 5 levels.

I) Using Shortcodes - top

We have included a handful of shortcodes to help you create additional styled areas within your post and page text, simply add the shortcode within your body text such as [shortcode_here].

[warning] - Will add a left-aligned warning icon to your defined area, and color the text in red.

[approved] - Will add a left-aligned tick icon to your defined area, and color the text in green.

[notice] - Will add a left-aligned notice icon to your defined area, and color the text in blue.

[code] - Will add a dashed border around your defined area, and alter the text to a Georgia font, colored black.

[floatleft] - Will float a block of text to the left, wrapped within your body text.

[floatright] - Will float a block of text to the right, wrapped within your body text.

You can view all shortcodes in action on this page on our theme demonstration site.

J) Using Facebook Comments - top

To begin using the Facebook Comments on your Wordpress site, you must obtain an 'SDK code' from this page on Facebook, simply click the 'Get Code' button to begin

As shown in the above screenshot, once you click the 'Get Code' button, a popup like the one above will appear, highlight the given SDK code and copy (Ctrl+C) it to your clipboard, followed by pasting (Ctrl+V) the code into the relevant field within the theme options (Appearance > Options > Post Settings > Facebook Comments SDK).

If you choose to use the Facebook commenting system, the theme will detect your SDK code and output the comments plugin at the bottom of your posts.

K) Tips - top

Maintain CSS3 & HTML validity

By default, the theme utilises valid CSS3 & HTML 1.0 Transitional coding, but you can easily invalidate the results by not taking care when adding elements such as banner advertisements, and videos.

To properly add an image-based banner advertisement, you would end your image tag with a space followed by a backslash, and also add an alt tag, giving your banner image a text identifier, as show in the image below.

Also note, you can add a pre-defined class 'class="banner"' to your image tag to automatically ensure no browser displays the image with a nasty border (cue menacing glare at IE), or simply add 'style="border: 0px;"' instead, as I have done in the above screenshot.

To properley add an embedded video from Youtube, you need to remove the 'allowfullscreen' text from the default embed code, as shown in the below image highlighted in blue.

Once again, thank you so much for purchasing the 'News' theme for Wordpress.

MediaFap.com

Go To Table of Contents