WPelements.com

Introducing the “TV.Elements” WordPress Theme

Jason — Thu, 08 May 2008 22:39:35 +0000

The TV.Elements WordPress theme is the latest addition to my Video centric theme collection, bringing an entirely new element to the way you browse and interact with video on a website. This theme was built around video and specifically designed for higher resolution services such as Vimeo, Blip.TV and several others, but is also flexible enough to handle videos of any size up to 640px wide.

It’s All About The Video

You can see a fully functional demo at the link below to get a better idea of what this theme can do for you. The navigation (to the right of each video) displays the latest videos on your site in a carousel that eliminates page loading between each set. Select a category from the drop down menu to browse all video, or simply select any video in the list to read more or comment.

View the TV.Elements Theme Demo…

Posting is Simple

Posting videos using TV.Elements is as simple as copying the embed code from the source site and pasting it into a field. As you can see from my demo, I have tested this theme with videos from several sources including Blip.TV, Flickr, MetaCafe, MySpace, Veoh, Viddler, Vimeo and YouTube. But I can pretty much guarantee that any embeddable video should work with the TV.Elements theme. You can also embed your own hosted FLV files (please see included usage instructions).

Other Features

The TV.Elements theme has a total of 5 unique sidebars, all of which can be configured separately using the standard WordPress widget interface. Social links for each video are automatically populated and made available by clicking the “share” button beside each video. An embed code field is automatically populated which allows your users to copy and embed videos on their sites by click the “embed” button beside each video.

Installation and Usage

Upon purchase and download, you will most likely will want some direction on how to install and use the TV.Elements theme. Please refer to the “Setup and Usage” pdf document included with your theme package. I have linked a live version of this document here for your reference.

Requirements, Limitations and Unknowns

The TV.Elements theme has been tested on WordPress versions 2.3 and 2.5 ONLY. Any limitations or problems with using this theme on anything below 2.3 are unknown and unsupported. The TV.Elements theme has been tested and is fully compatible with the more popular web browsers including FireFox 2, Internet Explorer 7 and Safari 3. Any limitations or problems caused by other browsers are unknown and unsupported. Please leave credit where credit is due. In other words, DO NOT remove the WPelements.com reference found within the theme footer unless you have purchased the multi site license. Please note that any 3rd party plugins you use, modifications or additions you make to the theme files that cause issues with TV.Elements are unsupported.

TV.Elements Theme - Single Site License ($50.00)

The TV.Elements Single Site License gives you the right to use TV.Elements on one single website. You can also modify the theme as per your requirements, but you must leave the “wpelements.com” footer link in tact. Any future upgrades or revisions to this theme will be free of charge for anyone that has purchased the original TV.Elements theme.

TV.Elements Theme - Multi Site License ($125.00)

The TV.Elements Multi Site License gives you the right to use TV.Elements on a as many sites as you like. You can modify the theme as per your requirements, including removing the footer link. Any future upgrades or revisions to this theme will be free of charge for anyone that has purchased the original TV.Elements theme.

Coming Very Soon… The TV.Elements WordPress Theme

Jason — Mon, 05 May 2008 16:54:05 +0000

I know… Another video theme right? Well, “they” always say that it’s good to have options, and my new concept currently entitled “TV.Elements” is just another option for those of you that just can’t get enough video. No worries, the untitled Hulu inspired theme I posted last week is still going to happen, but TV.Elements will be available first.

TV.Elements is going to be a very clean and unique WordPress theme that revolves around high quality video services such as blip.tv, vimeo and several others. This theme will enable you to get your best videos out there wrapped in a very intuitive interface. Check back soon, because TV.Elements should be available within the next 2 weeks (probably even this week).

Just a Small Teaser for my Next Video Theme

Jason — Fri, 02 May 2008 20:27:37 +0000

I have been working on several theme concepts over the past few weeks, but for whatever reason I just can’t stay away from video themes. Ever since Hulu.com launched a few months back, I thought it would be cool to design a theme for WordPress inspired by the now very popular video site. Below is just a small teaser of what I came up with.

