Help

Spectre Theme for WordPress

Created: 06/03/2009
By: Matt Brett
Contact Info: Check my official support forums for known issues http://forums.mattbrett.com, or send a message through ThemeForest if you can’t find your answer in the forums.

———————————————————————————————————-

–VERSION HISTORY–

1.2 – 07/06/2009
* Replaced Smart Image Resizer with TimThumb dynamic image resizing script.
* Got rid of an error that would appear when previewing the theme before activating.
* Revised Theme Settings panel to include headings that categorize options.
* Replaced images that create the active tab in featured showcase and updated CSS to make dropshadow smoother.
* Comment form now jumps to current position when replying to a comment.  Cancel restores it to original position.
* Added a new widget for blog categories.

1.1 – 06/05/2009
* Removed some code from functions.php which could prevent the theme from being installed.
* Moved script includes in the header below the wp_head call to prevent jQuery conflicts.
* Replaced all code for disabled image resizing with better/smarter conditional statements.

1.0 – 06/03/2009
* Initial release.

———————————————————————————————————-

–TABLE OF CONTENTS–

A) Markup, Style, and Layout
B) Internet Explorer Compatibility
C) Dynamic Image Resizer
E) Featured Posts Showcase
F) Creating a Portfolio Item
G) Setting up Portfolio and Blog Pages
H) Managing Navigation Links
I) Widgetized Sidebars
J) Managing Ads
K) Miscellaneous Theme Settings
L) Support & Feature Requests
M) Credits

———————————————————————————————————-

A) Markup & Style

Spectre is built on XHTML 1.0 Strict and makes use of Eric Meyer’s CSS Reset technique.  The templates are well commented with obvious flags, so figuring out where containers start and end shouldn’t be an issue.

There are a few stylesheets in the /css directory – screen.css being the main one that contains all of the theme’s structure and style.  There are some overrides for different versions of IE located in separate stylesheets that are displayed conditionally.

Spectre is equipped with 3 full colour schemes – default blue, brown, and grey.  You can change between the styles from the Theme Settings panel found in the Appearance section of WP-Admin.

———————————————————————————————————-

B) Internet Explorer Compatibility

Spectre is compatible with all versions of IE (version 6 and up), to an extent.  Some frills are missing in action since IE isn’t up to par with the latest CSS.  Rounded corners on certain items, for example.  Some effects added to images by layering transparent PNGs have been hidden for IE6 in lieu of doing extensive work-arounds.

In short, the theme fully works in all versions of IE, but some of the bells and whistles are missing.

———————————————————————————————————-

C) Dynamic Image Resizer

Spectre uses Tim McDaniels’ TimThumb (http://code.google.com/p/timthumb/) script for resizing the images used in the featured posts sections and in archive listings. Simply upload your images using the built-in media manager or direct FTP, then copy/paste the original file’s path into the Post Image field in the Additional Information box.

When you enter image paths in WP-Admin, you should start with the /wp-content directory. The WP home path is entered automatically in the templates. For example, if your image path is http://mydomain.com/wp-content/uploads/image.jpg, you would paste /wp-content/uploads/image.jpg in the field.

TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed. There shouldn’t be a problem with most web hosts, but if images are broken, this could be why. Contact your host and see if they can help you out.

If you are certain your server is compatible, you may need to check that the /cache directory is writable on your web server – set the permissions to 755 or 777.

If you absolutely cannot get TimThumb to work, I can offer no further assistance. As such, I’ve included an option in Theme Settings to disable image resizing entirely. In this case, you will have to resize images manually.

———————————————————————————————————-

D) Image Dimensions

If you’re able to make use of Smart Image Resizer, you can bypass this section entirely.  In the case that your server is incompatible, you will have to resize images manually if you want them to look their best.  Otherwise, images will be resized via CSS restrictions, which doesn’t produce the best results.  I’ve included templates for each of the image sizes, but here they are as well…

