WordPress Politico

Theme designed and developed by THE MOLITOR

If you have any questions that are beyond the scope of this help file, please visit the forums at www.themolitor.com/forums or you can email me from my profile page at http://themeforest.net/user/themolitor/profile

Updates

Resources

Installation and setup

  1. Download and unzip the folder from ThemeForest.
  2. Upload the "wppolitico" folder (with the files left inside) to the themes directory of your blog, which is located within the wp-content directory.
  3. Activate the theme from your admin panel by navigating to "appearance" > "themes".
  4. Options will be accessible from “appearance” > “customize”.

General Info

NOTE: Once finished installing theme, be sure to review the options available by navigating to “appearance” > “customize”.

Featured Images

To add post thumbnails and slider images, use the “Featured Image” section of the post edit page (see screenshot below). Images for blog posts are 225x225. Images for the dual slider are 612x375. Images for the nivo slider are 918x375.


Gallery Images

To create a gallery layout, simply create a page and upload images. Once you've uploaded images, use the "insert gallery" option that is built into WordPress (see image below).

gallery

Custom Post Options

Below each post and page edit box is a section called “Custom Post Options”. This is where you will find theme-specific features for the post or page you're editing.

Navigation Menu

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

Widgets

The widgets section is controlled from the "widgets" page (under "appearance"). The “Live Widgets” section controls the sidebar widgets and "Footer Widgets" control the bottom widgets.

Full Page Layout

To create a full-page layout, select “Full Page (no sidebar)” in the template drop down inside page attributes (see screenshot below)

fullpage

Media Settings

It’s a good idea to set the size of images to use within your post/page content. Navigate to “Settings” > “Media” and make your images the same sizes as indicated in the below screenshot…

media

Comments

Image Lightbox

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

Pagination

OPTIONAL: To achieve the same pagination as the demo, you’ll want to install and activate the “WP-PageNavi” plugin. No setup required, just activate the plugin. You can download it here: http://tinyurl.com/59kwmq

Tool Tips

To apply tool tips to links, make sure you give them a class name of "tooltip" and an appropriate title attribute. The styling of the tooltip is achieved in the CSS file under the "TOOL TIP STYLE" section, with the class name of ".itooltip".

Embedding YouTube Videos

You can embed YouTube videos by pasting the embed code provided by YouTube (see screenshot) into the post content box. When you're dealing with raw code, make sure you're using the "HTML" tab (not the "visual") tab on the WordPress page/post edit screen.

HTML Structure

All of the information within the main content area is nested within a div with an ID of "content". The post content is nested inside the div with class name "post". The sidebar/widget content is within a div with an id of "sidebar". The menu content is within a div with an id of "menu".

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

.post a { color: #someColor; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

#content .post a { color: #someColor; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

CSS

There is one CSS file called "Style.css" and is separated into sections using:

/* -----HEADER STUFF----- */
some code

/* -----FOOTER STUFF----- */
some code

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

JavaScript

This theme imports the following JavaScript files:

  1. jQuery: jQuery is a JavaScript library that greatly reduces the amount of code that you must write.
  2. Custom Scripts: The scripts.js file provides some custom scripts for jQuery.
  3. Countdown: This file is what operates the countdown feature.
  4. IE7: JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. For more info, svisit http://code.google.com/p/ie7-js/

PSD Files

The 2 main PSD files, “politico.psd” and “politico-page.psd” utilizes folders for organizing content. If you’re trying to edit a specific section, just locate the proper folder to find the layer.