This theme has no official name yet, but I figured I would post a small screenshot to get some feedback. Video themes seem to be rising in popularity since I released VideoFlick and VideoElements, but I am hoping to break the mold even more with this latest concept. This is still a work in progress and I guarantee that a few things will change as I get into it, but let me know what you think either way. You can view a full screen version here.

Join the WPelements.com Affiliate Program

Jason — Mon, 21 Apr 2008 17:07:36 +0000

Since the release of the VideoFlick and VideoElements WordPress themes, people have been asking me if I will be creating some sort of affiliate program for theme sales. After thinking about it I realized this is probably something I should get going now, as I plan to release several other premium themes in the near future.

So if you are interested in helping WPelements.com sell some great themes and make a little cash in the process, join the WPelements.com affiliate program today. Getting started is easier than you think. First, sign up for a FREE affiliate account at e-junkie.com by clicking HERE. After you confirm your account, you can log into it by clicking on the affiliates link on e-junkie’s homepage. After you log in, select the “Get Affiliate Code” option, and select WPelements.com from the affiliate menu. Grab the code for the product you want to link on your site, and your done.

Currently I only have two (low cost) products under the affiliate program including the VideoFlick and VideoElements WordPress themes, but as I add more themes I will update this program with new options. You will be sent an email for each sale originating from your website. Each month’s earnings will be paid via PayPal (which you should have set up within e-junkie) within 15 days of month end. Earnings percentages range depending on the theme you sell. Single site licenses earn 40% ($10 to you) of the total sale, while multi site licenses earn 20% ($15 to you).

I have created a few standard advertisements (found below) which you should feel free to use for your site affiliate creative spots. Check back soon for more affiliate options.

Join the WPelements.com Affiliate Program!

Standard 468×60 Advertisement

Standard 300×250 Advertisement

Standard 125×125 Advertisement

Introducing the “Charred” WordPress Theme

Jason — Wed, 16 Apr 2008 17:31:27 +0000

Since I recently made a few changes to WPelements.com, I wanted to release my previous theme (version 1.0) to the public. I was originally going to release it unedited and named WPelements, but I decided to make a few changes to give it its own unique identity. Anyway… the end result is a new theme called “Charred”. Charred is a 2 column, widget enabled WordPress theme with the popular post thumbnail feature found on WPelements.com. Continue reading for usage instructions and to download the “Charred” theme (Free of charge).

View a live demo for the Charred WordPress theme HERE.

Writing a Post With Thumbnail