Feature Image: 630×250
Feature Tnail: 58×58
Post Image: 98×98
Portfolio Screenshot: 590 wide (height is arbitrary)

Any easy way to automate image resizing, is to use the WP media manager and adjust your settings so that images are resized to the above specifications automatically when they’re uploaded.  From the Settings -> Media panel, change the values to the following…

Thumbnail: 58×58
Medium: 98×98
Large: 590×590

———————————————————————————————————-

E) Featured Posts Showcase

Adding posts to the featured posts showcase is very easy.  On the Write -> Post screen you should notice a new box directly under the main text area titled Additional Information.  This area houses a series of input fields for the featured posts showcase and portfolio items.  As described above in section C, upload and paste the path of your image in the Feature Image field.  Feature Title, Feature Description, and Post Image are the other fields associated with the featured posts showcase.  Feature Title will likely echo the post title, while Feature Description is a custom excerpt which is used in the featured posts showcase only.  Post Image is re-used for the feature’s thumbnail image in this situation.

In order for posts to show up in this area, they have to be assigned to a unique category.  I would recommend creating a “Featured” category for this very purpose.  Once you have done this, make sure you enter the Featured category ID in the Theme Settings page.

———————————————————————————————————-

F) Creating a Portfolio Item

Now that you have a basic understanding of how the Additional Information box works, adding information for a portfolio item should be trivial.

The main image used for portfolio items maintains the aspect ratio of the Feature Image (630×250), and uses the same field.

For the review score, you need to enter textual value.  The appropriate 5 star rating will be displayed in the post.  Starting with 0 and ranging to 5, ratings go up in half steps… 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5

Use the main textarea for the summary of the project.  While other details like client, services, and website URL are entered below.

Services should be entered as a comma separated list, which each comma followed by a single space.  The theme will automatically convert these to list items for better presentation if entered correctly.  For example: Design, XHTML/CSS, WordPress Development

Screenshots need to be sized to 590px wide.  Height is variable.  These images are not resized automatically.

All of this information is conditional, so it will only show up if you have entered a value for it.

———————————————————————————————————-

G) Setting up Portfolio and Blog Pages

There are page templates for Portfolio and Blog which have a unique layout.  To set them up, simply create a new page for Portfolio and another one for Blog, then select the appropriate template from the pulldown menu in the Attributes box.

———————————————————————————————————-

H) Managing Navigation Links

I would have preferred to have you include pages you want in the nav, but the stock WP functions don’t work that way.  Instead, you exclude the pages you don’t want to show up in the nav.  At this time, you have to exclude sub-pages as well.  Page exclusions are a comma separated list of IDs.

To find an ID, go to the Pages screens in WP-Admin and hover over the name you want to exclude.  Glance down to the status bar in your browser and take a look at the path.  post= at the end of the URL is what you’re after.

———————————————————————————————————-

I) Widgetized Sidebar

The sidebar is widgetized, so you can drag and drop standard WP widgets and custom widgets designed specifically for Spectre.  I didn’t test every single widget I could get my hands on, but the most popular ones should display just fine.  The custom Recent Posts widget is hidden on the homepage, as it would be redundent.

Please refer to the WordPress Codex if you’re unfamiliar with using widgets.
http://codex.wordpress.org/Appearance_Widgets_SubPanel

———————————————————————————————————-

J) Managing Ads

There are several built-in ad spots in Spectre.  On the Theme Settings panel you will see a series of text areas after the basic settings which are for the ads.  Once you have placed your code in the appropriate areas and saved, you will need to add the associated widgets to the sidebars.

The 125×125 buttons widget can support any number of ads, up to 4.  Obviously, even numbers look best.  But if you only have 2 ads, don’t fret, it will look just fine.

———————————————————————————————————-

K) Miscellaneous Theme Settings

There are a few other options on the Theme Settings panel that haven’t been covered above.

Currently Booking For – If you’d like to publish your current availability, you can do so by entering it in this field.  It reads as follows, “Currently booking for ________” followed by a link to the contact page.  Month and year works best in this field.

This is a Business Site – What this does, is changes any reference to yourself from “me” to “us”.  For example, in the header under the availability, it reads Hire Me by default.  If you enable this option, it reads Hire Us.  Same goes for the about button in the points section, and the follow button for Twitter.

Logo Image Path – If you do have a logo and would like to use it in the header, you can replace the default image pretty easily.  Using the logo.psd template, simply drop your image in, scale to fit, crop, and save.  Once you upload it to your server (wherever you want), put the path in this field.  The logo dimensions need to be specified as well, since the image space is flexible.  The max width is 640px, but the height can be whatever you want.  Enter the width and height of your image in the Logo Image Width and Logo Image Height fields following (don’t include px, just the actual number).

Portfolio Category ID – The ID of the category for portfolio items.

Link to Original Screenshots – If this is enabled, a “View full size screenshot” link appears below screenshots in portfolio items.  They are viewed using Lytebox, a more flexible version of LightboxJS.

Blog Category ID – The ID of the category for blog posts.

Posts Per Column on Homepage – Sets the number of blog posts in each column on the homepage.  Default is 2 in each, for a total of 4 posts.  Even numbers work best.

Show Author on Blog Posts – If checked, a box containing the author’s avatar, name linking to their post archive, and description is displayed between post content and comments.

Show Full Posts on Blog Page – If you’d prefer to display full blog posts instead of excerpts on the blog page, enable this.

Twitter Profile URL - In the case where you’re using the Twitter Tools plugin, a “Follow me on Twitter” buttons is placed below recent tweets, if this field has a URL in it.

RSS Feed Replacement URL – If you use a service like FeedBurner for your RSS feed, you can place the URL here.  It will replace the feed URL used in the head tag for browser recognition and on the big feed button in the header.

Email Subscription URL – Similarly, you can link to the sign-up form for email subscriptions of any type, if you use them.

Point # Title, Point # Description – Under the featured posts showcase on the homepage there is a prominent area for touting some of your skills and offerings.  Each point has a title and description.  HTML can be used in the description textareas.  If you don’t want this section to be shown at all, leave these blank.

About Page Path – Used for the “More About Me” button in the points area.

Contact Page Path – Used for the “Hire Me” link in the header.

‹head› Include Code – Some ads require a chunk of code in the ‹head› as well.  You can dump that and any other code that needs to be placed in the ‹head› in this field.

Footer Include Code – Most stat tracking code needs to be placed in the footer.  Paste that code in this field.

———————————————————————————————————-

L) Support & Feature Requests

Please send me a direct message via ThemeForest if you need help.  I will gladly help squash any bugs that might pop up and assist as best I can in resolving issues with the theme itself.  I will continue to update Spectre if updates to the WordPress core render it incompatible over time.

I have also setup forums on my own domain for peer-to-peer support.  Please use this space to ask for help troubleshooting issues, find out how to extend the theme, share your modifications, etc.
http://forums.mattbrett.com

However, I cannot facilitate feature requests, including customizing the theme at this point.  I’ve included the PSD to ensure all original assets are at your disposal should you want to change things up.  Knowledge of Photoshop, XHTML/CSS, and the WordPress template system are required if you want to customize further than the options I have given you.

———————————————————————————————————-

M) Credits

Dynamic image resizing via Tim McDaniels’ TimThumb.
http://code.google.com/p/timthumb/

RSS feed, mail, and comment bubble icons courtesy of Function free icon set by Function Design & Development Studio
http://www.wefunction.com/function-free-icon-set

Twitter bird icon from Function Design & Development Studio.
http://www.wefunction.com/2009/05/40-free-twitter-badges

Featured posts and screenshot slideshows powered by jCarousel.
http://sorgalla.com/jcarousel/

———————————————————————————————————-

Once again, thank you so much for purchasing this theme! As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the “Item Discussion” section.

Matt Brett
http://mattbrett.com
http://twitter.com/mattbrett