The Charred theme features post thumbnails which means that you will have to use the “Custom Fields” option when writing a post. All you have to is create a thumbnail image that you want to use for your post. I suggest that you scale your image to 140 pixels square. You can actually use any size image that you want for the post thumbnail, but keep in mind that the theme will scale your thumbnail image to 140 pixes square which might result in a distorted image. One you have created your post thumbnail, upload it, and create a new custom field called “thumbnail”. In the field value, paste the link to where you have uploaded your thumbnail (i.e. “http://www.somesite.com/thumbnail.jpg”). See below…

Setting Up The Featured Articles SideBlog

Setting up the featured articles sideblog is as simple as creating a category in WordPress called “Featured”. One you have done that, all you have to do is categorize any post that you want to show up in the sideblog as “Featured”. Nothing else to do there.

Change Your Logo

If you want to change the default logo, simply edit “logo.png” found within the theme “images” folder. The font I used for the default logo is called “Everyday Ghost” which can be downloaded FREE at dafont.com.

Download the “Charred” WordPress Theme

You can download the Charred WordPress theme by using the link below. No payment is necessary, but please feel free to send me a donation if you like by clicking the “Add To Cart” button below. Also, PLEASE leave credit where credit is due when using this theme. In other words, please DO NOT remove the wpelements.com link within the footer.

Download “Charred” Version 1.0

UPDATE:
There was layout issue found within the featured sideblog on the index page which has been fixed. Please download the latest version of charred if you haven’t already done so.

A Slightly New Look for WPelements.com (v1.something)

Jason — Tue, 15 Apr 2008 00:43:00 +0000

Ever since Derek (5thirtyone.com) released his latest WordPress theme (The Unstandard), I have been geared to do something similar with WPelements.com. I didn’t want to use the Unstandard theme, simply because I wanted to build my own version based on the concept. Anyway, I don’t consider this a site re-design, rather more of a revision of my previous theme. Also, I wouldn’t want to let the previous theme go to waste, so I will be cleaning up and releasing the WPE theme (version 1.0) within the next week or so. Of course, this will be a Free theme release.

Along the lines of free WordPress themes, I have two other themes in the works that I will be releasing very soon. The first is a 4 column theme called “X-Ray”, and the second is the Perooz theme I mentioned awhile back. As far as premium themes go, I am working on a image gallery theme inspired by the .mac web gallery as well as another gallery style theme inspired by bestwebgallery.com.

Introducing the “Video Elements” WordPress Theme v1.0

Jason — Wed, 09 Apr 2008 21:02:46 +0000

Previously titled the “WPE Video Gallery Theme“, “Video Elements” is now ready for purchase. This theme has been on my back for at least 2 months now, and I finally just had to sit down and finish it. You will notice that a few things have changed from the concept design to the final product, but I think you will be happy with the end result.

A Video Gallery Style WordPress Theme

Video Elements was designed with the video blogger in mind featuring traditional and gallery style layout options, a fully wigitized and customizable sidebar, “Instant View” for viewing videos on the fly and much more.

Just like my VideoFlick theme, Video Elements comes with a fully integrated and customized version of “mediabox” developed by Iaian7. Click a thumbnail and the video of your choice is launched in a full screen “ajax” window. Currently, this feature supports several video formats including Flickr Video, MySpace Video, Revver, Veoh, Viddler and Vimeo, YouTube, Google Video, MetaCafe, DailyMotion, FLV (Flash) Video, Quicktime and Windows Media Video.

It’s All About The Video

Video Elements allows you to embed your videos in two different ways, including the “Instant View” which allows users to instantly view any video on your site by selecting the video thumbnail, and within the single post page where the video is featured right above your post description.

I have included optional theme files that allows you to eliminate the “Instant View” feature entirely. If you choose to disable “Instant View”, post thumbnails will link directly to your single video post pages.

Featured Videos in Two Places

The Video Elements theme allows you to feature your best videos in 2 different places including at the top of the page within the coverflow, as well as within the featured video list on the sidebar. The top coverflow list can be controlled directly through the theme options page. Just add your thumbnail, description and link, and the theme takes care of the rest. For the sideblog list, simply create a category called “Featured”. Any post that is part of the “Featured” category will be displayed within the sideblog video list.

Two Different Layout Styles

Video Elements includes two ways of displaying videos including the traditional linear layout as well as an optional gallery layout. You can choose one or the other, or even both together. I have created a live demo so that you can see exactly what the theme can do. Click here to view the live demo for “Video Elements”.

Installation and Usage

Upon purchase and download, you will most likely will want some direction on how to install and use the Video Elements theme. Please refer to the “Installation and Usage” pdf document included with your theme package. I have linked a live version of this document here for your reference.

Requirements, Limitations and Unknowns

The star ratings feature of the Video Elements theme requires that you download and activate the WP-PostRatings plugin by Lester Chan. Once activated, please refer to the ratings configuration instructions found within the Video Elements user guide.

The Video Elements theme has been tested on WordPress versions 2.3 and 2.5 ONLY. Any limitations or problems with using this theme on anything below 2.3 are unknown and unsupported.

The Video Elements theme has been tested and is fully compatible with the more popular web browsers including FireFox, IE6.0, IE7.0, Safari and Opera. Any limitations or problems caused by other browsers are unknown and unsupported.

Please leave credit where credit is due. Please DO NOT remove the WPelements.com reference found within the theme footer.

Video Elements Theme - Single Site License ($25.00)

The Video Elements Single Site License gives you the right to use Video Elements on a single website. You can also modify the theme as per your requirements, but you must leave the “wpelements.com” footer link in tact. Any future upgrades or revisions to this theme will be free of charge for anyone that has purchased the original Video Elements theme.

Video Elements Theme - Multi Site License ($75.00)

Video Elements Multi Site License gives you the right to use Video Elements on a as many sites as you like. You can modify the theme as per your requirements, including removing the footer link. Any future upgrades or revisions to this theme will be free of charge for anyone that has purchased the original Video Elements theme.

UPDATE:
For those that purchased the Video Elements theme before April 11th, I have released an update that fixes two bugs found in the initial release including the “clearing of coverflow settings” as well as the “pagination issue” found within the gallery.php page template. I have sent all of you re-download links via e-junkie, or you can download the patched files here.

DESIGN NOTES:
The first thing you might notice is that I eliminated the 3 column footer shown in the original theme concept. The reason behind this is that there was just too much information on one screen which made the theme much too cluttered. Also, I played with several “coverflow” options for the featured video bar at the top, but there were so many issues (browser compatibility, integration problems, etc.) with most of them that I stuck with my original implementation.

Introducing the “VideoFlick” WordPress Theme v1.0

Jason — Thu, 03 Apr 2008 21:35:44 +0000

To say the least, I have been hard at work on several projects this last few months including websites, business plans, proposals, and of course WordPress themes. Since the release of one of my latest projects called TrailerFlick.com, I have received several emails and inquiries about the design. After several offers from miscellaneous users to purchase the theme and even the site, I finally decided to build and release a new WordPress theme called “VideoFlick” which was designed directly after the TrailerFlick theme.

A Video Gallery Style WordPress Theme

VideoFlick is a video gallery style WordPress theme including a fully integrated and customized version of “mediabox” developed by Iaian7. VideoFlick features a galley style layout with a primarily thumbnail based navigation scheme. Simply click a thumbnail and the video of your choice is launched in a full screen “ajax” window. Currently, VideoFlick supports several video formats including Flickr Video, MySpace Video, Revver, Veoh, Viddler and Vimeo, YouTube, Google Video, MetaCafe, DailyMotion, FLV (Flash) Video, Quicktime and Windows Media Video.

Other Features

The VideoFlick theme is obviously centered around video blogging, but unlike the TrailerFlick theme, VideoFlick allows you to add a full description for each post. Simply click the post title to go to the single post page to read more about the video. I have also integrated a fully wigitized sidebar which allows you to customize how users interact with your VideoFlick enabled WordPress site.

Four Layout and Color Styles

The VideoFlick package includes four different layout and color styles which allows you to fully customize the look and feel of your video gallery. These styles include portrait and landscape thumbnail layouts, as well as dark and light color schemes. Simply choose the style you wish to use from the design menu and you are good to go.

I have created a live demo so that you can see exactly what the theme can do. When viewing the demo, you can also cycle through the different theme styles by using the theme switcher in the sidebar. Click here to view the live demo for VideoFlick.

Installation and Usage

Upon purchase and download, you will most likely will want some direction on how to install and use the VideoFlick theme. Please refer to the “Installation and Usage” pdf document included with your theme package.

Limitations, Unknowns and Requirements

The VideoFlick theme has been fully tested on WordPress versions 2.3 and 2.5 ONLY. Any limitations or problems with using the theme on anything below version 2.3 are unknown and unsupported.

The VideoFlick theme has been tested and is fully compatible with the more popular web browsers including FireFox, IE6.0 and above, Safari and Opera. Any limitations or problems caused by other browsers are unknown and unsupported.

The VideoFlick theme lists static pages (ie: about us, etc) at the very top of the site, but you are limited to 3 pages. Any more than 3 static pages will break the page layout.

Please leave credit where credit is due. Please DO NOT remove the WPelements.com reference found within the theme footer.

VideoFlick Theme - Single Site License ($25.00)

The VideoFlick Single Site License gives you the right to use VideoFlick on a single website. You can also modify the theme as per your requirements, but you must leave the “wpelements.com” footer link in tact. Any future upgrades or revisions to this theme will be free of charge for anyone that has purchased the original VideoFlick theme.

VideoFlick Theme - Multi Site License ($75.00)

The VideoFlick Multi Site License gives you the right to use VideoFlick on a as many sites as you like. You can modify the theme as per your requirements, including removing the footer link. Any future upgrades or revisions to this theme will be free of charge for anyone that has purchased the original Video Elements theme.

HOW TO ENABLE POST RATINGS:
Many of you have been asking me if I can help modify the VideoFlick theme to work with the popular WP-PostRatings plugin by Lester Chan. Instead of modifying and re-releasing the theme, I figured I would just show you how to do it on your own in three easy steps.

First, open “style.css” and add the following code at the very bottom.

#theratings img{ width:auto; height:auto; position:static; }

Next, open “index.php”, find “

” and replace it with the following code.

Finally, open “single.php”, find “

” and replace it with the following code.

WPelements.com Now Running WordPress 2.5

Jason — Sun, 30 Mar 2008 00:07:10 +0000

WordPress 2.5 was officially released today, and in typical “Jason” fashion, I have already upgraded all my WP powered sites to the new version. First impressions are good so far. The new Admin control panel took me all of about 5 minutes to get used to. The biggest improvement I have found so far from an authoring standpoint is that adding media (images, audio and video) is ten times easier with a slick new ajaxified interface. So far, things are looking good, and I have found that all my themes are compatible with no changes necessary. More from WordPress.org below…

“WordPress 2.5, the culmination of six months of work by the WordPress community, people just like you. The improvements in 2.5 are numerous, and almost entirely a result of your feedback: multi-file uploading, one-click plugin upgrades, built-in galleries, customizable dashboard, salted passwords and cookie encryption, media library, a WYSIWYG that doesn’t mess with your code, concurrent post editing protection, full-screen writing, and search that covers posts and pages.”

Head over to WordPress.org to get your version 2.5 now…

5thirtyone.com Releases “The Unstandard” WordPress Theme

Jason — Fri, 21 Mar 2008 15:03:59 +0000

Derek Punsalan of 5thirtyone.com just released his latest WP theme called “The Unstandard“. If you are not familiar with his work, just take a look at my own WPelements.com, which is actually a HIGHLY modified version of Derek’s “Grid Focus” them released earlier last year. “The Unstandard” theme plays on the fact that most of us are very visually minded. In other words, sometimes the best way to convey your message is through a picture. “The Unstandard” presents a primarily image based post navigation rather than words. Continue reading below.

“The Unstandard WordPress theme is released / shared with the intent of breaking the typical blog mold. Farewell to the blase reverse chronological text heavy front pages, and hello to visuals & imagery to lure visitors deeper into your website / blog. Originally developed for personal use, and modified for release, I felt that an update to the WordPress themes made available on 5thirtyone.com was due.”

The Massive News “Mobile Edition” WordPress Theme

Jason — Fri, 07 Mar 2008 03:53:46 +0000

WordPress, the iPhone and iPod Touch have finally become best friends with the introduction of my latest theme, “Massive News” Mobile Edition. The popularity of the iPhone and iPod Touch are on the rise, and I felt it just made sense to create a WordPress theme that is built entirely for optimized viewing on both devices. The Massive News Mobile Edition WordPress theme does just that, bringing you all the perks of WordPress to boot.

I have been interested in mobile web development since the introduction of the Sony PSP several years ago, but the iPhone really made things interesting with it’s near full browsing capabilities. Massive News Mobile is a light weight, clean, fast and elegant theme that is a perfect solution for anyone that needs to deploy a mobile friendly site for the iPhone or iPod Touch.

Have a look for yourself… just point your iPhone or Touch browser to http://www.wpelements.com/demos/massivemobile/ for a full working demonstration of the theme.

How to Post Featured Content

Simply create a 90×90 pixel image that you want to use as your featured image, send it the the optional excerpt field when writing a featured post, then just make sure to create and post your featured articles within a category called “Featured”. That’s all you have to do. Once you click submit, you featured article will be displayed on the front page of your mobile site.

Installation, License & Download

Upon download, you agree that in no way shape or form that the Massive News Mobile theme files will be Re-Sold or Re-Distributed. Also, please leave credit where credit is due.

In order to install the Massive News Mobile theme, download the package below, unzip, and upload the directory titled “massive-mobile” to your “wp-content/themes” folder and activate the theme within your WordPress admin.

The Massive Mobile theme uses Lester Chan’s WP-PageNavi plugin for pagination. I have already modified the pagenavi CSS to match the Massive Mobile theme. All you have to do is upload the included “pagenavi” folder to your “wp-content/plugins” folder and activate it within your WordPress admin.

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.

Latest Version

Massive News Mobile v1.0 (March 6th 2008)
Massive News Mobile Theme (556KB ZIP)

UPDATE:

Almost forgot… to customize your site logo, all you have to do is edit “logo.jpg” located within the “massive-mobile/images” theme folder.

The Featured Content Gallery Plugin

Jason — Fri, 29 Feb 2008 00:43:31 +0000

Ever since I released the Massive News WordPress theme, people have been asking me if I could help them integrate a similar “Content Gallery” feature within their own theme. After numerous requests, I finally decided to make the “Content Gallery” WordPress Plugin for anyone to use with any WordPress theme.

SmoothGallery is a great little script developed by JonDesigns.net which just happens to be a perfect addition to any WordPress theme to display a gallery of featured articles or posts. All I did was automate the process of adding and managing the script through a handy plugin.

Click HERE to head over the the “Content Gallery” plugin page for a full demo and download.

My First Attempt at a Plugin - “Fancy Zoom”

Jason — Wed, 27 Feb 2008 23:50:38 +0000

While I have modified and edited several plugins made by other developers, I have never really had the need to make one for myself. Typically, if I want more functionality out of any of my sites, I just modify the theme files directly. But, there is a first time for everything, and ever since I launched WPelements.com I have been wanting to write a plugin of my own. So, today I sat down for a few minutes, read a little about developing plugins on the official WordPress Codex, and finished my first plugin called “Fancy Zoom” in about 10 minutes or so.

Fancy Zoom is actually the name of a wonderful little script developed over at Cabel’s Blog that once implemented automatically generates a “fancy” zoom effect for linked images. Adding and using this script is actually very easy to do on your own, which is why I chose it as the subject for my first plugin.

The Fancy Zoom WordPress plugin I created simply makes the process of manually adding these scripts and files to your theme a little easier. All you have to do is upload the Fancy Zoom plugin to your plugins directory and activate it. The final step involves replacing the tag, typically located in your theme’s header file with:

That’s it… Any image links you use on your site will now have the “fancy” zoom effect.

Again, this is my first attempt at a WordPress plugin, if you can even really call it a plugin at all. But, I have already moved on and am working on my second plugin which will add the featured content carousel found in my Massive News theme to any WordPress theme. This next plugin will also include a new and improved control panel for managing the carousel.

Download the “Fancy Zoom” WordPress Plugin HERE. If you want to see what the effect looks like, head over to Cabel.name or my own portfolio site at 32eighteen.com.

TrailerFlick.com - WordPress in its Lightest Form

Jason — Wed, 20 Feb 2008 16:38:42 +0000

The more and more I learn about WordPress, the easier my life becomes in relation to web design and development. It seems like every site I make just makes more sense when built with WordPress in mind. Case in point… I just relaunched a fun project site of mine called TrailerFlick.com using the most basic WordPress functionality.

The latest TrailerFlick.com theme proves that more is not always necessarily better. No RSS feeds, no single pages, no comments… just a very simple, easy and clean theme that allows users to browse and view movie trailers within 1 or 2 clicks. Several components add to the experience such as the image link hover script from CSS Globe and the wonderful “mediabox” lightbox script from iaian7.com.

I will be adding many more movie trailers within the next few days or so, but you can already view several great trailers right now at TrailerFlick.com.

UPDATE:

After receiving dozens of positive comments and suggestions, I have updated TrailerFlick.com and have enabled commenting as well as RSS. Hope you continue to enjoy TrailerFlick.com even though its not quite as “light” as it was before.

WordPress “Rainbow Feather” Theme “V3″

Jason — Tue, 12 Feb 2008 20:30:38 +0000

This is actually an update to a very unique theme release last year called “Rainbow Feather” by Julian Klewes over at h4×3d.com. If you are looking for a free theme that set’s your WP site apart from the rest, then Rainbow Feather is the theme for you. This is a fluid, widget enabled and very colorful theme that even comes complete with it’s own user manual. The Rainbow Feather theme page can be found here, the full demo here and don’t forget to check out some other great WP themes at h4×3d.com.

Yahoo Media Player is the Perfect WordPress Mp3 Solution

Jason — Mon, 11 Feb 2008 05:04:49 +0000

No plugin necessary for the new Yahoo! Media Player which just happens to be a perfect solution for embedding and playing Mp3 links on your site. In fact, building a WordPress plugin for this app would be a huge waste of time considering how simple integration and usage of this player is. All you have to do is add the Yahoo Media Player script (as shown below) to your template header file, then just link any uploaded Mp3 within your post. Linked Mp3’s are then automatically displayed with play buttons within your post. Link more than one Mp3 within any post to create a playlist. Thats it…

Integration:

Usage:

First link

I have been looking for a good replacement plugin for the dated 1pixelout solution and the Yahoo Media Player gets the job done better and cleaner than anything else out there. Head over to MassivePress.com for a full demo.

My First Tutorial - Post Thumbnails and Intro Text

Jason — Sat, 26 Jan 2008 04:40:44 +0000

I have been trying to think of something good to post for my first tutorial on WPelements.com and finally settled on how to create clean post thumbnails and intro text similar to that seen on this site as well as one of my other sites, MassivePress.com. In fact, the WPelements.com theme you see here was spun from the code I created for MassivePress.com. I like to use post thumbnails and post intro text for several reasons, but over all, it’s to keep the site looking clean and uniform. Also, I believe it makes the site more interactive, easier to follow, and allows you to put more content in front of your users utilizing less space.

The post thumbs and intro text you see here and on MassivePress.com are made possible by a combination of some simple CSS (of course) and a few “loop” customizations utilizing “the_excerpt” and “the_content_rss” template tags. Let’s start below with the CSS I use over at MassivePress.com.

The Post Thumbnail CSS

I find that a 140×140 pixel image works just about perfect for post thumbs wrapped in a 1px border with about 4px of padding around it. The CSS I use over at MassivePress.com looks like this:

#introIMG {

float:left;

margin-right:8px;

}

#introIMG img {

border:none;

padding:4px;

border:1px solid #BDBDBD;

}

The first part defines the “div” properties for which we want to float to the left of our intro text. The second part defines the properties for the actual post thumbnail image including a 1px border to give it that little extra something. Now that we have the thumbnail defined, what about the intro text?

The Post Intro Text CSS

The post intro text CSS ensures that we don’t have any text wrapping around the bottom of the post thumbnail image. Basically all I do is hide the extra text I don’t want my users to see until they click through to the actual post. There are other ways to do this by using the “more” tag, but I like it better this way.

#postMain {

height:212px;

overflow:hidden;

margin-bottom:15px;

}

You might call this a hack, but it works like a charm by cutting off any text past 212 pixels which just happens to line up perfectly with the height of the post thumb including padding and margin. On to the template code…

Customizing Your Loop

Now that the CSS is all finished, all there is left to do is call it out in the loop within your main index template. The example below is specific to the MassivePress.com theme, but I cleaned it up a bit just to make it more legible. Depending on how/where you want your post titles, post date, etc. to show up you might might to move things around a bit.

Writing Your Post

By using “the_excerpt” and “content_rss” template tags, you don’t have to change the way you write your posts in the least. After you are done writing your post you just have to upload a 140×140 pixel image that you want to use for your post thumbnail and place it in the optional excerpt field as shown below. The “the_excerpt” template tag will pull the thumbnail image out of the except and link it directly to the post permalink. The “content_rss” tag strips the rest of your post down to text and displays it next to the post thumbnail.

Hopefully my first shot at a tutorial wasn’t a total waste of time, but your comments are appreciated either way.

Introducing the “Massive News” WordPress Theme

Jason — Wed, 16 Jan 2008 01:17:10 +0000

The Massive News WordPress theme is my first attempt at providing a premium theme for a not so premium price, FREE. Massive News is a two column Widget enabled theme which is very clean, fully customizable and very simple to use.

View the LIVE DEMO…

Featured Content Carousel

The fully automated featured article carousel is one of the many premium features of the Massive News WordPress theme. Featured article images, Links and Descriptions can easily be edited through the Massive News control panel within your WordPress installation.

Fully Featured Control Panel

Virtually every aspect of the Massive News Theme is editable through the theme control panel including sidebar items, carousel component and much more. This makes most theme customizations as easy as possible without having to edit theme files directly.

How to use the Post Thumbnail Feature

Using the Post Thumbnail feature is actually very simple. Upload a 140×140 pixel image that you want to use as your post thumbnail. After the image has been uploaded, place your html image tag within the “Optional Excerpt” field.

License & Download

I am offering the Massive News Theme free of charge this time around just to test the waters. Upon download, you agree that in no way shape or form that the Massive News Theme files will be Re-Sold or Re-Distributed. Also, please leave credit where credit is due.

In order to install the Massive News theme, download the package below, unzip, and upload the directory titled MassiveNews to your “wp-content/themes” folder.

Massive News Theme (429KB ZIP)

WPelements.com

Introducing the “TV.Elements” WordPress Theme

It’s All About The Video

Posting is Simple

Other Features

Installation and Usage

Requirements, Limitations and Unknowns

TV.Elements Theme - Single Site License ($50.00)

TV.Elements Theme - Multi Site License ($125.00)

Coming Very Soon… The TV.Elements WordPress Theme

Just a Small Teaser for my Next Video Theme

More Video Formats for VideoFlick & VideoElements

VideoFlick InstantView Patch Download

VideoElements InstantView Patch Download

Join the WPelements.com Affiliate Program

Standard 468×60 Advertisement

Standard 300×250 Advertisement

Standard 125×125 Advertisement

Introducing the “Charred” WordPress Theme

Writing a Post With Thumbnail

Setting Up The Featured Articles SideBlog

Change Your Logo

Download the “Charred” WordPress Theme

A Slightly New Look for WPelements.com (v1.something)

Introducing the “Video Elements” WordPress Theme v1.0

A Video Gallery Style WordPress Theme

It’s All About The Video

Featured Videos in Two Places

Two Different Layout Styles

Installation and Usage

Requirements, Limitations and Unknowns

Video Elements Theme - Single Site License ($25.00)

Video Elements Theme - Multi Site License ($75.00)

Introducing the “VideoFlick” WordPress Theme v1.0

A Video Gallery Style WordPress Theme

Other Features

Four Layout and Color Styles

Installation and Usage

Limitations, Unknowns and Requirements

VideoFlick Theme - Single Site License ($25.00)

VideoFlick Theme - Multi Site License ($75.00)

WPelements.com Now Running WordPress 2.5

5thirtyone.com Releases “The Unstandard” WordPress Theme

The Massive News “Mobile Edition” WordPress Theme

How to Post Featured Content

Installation, License & Download

Latest Version

The Featured Content Gallery Plugin

My First Attempt at a Plugin - “Fancy Zoom”

TrailerFlick.com - WordPress in its Lightest Form

WordPress “Rainbow Feather” Theme “V3″

Yahoo Media Player is the Perfect WordPress Mp3 Solution

Integration:

Usage:

My First Tutorial - Post Thumbnails and Intro Text

The Post Thumbnail CSS

The Post Intro Text CSS

Customizing Your Loop

Writing Your Post

Introducing the “Massive News” WordPress Theme

Featured Content Carousel

Fully Featured Control Panel

How to use the Post Thumbnail Feature

License & Download