• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Date: Tuesday, 03 Dec 2013 12:36

Twitter recently updated their API to a newer version, some WordPress plugin authors didn’t update their plugins and they stopped working. Many tutorials on the web about how to add a custom twitter widget in WordPress without a plugin were relying on the old API, so these tutorials are all obsolete now. I was trying to update Leland’s old post but the to do that without a plugin is actually not an ideal situation any more.

A custom twitter widget showing latest tweets

Twitter’s new API requires authorization and authentication to make requests. This means that in order to do that we need to create a Twitter App first, and then after authentication we will be able to retrieve data we need to display for recent tweets. To parse this data into something readable with clickable links and tags would require more work.

Tim Whitlock has already written an excellent WordPress Twitter API library which can be added to any WordPress plugin or site allowing users to authenticate their website with twitter. I first wanted to write a tutorial about how to do that, but then I decided that there is already an excellent plugin written by the same developer, so why reinvent the wheel all over again?

Adding A Custom Twitter Widget in WordPress

First thing you need to do is install and activate Latest Tweets plugin. After activating the plugin, go to Settings » Twitter API to enter authentication information. To get authentication credentials you would need to create a Twitter app.

To create a Twitter App for your site, you need to visit Twitter Developers website. Click on ‘Create a new app’ button. On the next page provide your application details. Simply enter a name for your app, a little description, your website URL and then use the same URL as Callback URL for the app.

Creating a Twitter App

Accept the Twitter API terms and click the create app button. Twitter will now create the app and will take you to your app page. On this page you will see your authorization credentials. However, there is one more thing you need to authenticate your API requests, which is access token. Scroll to the bottom of the page and click generate access token button. Twitter will now generate an access token and access token secret for you.

Copy consumer key, consumer secret, access token, and access token secret keys and paste them in Latest Tweets’s Twitter API Authentication Settings page. Click on Save Settings button and the plugin will authenticate your site with twitter. Upon success, it will show you the message, authenticated as @username.

To display your latest tweets, simply go to Appearance » Widgets and drag & drop Latest Tweets widget to a sidebar. You can add a twitter handle and number of posts to display. Save widget and preview your website.

Latest tweets displayed using custom twitter widget

You can also add tweets to your posts or pages using shortcode [tweets]. The shortcode accepts same arguments as the widget so you can set number of tweets to display and even choose a different username.

[tweets max=5 user=themelab]

Customizing Style and Appearance of Custom Twitter Widget

Customizing the appearance and style of latest tweets widget is simple. The plugin uses three css classes which you can override in your theme’s stylesheet. For example, I used this:


.latest-tweets { 
background:url('http://example.com/wp-content/uploads/2013/11/twitter1.png') no-repeat top;
}
p.tweet-text { 
padding:0px;
margin:10px 0px 0px 0px;
color:#000;
font-family:'Open Sans', Verdana, Sans-Serif;
font-size:14px;

}
p.tweet-details { 
padding:0px;
margin:0px;
font-size:x-small;
}

I hope this article helped you add a custom Twitter widget to your WordPress site. The custom widget allows you to match the colors and style of your theme and the tweets don’t look so out of place. On the other hand, Twitter’s widgets may come with Twitter’s branding but they are still quite powerful and easy to add. Which one do you prefer to add on your website? Let us know by leaving a comment below.

The post How to Add a Custom Twitter Widget in WordPress appeared first on Theme Lab.

Author: "Noumaan Yaqoob" Tags: "WordPress Tutorials"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 04 Nov 2013 16:01

WordPress adds a lot of stuff through wp_head() hook included in most WordPress themes. Most of this stuff I would consider unnecessary. But for many users, a few lines of extra code is probably not much of a bother. It doesn’t slow down their site or harm their search rankings. As for me, I like to keep things simple, clean, and if I don’t need some code on every page of my site, then it must be removed.

In this quick tip post, I will show you how to remove the following unnecessary code from your site’s wp_head section:

  • Really Simple Discovery (RSD) link
  • Windows Live Writer link
  • Shortlink for posts

The simplest most efficient way I have found to clean up the wp_head section, is by using WordPress SEO plugin by Yoast (Checkout our video review of WordPress SEO). Many people think of WordPress SEO plugin as just an SEO plugin. I look at it as a website optimizer plugin. It comes with lots of goodies that optimize the over all performance of a WordPress site, and cleaning up the wp_head section is one such feature.

Simply install and activate Yoast’s WordPress SEO plugin. Upon activation, it adds a WordPress SEO menu item in your WordPress admin sidebar. You need to go to WordPress SEO » Titles & Metas and scroll down to Clean up the <head> section.

There you can simply uncheck the items you want to remove from wp_head section of your WordPress site.

Cleaning up wp_head() Without a Plugin

To remove all unnecessary code from wp_head() section without using a plugin you need to remove all these items from wp_head() hook. Simply add this code in your theme’s functions.php file:

<?php
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'start_post_rel_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'adjacent_posts_rel_link' );
remove_action( 'wp_head', 'wp_shortlink_wp_head' );
?>

Unlike WordPress SEO plugin, the above code also removes post relational links, shortlink, and WordPress generator information from your site’s head section.

As I said earlier that these few lines don’t do any harm to your website’s page load speed or search rankings. However, if you just want to remove useless code then you should start with this.

The post Remove Unnecessary Code from wp_head appeared first on Theme Lab.

Author: "Noumaan Yaqoob" Tags: "WordPress Tips"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 11 Oct 2013 17:21

Displaying your latest blog posts is an integral part of any blog design. The most popular method of displaying recent posts is to use the recent posts widget; which is built into the core version of WordPress. All you have to do is drag the widget from your available widget list to an active widget area.

Recent Posts Widget

The recent posts widget is basic. There are no options beyond defining how many posts are listed and whether the date of each post is displayed. An alternative method is to use the wp_get_archives function. The function can be used to display a list of date based archives.

In this tutorial, we will show you how you can use the wp_get_archives function to display recent posts on any part of your WordPress website.

How to Display Recent Posts in WordPress Using WP Get Archives

The wp_get_archives function can be used in any WordPress template. It can be called without any parameters.

<?php wp_get_archives(); ?>

The default function will list all monthly archives in descending order in the <li> format. This would provide a list of recent posts like this:

Default Output of WP Get Archives

Eight parameters are available for use. These can be used to control exactly what posts are displayed on your list.

Let us look closer at what you can do with each one.

  • type (string) – Four date based list types are available. The other two options lists all posts. postbypost lists all posts by post date and alpha lists posts by post title.
    • yearly
    • monthly (default)
    • daily
    • weekly
    • postbypost
    • alpha
  • limit (integer) – The number of archive links to list. The function will display all lists unless advised otherwise.
  • format (string) – The format of your list items. The default is html.
    • html – Wraps posts inside HTML list items (<li>).
    • option – List posts in a drop down list using <option> tags.
    • link – Wraps posts inside <link> tags.
    • custom – Allows you to customise what is placed before and after posts.
  • before (string) – The text or HTML that is used before the post link when custom has been chosen as the format.
  • after (string) – The text or HTML that is used after the post link when custom has been chosen as the format.
  • show_post_count (boolean) – Allows you to display the number of posts in date based post lists such as yearly and monthly.
    • 1 (True)
    • 0 (False)
  • echo (boolean) – If you set echo to false, the output will be returned and not displayed on your website. It is not a parameter you will use too often as it already defaults to true if it is not used.
    • 1 (True)
    • 0 (False)
  • order (string) – The order in which post items are displayed. The default order is descending.
    • ASC
    • Desc

We showed you previously how a list of monthly archives can be displayed by simply calling the function without any parameters i.e. wp_get_archives(). The same output can be achieved using all parameters.

<?php wp_get_archives = array(
	'type'            => 'monthly',
	'limit'           => '',
	'format'          => 'html', 
	'before'          => '',
	'after'           => '',
	'show_post_count' => false,
	'echo'            => 1,
	'order'           => 'DESC'
); ?>

As you can see, three of the above parameters are blank. In practice, you would simply omit these parameters rather than list them.

Examples of WP Get Archives

The wp_get_archives function can be used in a lot of interesting ways. It is not only for displaying recent blog posts in your sidebar or footer. You can also use the function to create archive pages and sitemaps.

Let us look at some examples of how the function can be used. This is the best way to illustrate how easy it is to display post archives using wp_get_archives.

The code below will list your ten latest posts in descending date order.

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10 ) ); ?>

The last six months of monthly archives can be displayed using the code below. Note that date archives will always display the full number of posts required. So if you published posts in every month except March; monthly archive links would be displayed for January, February, April, May, June and July.

<?php wp_get_archives( array( 'type' => 'monthly', 'limit' => 6 ) ); ?>

The code below displays the last twelves of weekly archives. It also denotes the number of posts every week. As noted previously, twelve full weeks of weekly archives will always be displayed, therefore weeks without posts will not be listed.

<?php wp_get_archives( array( 'type' => 'weekly', 'limit' => 12, 'show_post_count' => 1 ) ); ?>

The alpha type can be used to displayed all of your blog posts. This is useful for archives and sitemaps.

<?php wp_get_archives('type=alpha'); ?>

The custom format allows you to define what is used before and after post links. A simple vertical bar can be used to divide links.

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'after' => ' | ' ) ); ?>

The above code would output: Post 1 | Post 2 | Post 3 | Post 4 | Post 5 |

The option format can be used to display a drop down menu for monthly archives.

<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
  <option value=""><?php echo esc_attr( __( 'Select Month' ) ); ?></option> 
  <?php wp_get_archives( array( 'type' => 'monthly', 'format' => 'option', 'show_post_count' => 1 ) ); ?>
</select>

We encourage you to try the wp_get_archives function out by yourself. You will soon realise how useful the function is.

Good luck.

The post How to Easily Display Recent Posts in WordPress appeared first on Theme Lab.

Author: "Leland" Tags: "WordPress Tips"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 10 Oct 2013 20:05

Lightbox popups are proven to work when it comes to getting more email subscribers. However most beginners have a hard time creating a lightbox popup due to the technical knowledge that is required. In this article, I will show you how to create a lightbox popup in WordPress without any code knowledge using a plugin called OptinMonster.

Before I start, I want to say that most lightboxes are extremely annoying. What I like about OptinMonster is their exit-intent functionality that allows you to only show the message when the user is about to leave your website. Think of it like a guest leaving your house, and you invite them to visit again. This is exactly what OptinMonster allows you to do with their exit-intent functionality.

First thing you need to do is download the OptinMonster plugin.

Next, you can either watch the video tutorial created by the folks at OptinMonster or continue reading the tutorial.

Ok if you don’t like watching the video, then follow this tutorial.

Once you have installed and activated OptinMonster, click on the OptinMonster menu. You’ll see a blue “Create New Optin” button.

OptinMonster Settings

OptinMonster comes with numerous optin types, but for the sake of this tutorial lets go ahead and select Lightbox.

OpitnMonster Lightbox

The next step is where you configure the main settings. First you need to add the title which is used to identify the optin form in the admin area. Next , enter the optin delay time in milliseconds (so 7000 would be 7 seconds). This allows you to delay the optin display. But I recommend using the exit-intent setting.

OptinMonster Exit-Intent

OptinMonster’s exit-intent technology track user’s mouse gesture and velocity as they browse through your website. This allows the plugin to detect the precise moment the user is about to leave, and prompts them with a targeted campaign.

The last option on the configure tab is to connect your email service provider. OptinMonster integrates with Aweber, MailChimp, and numerous other email service providers. When you choose an email service provider, OptinMonster will show you required fields for that particular email service provider. It is usually an API Key, user name or account email address. You can obtain your API key from your email service provider.

When you click save settings, you will be taken to the design screen. OptinMonster design customizer emulates the WordPress theme customizer. Select the theme and click on the customizer.

OptinMonster Design

Here is how the customizer look like:

OptinMonster Customizer

The last thing you need to do is choose where you want to display the lightbox popup. OptinMonster allows you to display the lightbox popup on your entire site or specific areas of your site. For example, you can create different optins and show them for specific categories, pages, etc.

OptinMonster Output Settings

Once you’re done and click save settings. That’s it. You have now created a lightbox popup in WordPress.

OptinMonster allows you to do A/B testing, and it shows you analytics as well.

I have tried numerous lightbox plugins in the past, but most of them are full of bugs, and they will slow down your site. OptinMonster is by far the best lead generation plugin for WordPress because it is very well-coded, and it is extremely easy to use.

I hope that this article helped you create a lightbox popup in WordPress. Let me know your thoughts by leaving a comment below.

The post How to Create a Lightbox Popup in WordPress with No Code Knowledge appeared first on Theme Lab.

Author: "David Pegg" Tags: "WordPress Plugins"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 10 Oct 2013 17:10

Video is one of the most popular mediums for broadcasting information online. There are dozens of high traffic video services online such as Daily Motion, Vimeo and MetaCafe. With over one billion active users every month, YouTube is far and away the most popular video website online.

In this tutorial, we will show you how you can add videos into your content. We will show you how to add videos to your website design and talk about some of the video plugins that are available for WordPress.

How to Add Videos to Your Website Design

Integrating a video directly into your website design is useful if you have an important video you want to show to all visitors. For example, an introduction video that explains what your company does. This could be placed in a prominent area such as your header, sidebar or footer.

To do this, you need to get the HTML embed code for the video you want to publish. The steps below show you how to acquire the HTML embed code from YouTube, however the process is similar on all video websites.

The first thing you need to do is locate the video that you want to display on your website.

Find Your Video

Underneath the video you will see an information box with links such as About, Share, Add To, etc. Click on the “Share” tab and then click on “Embed”. This will highlight the HTML embed code for your video.

Find Video Embed Code

If you are adding a video to an area such as your sidebar or footer, you will probably need to reduce the width of the video. You can do this by clicking on the video size option underneath. A couple of preset sizes are available, however if you are reducing the width of your video, you should choose the custom size option so that a smaller width can be entered.

Once you are happy with the dimensions of the video, copy the embed code.

Video Size

Next, you need to add your video embed code to the suitable theme template. Theme files are located in the www.yourdomain.com/wp-content/themes/THEMENAME/ folder. You can edit templates manually using the file manager through your hosting control panel or by overwriting the files using an FTP client. If you have made your themes writable, you can also modify them directly through your theme editor (located in the Appearance section of the WordPress admin area).

Add Video to Theme

If your WordPress theme is widgetized, it may be more practical to integrate videos into your design using widgets. All you have to do is drag a text widget into a widget zone and paste the HTML embed code for your video. Then save the widget.

Add Video as Widget

How to Manually Add Videos To Your Content

The HTML embed code for your video can also be pasted directly into your posts and pages. The text editor has to be chosen before pasting the code for the video to display correctly. If you paste the code into the visual editor, the HTML code itself will be published in your content (i.e. instead of the video).

Visual and Text Editor

If you plan on publishing videos regularly, it is worthwhile disabling the visual editor completely. There is an option to do this at the top of your profile page (www.yourwebsite.com/wp-admin/profile.php).

Disable Visual Editor

Since WordPress 2.9, you can embed videos into your content area by simply entering the URL of the video.

For example, entering:

http://www.youtube.com/watch?v=-K7aTPT56-Q

Would display:

Over twenty video services are supported by the WordPress embed feature including Twitter, PhotoBucket and blip.tv.

The embed shortcode allows you to change the size of videos directly within your post or page. All you have to do is place the video URL inside the embed shortcode. For example:

[ embed width="300" height="169"]http://www.youtube.com/watch?v=-K7aTPT56-Q[/embed ]

Would display:

How to Upload Videos to Your Website

Most website owners upload their videos to external video services such as YouTube. It is more practical to do this as you do not incur any bandwidth costs and you can also earn a little money from your uploaded videos. Uploading to a video website also allows other website owners to share your content easily; either via the video URL or by embedding your videos on their website.

However there are times when it is better to upload your videos directly to your WordPress website. Member websites, for example, normally keep their videos private. Additionally, people who want to share private videos with friends do not want always want to share their videos with the world as well.

Videos can be uploaded to your WordPress website in the same way that images and other media are. Simply click on the media button that is located above your post editor.

Add Media Button

You can also upload new videos directly through the media section. The “Add New” link is located in your WordPress admin menu and at the top of your media library.

Media Library

Next, click on the “Upload Files” tab tab in the media pop up. Then select the video file you want to upload and WordPress will start uploading the file to your website.

Insert Media

A title, caption and description can be added for each video you upload.

Attachment Details

WordPress uses the video shortcode to embed uploaded videos. The shortcode will automatically be added to your post once you click on the media insert button. For example:

[ video mp4="http://www.yourwebsite.com/wp-content/uploads/2015/01/sample_mpeg4.mp4"][/video ]

Additional parameters can be defined. For example, the code below defines the size of the video and will automatically play the video when a page is loaded.

[ video mp4="http://www.yourwebsite.com/wp-content/uploads/2015/01/sample_mpeg4.mp4" autoplay="on" width="500" height="350"][/video ]

The final output looks great. From a visitor’s point of view, there is no difference in whether your videos are hosted on your own website or on a video service such as YouTube.

Video Output

One problem you may encounter when uploading videos to your own website using the media uploader is WordPress’s maximum upload file size limit. It is common for a WordPress website to have a maximum file upload file size of 8MB. Some hosting companies restrict this to only 2MB. The php.ini file has to be modified in order to increase this file limit. If you are unable to do this yourself, please contact your hosting company for assistance. Please note that many hosting companies do not allow their customers to increase the maximum upload file size limit.

Videos tend to have large file sizes. The overall file size depends on the length of the video, quality of the recording and its video format (MP4, AVI, MOV etc). Rather than upload videos through the WordPress media uploader, it is more practical to upload files to your website using an FTP client such as FileZilla. You could upload videos directly to one of your uploads folders or create a dedicated folder for videos on your website (e.g. www.yourwebsite.com/videos/). Then display the video on your website using the video shortcode.

WordPress Video Plugins

WordPress video plugins can usually be categorised as one of two types: Those that add functionality for hosting your own videos and those that add functionality for using external video services such as YouTube.

JW Player is a good example of a WordPress plugin that improves upon WordPress’s video functionality. It allows you display flash and HTML5 audio and video and has many advanced configuration options. Another good plugin is WordPress Video Player. The player can be styled however you like it and lets you organise videos as playlists.

WordPress Video Player

A few years ago, plugins that allowed you to embed videos from websites such as YouTube were very popular. The need for using such a plugin was reduced once WordPress introduced its video embedding feature that allowed you to add videos to your content by simply inserting the URL. There are still some benefits to using a plugin instead of WordPress’s built in video embedding system. For example, YouTube embed plugin lets you define many YouTube related settings from the admin area. Such as automatically playing all of your videos and showing annotations by default. This removes the need for these settings to be defined on a video by video basis. If you want all external videos to be displayed in the same way, a plugin such as that may prove very useful.

Another interesting plugin is Automatic Youtube Video Posts Plugin. The plugin will automatically import videos from a channel or playlist and create posts for them.

Automatic Youtube Video Posts Plugin

WordPress is a great platform for publishing your own videos and videos of others. If the core version of WordPress cannot do what you want to do, check out the plugin directory at WordPress.org as there is sure to be a plugin that does.

We hope you have found this tutorial on adding videos to your WordPress website useful.

The post Easily Add Videos to Your WordPress Blogs appeared first on Theme Lab.

Attached Media: video/mp4 ( 0 ko)
Author: "Leland" Tags: "WordPress Tutorials"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 09 Oct 2013 17:21

A sitemap page allows you to list all of your website content in an A to Z style directory listing. It is designed for visitors so that they can find their way around your website more easily. Due to this, they are sometimes referred to as an HTML sitemap or a site index. The page does not have to list every single page on your website. Many websites use a sitemap page to list all of their pages and use an archive page to list all of their blog posts.

In this tutorial, we will show you how you can make a sitemap page for your WordPress blog. The plugin that we have used for this tutorial is WP HTML Sitemap.

Please note that there is a difference between an HTML sitemap and an XML sitemap. HTML sitemaps can help with SEO, however they are primarily created for users. XML sitemaps are used to show search engines where all your pages are and advise how often your pages should be crawled. They are created specifically for search engines and are not intended to be viewed by users.

How to Create a Sitemap Page For Your WordPress Blog

WP HTML Sitemap can be downloaded directly from the official WordPress plugin directory. Alternatively, you can download it through your WordPress admin area. You can do this through the “Add New” page of your plugin section. Simply search for “WP HTML Sitemap”, install the plugin and then activate it.

Install WP HTML Sitemap

The settings area for WP HTML Sitemap is located within the settings section of your admin area.

The plugin will automatically create a sitemap for you. The general settings area allows you to customise the page that is created. You can change the title of your sitemap to something different if you like (e.g. Site Index) and change the URL of the sitemap by changing the page slug. By default, the sitemap is created using a page, however you can change this to a post. You can also allow comments, pingbacks and trackbacks.

General Settings of WP HTML Sitemap

WP HTML Sitemap will display four different sections: Authors, Categories, Pages and Posts. These sections can be reordered and specific sections can be excluded from the sitemap.

The pro version of the plugin allows you to configure authors, categories, posts and pages further. Unfortunately, the pro version of the plugin is no longer available (it seems the developer did not renew his domain).

Section Settings of WP HTML Sitemap

The sitemap is added to the created sitemap page using the shortcode [wp_html_sitemap]. You can add your sitemap to any page or post by adding this shortcode to the content area.

Sitemap Page

The generated sitemap looks great with all links placed into sections in alphabetical order. Lastly, you should place a link to the sitemap in your footer or in one of your navigation menus.

WP HTML Sitemap Example

We hope you have enjoyed this tutorial on creating a sitemap page for your blog.

The post How to Create a Sitemap Page For Your WordPress Blog appeared first on Theme Lab.

Author: "Leland" Tags: "WordPress Tutorials"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 05 Aug 2013 14:35

TemplateMonster.com has got to be one of the oldest “premium” template selling companies on the net. Their business model has always interested me because:

  • They’re so freaking old. I remember stumbling across their templates back in 2004.
  • They have thousands of products, spread across many different categories.
  • They’ve managed to last this long. They must be doing something right.
  • I rarely hear about them when it comes to the “big players” or “pioneers” in the commerical WordPress theme market, even though they were probably one of the first.

I knew they sold standalone WordPress themes, but it was a surprise to me when I learned they sold a WordPress theme framework called “Cherry” along with several child themes.

It’s kind of like StudioPress with Genesis. Except StudioPress doesn’t have thousands of other templates for countless other CMS’s (not that that’s a bad thing, they just like to focus on WordPress, which is cool, just saying…)

Bias Disclaimer and Intro

Cherry LogoIf you know me well, you know I hate theme options. I like intuitive user experiences. I like when things “just work” out of the box. That may or may not affect the tone in the rest of my review.

To get an idea of the designs offered for the Cherry theme framework, browse the links above. I’m going to go over some of the things that stood out to me in the parent framework below.

Here are some quick facts:

  • It supports automatic updates, so you don’t have to mess with FTP (or whatever) to get the latest version
  • The framework/child theme relationship should ensure any changes you make (to the child theme) won’t be overwritten
  • It comes with a “Data Management” feature to save, backup, and restore your framework and child theme files.
  • It’s also based on Boostrap and comes with all the responsive goodness.
  • It’s free, download it on GitHub and follow along with the rest of my review if you’d like.

It’s also licensed under the GPL, if you’re curious about that sort of stuff.

Customizer and Theme Options Overlap

Many of the options available through the Theme Customization API were also available on the theme options page. This is kinda redundant.

With that said, I found the theme options UI to be quite pleasant and straightforward. It also didn’t clash too much with the WordPress admin UI, unlike a lot of other theme options pages I’ve seen.

It looks like the options pages are based off of the Options Framework by Devin Price, which may have contributed to that non-clashy user interface.

There are also built-in links to TemplateMonster support and documentation, as well as a “Store” to purchase additional child themes for Cherry.

cherry-store

Notice the “clown” template to the far right in the screenshot above, I’m going to mention that later.

Custom Post Types and Shortcodes

Cherry custom post typesThe theme framework registers a number of custom post types through the theme itself (i.e. not through a plugin).

  • Testimonials
  • Services
  • FAQs
  • Our Team
  • Slides
  • Portfolio

I’ve never been a fan of registering custom post types with the theme, as it makes it difficult for a user to switch themes and maintain their custom post type content in the future.

Speaking of making it difficult for users to switch themes, Cherry also includes a ton of built-in shortcodes (*cough* Shortcodes Should Never Be Included With Themes. Period. *cough*).

Once again, this functionality should really be included in a separate plugin. Although I realize this may have been a deliberate decision in order to “lock-in” users to the Cherry Framework, come on…people like to switch themes from time to time.

Let’s make it easy for them.

Unusual Default Logo

Cherry Default LogoThe default logo image says “WP-BS” in a dark blue, gradient-y font. I have no idea why it wouldn’t say something more generic like “Cherry” or even something like “Replace This Image.”

Obviously, you can upload a new logo image within the Customizer, or disable it in favor of a text-based logo, but I still found the default “WP-BS” logo to be very odd.

Fonts on Fonts on Fonts

Cherry lets you choose a different font for the body text, as well as headings 1 through 6, separately. There are 538 total fonts you can choose from. Let’s do the math really quick.

  • 538 fonts (mostly Google webfonts)
  • Multiplied by 7 (body text + h1-h6)
  • 3766 possible font family combinations
  • Way more combos if you include font color in the equation

Cherry Fonts

Yikes.

Personally, I think this gives the user an overwhelming amount of options, and we’re just talking fonts here. Let’s not forget, this could potentially allow a non-typographically-inclined user the ability to easily produce a very jarring combination of fonts for their websites.

If you like having quick access to hundreds of fonts, then you’ll probably like Cherry. Like I said, most of them are hosted by Google.

Conclusion

All in all, this is not a theme I would use myself or recommend to anyone else, unless:

  • They really liked the aesthetics and/or functionality of one of the Cherry child themes and couldn’t find a comparable template or theme anywhere else.
  • They understood the deal with the shortcodes and custom post types included with Cherry, and were prepared for a huge painful migration process if they were to ever switch to another theme.

The other weird things I noticed (like the “WP-BS” logo) aren’t really that big of a deal to me, since that can be easily overridden. The redundant Customizer/Options overlap is a personal pet peeve of mine, but can be pretty much ignored for the most part.

Clown WordPress themeWhen it comes to a competitive advantage for Cherry child themes, and TemplateMonster, it really comes down to the good aesthetics and hard-to-find niches TemplateMonster designs for. For example, I found a Cherry child theme for a clown/circus website. Who else makes WordPress themes for clowns?

On top of that, it doesn’t look like Cherry WordPress themes are purchased very often, some of which haven’t been purchased at all. So people who do buy them early have a (kinda) unique web design for a while.

Here’s the link again for the Cherry child themes, where you’ll probably see the clown template I’m talking about, and the very low download counts. Most I see have only been downloaded 0-3 times. And they have 224 total Cherry child themes to choose from and cost around $75 each (as of the time of publishing).

TemplateMonster seems to have a high standard for aesthetics when it comes to designs, and their Cherry WordPress theme collection is no exception. It’s important to keep in mind all the downsides, however, before purchasing.

The post Cherry WordPress Theme Framework by Template Monster appeared first on Theme Lab.

Author: "Leland" Tags: "WordPress Community"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 26 Jul 2013 12:30

I’ll admit, I was skeptical about this at first. They delayed the launch a couple times because of a “hacking” that erased all of their files. They constantly teased it on their blog for the past couple weeks. But it was finally released, and I must say, I’m impressed.

First of all, it’s basically a free theme. You can download and try it out right now (the download link is currently available on the PageLines homepage). I go over my experience with it in the video below.

Some key points

  • WordPress’ Theme Customizer is disabled (understandably)
  • DMS stands for “Design Management System”
  • It has a responsive, drag & drop 12-column grid system.
  • You adjust grid columns by clicking the left and right arrows
  • There are a number of free sections you can place into your site
  • There are also a number of Pro-only sections, and other paid addons in the Store
  • They’re definitely not shy about asking you to upgrade to the Pro version (which starts at $8/month)
  • Overall, it’s pretty cool, and you should at least try it out locally (like I did in my video)

Conclusion

There’s definitely a slight learning curve. I still haven’t got through all the available free sections you can place on your site, let alone the Pro-only and other paid ones. Sections make it easy to drag and drop various site elements like text boxes, photo galleries, and other things of that nature.

Also, you can change the logo by going to Global Settings → NavBar → NavBar Image. Like I said in the video, I’d probably just call that a logo. But it’s not really that big of a deal once you get the hang of it.

I’d love to hear your thoughts about DMS in the comments.

Further Reading

The post PageLines DMS is Pretty Cool (and free) appeared first on Theme Lab.

Author: "Leland" Tags: "WordPress Community"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 24 Jan 2013 13:26

It’s been a while. If you don’t want to read the whole story behind the theme or how to use it, here’s the condensed version:

icechimp screenshot

Story

I was browsing through my WordPress.org profile the other day and came across the Ice Breaker theme, a theme I released over two years ago, and decided it was time for an update.

Ice Breaker is a “domain parking” theme that was pretty deeply integrated into FeedBurner, specifically their RSS email subscription service. Again, the original theme was over two years ago, and times have changed.

Some Twitter followers might have noticed I asked a question on Twitter a couple weeks ago:

I received mixed answers, some use it, others don’t. The general consensus was that the technology of RSS itself was not dead, far from it actually.

But what I really should’ve asked is if FeedBurner was dead or not. Although the service is still active, articles like The FeedBurner Deathwatch Continues showed that FeedBurner isn’t exactly Google’s top priority.

Therefore, I decided to take Ice Breaker in a completely new direction.

Enter MailChimp. And IceChimp.

I’ve been quietly using MailChimp for a while now (there’s a signup form on the Theme Lab homepage if you want to join my newsletter).

I also think it’s good for a public release theme because you can sign up for a MailChimp account for free, with no credit card required. You only pay if your list reaches a certain amount of subscribers. So I decided to replace the FeedBurner integration with MailChimp.

Although I looked into some more advanced API implementations, I decided the most practical method was just using what was already available: the official MailChimp for WordPress plugin.

And since I was pretty much redoing this theme from the ground up, I decided a name change was in order: IceChimp.

MailChimp for WordPress

This theme requires the MailChimp for WordPress plugin installed and activated if you want to use IceChimp’s MailChimp-specific features. It’s free from the WordPress.org plugin directory, which means you can install it right from your WordPress dashboard.

Without it installed, you basically just get a static template with an email subscribe form in the middle. With some basic HTML knowledge you could implement any subscription service you wanted, but that’s not the point of this theme.

IceChimp FormUpon MailChimp plugin activation, the form on the theme will begin to look completely different.

Now accommodating MailChimp’s default First Name, Last Name, and Preferred Format inputs.

You’ll find that the theme has styles for pretty much every combination of setting you can think of within the MailChimp for WordPress plugin backend.

After inputting your MailChimp API key (you’ll need an account for this) you can select which list you want the form to link to.

MailChimp Settings

The only settings it won’t recognize are the “custom CSS” settings, as I deregistered the default plugin styles in the functions file so IceChimp could take over those.

But that’s not all

In the original Ice Breaker theme, I included four custom color scheme stylesheets. I used some Theme Options code I found on the web (I believe on ThemeShaper) in order to allow users to change the color scheme without touching the code.

IceChimp Color Schemes

The screenshot above shows the four color schemes (with the default form layout, no MailChimp plugin) present in the original Ice Breaker theme, which were carried over to IceChimp as well, although the way of altering the color scheme has changed.

Customizer

IceChimp CustomizerAgain, this was over two years ago, and some new ways of allowing users to customize themes have come along since then.

Yes, I’m talking about Customizer, introduced in WordPress 3.4.

With the Customizer options included in IceChimp, you can instantly change the color scheme, as well as input your Twitter username, custom logo, custom background, along with the standard Site Title and Tagline options.

A screenshot of the customizer options is to the left. I’ll go over that (as well as other MailChimp-specific options in the video below.

IceChimp Video Guide

Below is a quick Screenr video covering all the options in IceChimp (excuse the crappy mic).

The video shows you how to quickly and easily set up a custom MailChimp-powered “coming soon” page with WordPress.

Wrapping Up

Many thanks to Otto and his Theme Customizer tutorial, which I referred to more than a few times when getting IceChimp’s Customizer to work right.

Also many thanks to MailChimp for their cool email service, and their official WordPress plugin which would have made this theme a lot more difficult to make without it.

Also, I’m planning on submitting this theme WordPress.org so you’ll hopefully be able to grab everything you need (theme and plugin) to get this working right from your WordPress backend.

Let me know what you think in the comments.

Related posts:

  1. Ice Breaker – Free WordPress Domain Parking Theme
  2. Photabulous – Free WordPress Theme
  3. Bluish – Free WordPress Theme

Author: "Leland" Tags: "Free Theme Releases"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 08 Aug 2011 05:00

If you’re still not following me on Facebook or Twitter, you probably haven’t heard that I’m speaking at another WordPress DC meetup.

It will be on Tuesday, August 9th at 7 PM located at Fathom Creative‘s office in DC. More details on location, parking, etc. can be found on the meetup page (linked previously).

What I’ll Be Talking About

Similar to my last presentation at WordPress DC, I will be discussing CSS. Unlike last time, however, the CSS tips I’ll be going over aren’t necessarily WordPress-specific, and can apply to nearly any type of site. The official description:

You’ll learn some useful and practical CSS tips and tricks. These could include tips on speeding up development time, general optimizations, and other cool things. Also, these aren’t necessarily limited to WordPress, but could apply to nearly any HTML/CSS based site. Beginner to intermediate CSS knowledge would be nice but not absolutely required.

Slides

These are in the same format as my previous slides (but less crammed so it’s easier to see on the TV).

Theme Lab T-Shirts

This will be the premiere of the limited edition Theme Lab t-shirts! Okay, they’re not really limited editions, I can print more if needed. I’ll be bringing various shirts in S/M/L sizes. A picture of them is below.

I’ll figure out some way to give them away at the meetup.

Andy Stratton’s Presentation

Also speaking at the same WordPress DC meetup is Andy Stratton, who I got to know pretty well at WordCamp Raleigh earlier this year. I saw his presentation there called Diet Pills, SEO and Theme Frameworks, which he’ll also be presenting here. Trust me, it’s one you won’t want to miss.

Conclusion

Looking at the meetup page, it looks like spots are filling up pretty quickly. If you want in, you should RVSP ASAP.

Related posts:

  1. WordPress DC Presentation – Leveraging CSS to Change Your Theme

Author: "Leland" Tags: "WordPress Community"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 02 Aug 2011 23:32

TimThumb, an image resizing script commonly used in WordPress themes (especially paid ones), is being exploited through a zero day vulnerability. If you think your WordPress theme may use the TimThumb script, please pay attention.

Quick Fix

The easiest way to fix it would be to delete any instance of timthumb.php on your sites. It is also commonly named thumb.php (this is what WooThemes uses). I’d imagine this also applies to inactive themes.

As outlined in the previously linked post on Mark Maunder’s blog, the next best quick fix would be to remove all the “Allowed Sites” in the array.

Before:

$allowedSites = array (
	'flickr.com',
	'picasa.com',
	'img.youtube.com',
	'upload.wikimedia.org',
);

Change to:

$allowedSites = array();

Also make sure the following constant is set to false, otherwise removing the “allowed sites” won’t really matter, since every site would be allowed if it wasn’t:

define( 'ALLOW_EXTERNAL', false );

What’s the big deal?

You might be thinking, “lolz, Flickr or Wikipedia is gonna hack my site? Yeah right!” Wrong.

The problem is flickr.com.lamehackersite.info would be just as “allowed” as flickr.com, which is where the real vulnerability lies.

Theme Providers that Use TimThumb

Some WordPress theme providers that bundle TimThumb in their themes to resize images include WooThemes and ElegantThemes, two very popular commercial theme vendors that have tons of sites using themes with the vulnerable TimThumb script.

As far as WooThemes goes, it appears they’re aware of the issue according to the following tweet:
.bbpBox98516918260072448 {background:url(http://a0.twimg.com/profile_background_images/125427283/woothemes_twitter.png) #5c87aa;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}

To address the timthumb issue, we have a post and fixes coming very soon. :) ^RRless than a minute ago via CoTweet Favorite Retweet Reply

Let’s not forget theme marketplaces (*cough* ThemeForest *cough*) where countless authors have produced countless themes used on countless sites, a lot of which probably use the TimThumb script. I’d imagine this would be a much messier situation than with a single vendor.

Theme Lab Themes

In the name of transparency, there are three themes on Theme Lab that use the TimThumb script. They have been updated to the latest version (with allowed sites removed).

If you use any of these themes, please update the /scripts/timthumb.php file ASAP. This advice can also apply to any other theme that uses the timthumb script, obviously.

Why only three? Because I discovered a better way to include thumbnail functionality in WordPress themes.

Use add_image_size Please!

WordPress has a great, built-in API for resizing images that can effectively replace the need for timthumb on WordPress sites. It’s called add_image_size.

For some live examples on how to use this in your own themes, check out the Green Tea, Cool Blue, or SongSpace themes here at Theme Lab.

This feature has been built into WordPress since version 2.9, which was released on December 19, 2009 (well over a year and a half ago).

Mark Jaquith posted a great tutorial on including this feature in your themes, so I can’t think of many other excuses for not including this in new themes.

A Note on the TimThumb Developer

I noticed that the TimThumb developer, Ben Gillbanks, was getting directly and indirectly “bashed” pretty hard in the comments of the original vulnerability post.

Yes, it turns out the TimThumb script isn’t the most secure script in the world, but at least the developer is sticking around and supporting it for free.

I believe the script was released with nothing but the best intentions, and to see this “bashing” take place against someone who is doing all he can to help the situation is a bit bewildering, to say the least.

Over the years I’ve seen him respond to lots of TimThumb support requests on Twitter, something he’s certainly not obligated to do for a free script, but he does it anyway.

After all the profit that’s been made from the script (like commercial themes using it to make sure their fancy Jquery slider images are resized nicely) you’d think you’d see a little gratitude, but what else is new?

Conclusion

Obviously this is a pretty messy situation, a lot of users probably won’t have any idea they’re vulnerable until they’re hacked. It’s important to understand how widely used this script has been bundled with WordPress themes over the years.

Jayvie has also posted his thoughts on the issue in his post titled Timthumb zero day vulnerability: time to get back to basics.

What do you have to say about it? Let me know in the comments.

Related posts:

  1. WordPress Security Alert – Vulnerability in 2.3.3
  2. WordPress 2.8.3 Security Fix: Admin Password Reset
  3. Newsworthy – Free WordPress Theme

Author: "Leland" Tags: "WordPress Security"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 25 Jul 2011 20:36

After I released the most recent Theme Lab redesign, I had a number of comments on the “bio dropdown” box I have up in my navigation bar. I coded it with just a few lines of CSS along with a background image.

In this CSS tip post, I’ll go over how you can have a similar hover effect on your own sites.

The Example

In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2.

Basically, once you hover over the div that contains the widget, a “hidden” div will appear which will be our bio dropdown box.

Note in the picture to the left, the gray bio box will not appear unless you hover the div containing the “Bio Hover” heading.

The Selector

It’s not that important to have a unique CSS selector to style the div you want to put your bio dropdown box in. Basically this is because if you don’t have the accompanying markup in that div, nothing would show up anyway in the event of a hover state.

Although in the case of Twenty Eleven, we could get away with just styling the “aside” class, chances are you only want a bio dropdown box on one of your divs anyway, so we’ll get more specific.

Luckily with WordPress, it spits out a ton of unique CSS selectors you can use. In this example, it spits out #test-3 which we’ll use from now on.

Note: This may vary depending on your WordPress installation. Use something like Chrome Developer Tools to easily find the selector.

HTML Markup

In this example, the HTML markup can be placed directly into the WordPress text widget. This is what you’d put in:

<div class="bio-dropdown">
<img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" />
<p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p>
</div>

Unless you want to steal my identity, you’ll probably want to replace the photo with a picture of yourself. You can also optionally remove it.

Since we’re using a WordPress widget, the outlying markup is already generated for us. This is what it is in total.

<aside id="text-3" class="widget widget_text">
<h3 class="widget-title">Bio Hover</h3>
<div class="textwidget">
<div class="bio-dropdown"><img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" /><p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p></div>
</div>
</aside>

If you’re doing this on a raw HTML site, you’ll need some sort of wrapper (like this one is the aside) for the bio dropdown with something else in it, otherwise there’s nothing to hover over to drop down.

Real-life example: My bio dropdown div is inside an li tag in my navigation menu.

First Two Lines of CSS

The first two lines really set up the rest of it, so I put this in its own section.

#text-3 { position: relative; }
.bio-dropdown { display: none; }

Explanation

  • First line: We set the wrapper of the bio dropdown to have relative positioning. This makes it easier to absolutely position the bio dropdown box closer to the original wrapper.
  • Second line: This essentially makes the bio dropdown box invisible by default. It’s only supposed to show up when you hover over something, remember?

Note: If you’re not a fan of display: none; or think it hurts your SEO or something, you can also use something along the lines of position: absolute; left: -100000em; which will basically move it so far off the page, noone would ever see it anyway.

The Rest of the CSS

The following CSS code handles the look and feel of the bio dropdown box.

#text-3:hover .bio-dropdown {
display: block; z-index: 99;
position: absolute; top: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; color: #666;
}

Explanation

This is where we finally use the #text-3 selector along with the :hover pseudoclass to make the bio dropdown box show up only when you hover over the text widget.

  • First line: The display: block; makes the bio dropdown box visible. The z-index: 99; ensures that the box will be displayed over everything else, unobstructed.
  • Second line: This positions the box below the aside about 25 pixels.
  • Third line: These are just some cosmetic styles, setting the background to a light gray with decent padding.
  • Fourth line: This is all self-explanatory typography.

Note: About the first line, if you’re using the position: absolute; left: -100000em; technique instead of display: none; like I explained above, using display: block here wouldn’t be necessary (since divs are already assumed to be block level elements anyway). Instead you’d have to use left: 0; to move the div back onto the page.

And for the image, just a simple float and right margin.

.bio-dropdown .photo { float: left; margin-right: 10px; }

WordPress Integration

I can’t think of a good way to integrate this into a dynamic WordPress menu (wp_nav_menu) without filtering the crap out of something. The easiest way may be to hard code your navigation and get over it (which I do on all of my sites).

If you have any techniques on how to insert markup into a WordPress menu item, which is required for this, I’d love to hear about it in the comments. I’m sure it’s possible but it goes beyond the scope of this CSS tip post.

Conclusion

Yes, I realize you probably wouldn’t want to put a bio dropdown in your sidebar, you’d put it in a place with limited space that doesn’t have room for it to be fully displayed (like a cramped navigation bar).

Fortunately, you can use this teqhnique just about anywhere. I just wanted to go over a basic technique on how to display a whole div on hover.

It’s not too complicated and you don’t need any fancy Javascript stuff to do it, although if you wanted some high-tech fading effect, you’d probably have to use some Javascript.

Related posts:

  1. Seamless Image Rollovers Using CSS
  2. Make A Custom Twitter Widget Without A Plugin
  3. Guide to Styling the WP-PageNavi WordPress Plugin

Author: "Leland" Tags: "CSS Tips"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 18 Jul 2011 12:00

December 5th, 2009. This was the date I last redesigned Theme Lab, which coincidentally was also done by James McDonald. Here’s a screenshot below for posterity purposes.

Theme Lab First Redesign by James McDonald

The Homepage

Probably the most prominent feature in the new design is the homepage design, which is notably different than the blog-style homepage of the previous design.

At the top are the three latest posts, then below a few featured articles to the left of a subscription area. Below are the latest five themes displayed in an interesting non-slidery way.

The Rest

Most of the rest of the features of the site are more are less the same, including threaded comments, tag pages for different types of themes, etc.

There’s a bit less emphasis on social media stuff, especially on the single post pages where I’d have share icons for MySpace, Technorati, and other sites you probably don’t even use.

There’s still a simple Facebook/Twitter link on the left side of the content area on single posts though. If you really feel the need to share a link on MySpace, however, feel free to do that as you normally would, but without the aid of a social networking icon link here.

Recommended Products

On every non-post page (except the homepage) I have a listing in the sidebar for “Recommended Products,” which are basically just affiliate links to paid WordPress themes and plugins I would recommend to others.

On single posts, this area is replaced with a “Related Posts” section.

Conclusion

So that’s about it. There may be a few kinks here and there, if you notice anything feel free to let me know in the comments (that are still threaded, by the way).

Oh and also, if you’re using IE6, this site probably looks like garbage because I use a lot of transparent PNG images, and I don’t intend on fixing it either. View it in a modern browser.

Let me know what you think in the comments! Oh yeah, and hire James McDonald for all your design needs, and hopefully me to code it.

Related posts:

  1. New Theme Lab Design by James McDonald
  2. Brand New Design on Theme Lab
  3. Simply Minimal WordPress Theme Review

Author: "Leland" Tags: "Site News"
Comments Send by mail Print  Save  Delicious 
Date: Saturday, 25 Jun 2011 22:26

As the title says. Yes, it’s really been that long. This year has been relatively quiet compared to previous years. In the past year, four free WordPress themes were released along with two free
">CSS
templates. There was also one “donation” theme.

Like I outlined in my Thank You theme post, I’ve been a bit busy the past year off at school, hence the lack of posts. In the rest of the post, I’ll outline some future plans for the site.

The Future

First of all, a new site design is in the works. In fact, it’s already been designed. You can probably spot a few teasers on James McDonald’s Dribbble page, who was also the designer of the current theme you see here.

There are a few more theme releases in the works, which may or may not be commercial.

Conclusion

I hope to have some new themes and tutorials published in the coming weeks. Thanks for sticking with me so long, even through the times of not so much activity (like the past few months).

Related posts:

  1. Theme Lab is 2 Years Old – Another Year In Review
  2. Theme Lab Is 3 Years Old Today – Massive Three-For-All Giveaway
  3. The Best of Theme Lab in 2009

Author: "Leland" Tags: "Site News"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 19 May 2011 20:34

It’s that time of the year again. As some of you might remember, I attended WordCamp Raleigh last year as well and had a great time (and even got video interviewed!).

This year looks like it’ll be a great follow-up with a great lineup of speakers. If you’re going to be there, let me know. I’d love to meet you and/or see you again. I should be arriving Friday and will stay until Sunday.

If you haven’t registered yet, and would like to, there are still tickets available as of publishing this post at $45 each. Below is a link to register.

wcreg

P.S. If you don’t know what I look like, see the video interview linked to above. My appearance hasn’t changed that much since a year ago.

Related posts:

  1. Video Interview at WordCamp Raleigh
  2. I Am Attending WordCamp Raleigh
  3. I Was Interviewed At 1stwebdesigner

Author: "Leland" Tags: "WordPress Community"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 11 Apr 2011 14:00

It’s been a while. Two months and 15 days to be exact. What have I been up to? I don’t really go much into my personal life here, but starting at a new college this past year has consumed a lot of my time.

I’m participating in my school’s Relay for Life program. For those who don’t know, it’s a fundraiser for the American Cancer Society, culminating in a 12-hour event throughout the night. There are 5 days until the event.

I don’t ask for much here, but I wanted to make a quick solicitation here for donations. In return, I’ve developed a pretty simple Twenty Ten child theme that I’ve entitled, Thank You.

Thank You Theme

More About the Theme

  • Coded in almost entirely CSS, the only image is for the sidebar list item backgrounds
  • Makes use of WordPress 3.0 menus, supports descriptions too
  • Widgetized sidebar
  • Check out the demo

Being coded in almost all CSS makes it really easy to customize the colors. Also make sure to utilize the WordPress 3.0 menus with descriptions, otherwise the menus will look weird.

How To Donate

It’s pretty simple, just go to my personal Relay for Life page and click the “Donate” button. You’ll be taken to a page which will let you donate by credit card, directly to the American Cancer Society. There is a minimum donation of $5 (set by them, not me).

There is also an option to mail in your donation but credit card would probably be more convenient. Any donation is greatly appreciated.

P.S. To any Jersey Shore fans, the “DTF?” on my shirt stands for “Down to fight?” and not what you’re probably thinking.

How To Get the Thank You Theme

After you’ve donated, simply e-mail me directly at lelandf@gmail.com or my contact form with the full name you donated under. I get a notification of all new donations so I’ll know who donated what.

I’ll respond with the child theme as an attachment. I’ll be trying my best to monitor my email box throughout the day.

Support Policy

You should think of this theme as a simple token of my appreciation for donating, not like you’re purchasing a premium theme with support expected.

I have tested this theme pretty thoroughly with theme unit tests and such. And keep it mind it’s a Twenty Ten child theme, so the core theme should always be up-to-date with the latest WordPress standards.

Of course, if there’s some grievous error within the theme, just let me know via comment or email and I’ll look into it. Anything customization related, however, I really can’t offer support for it.

License

GPL. Once you have hold of the theme, you can do pretty much whatever you want with it.

Conclusion

I’m not a big fan of apology posts, and only like to post if I have something actually worth posting. All I have to say is, expect some more activity this summer when I have more time.

And keep following me on Twitter, as I still do check it every day, despite my evident lack of regular tweets.

Most importantly, thanks so much for supporting this cause. If you have any questions or comments feel free to shoot me an email or leave a comment below.

Related posts:

  1. Page.ly Free Site For Life Giveaway Contest
  2. Resurrected Themes – Bringing Old WordPress Themes Back to Life
  3. Theme Lab is 4 Years Old Today

Author: "Leland" Tags: "Site News"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 27 Jan 2011 17:51

allure themesJust yesterday, Lisa Sabin-Wilson of WordPress for Dummies fame, announced a new venture called Allure Themes.

She was nice enough to grant me an interview here on Theme Lab to offer more insight on her decision to launch a commercial theme business, and more.

Read on to see the rest of the interview with Lisa. My questions will be in bold with the responses below.

The Interview

Already being an established book author with WordPress for Dummies, as well as a succesful custom theme designer at E.Webscapes, why take the plunge into the commercial theme market? Why now, especially with the market being as saturated as it is?

I’m always interested in new challenges and trying things I’ve never done before. I’ve always done custom design work, but never experienced what it takes to release product for mass consumption – I saw this as an opportunity to try something new. Certainly not *new* by the standards of the overall commercial theme market – just new for me.

In terms of the market being saturated? Many argue that the custom design market is saturated with amazing competition, yet I do pretty good for myself in that arena, and nearly every custom design provider I know is turning away more work than they take because there is SO much work out there.

I don’t think it is for me, or anyone else to say that any market is saturated until it proves itself so through natural selection. That said, I’m a firm believer that there is always room for dessert.

I answered an interview question for Ryan Imel over at WPCandy recently on the future of WP Themes in 2011 and part of my answer included the emergence of themes targeted towards particular markets and niche areas – I see Allure doing exactly that with themes designed for women.

You described Allure Themes as a commercial theme provider providing themes “just for women.” How will the themes cater to women exactly?

Hard to explain, really – it’s a design style that may appeal to some women. As a custom theme provider, I do fill custom requests for people using existing frameworks or themes. A large portion of those clients of mine come to me with commercial themes and say “Make it girly” or “Pretty this up for me” – that kind of thing.

We’re talking colors, design elements, flourishes and special touches that create a particular look and feel that some women want.

We are talking “sun room” not “man cave”. Does that make sense? Note: since our announcement, some people assume this means Pink. While there will be pink – and periwinkle and black and purple and green and….you get it.

We have niche theme sites for bands, politicians, but none (as far as I know) for women, which makes it a relatively untapped market. How are you expecting this niche market to respond overall?

With themed designs that are geared toward areas that are important to women. Some examples? Mommy blogging, pregnancy blogging, health and beauty, women entrepreneurs, women in sports – I could go on, but you get the idea. The style I have in mind may not appeal to all female bloggers and site owners out there – but I do have a clear picture of what many are looking for just through the mountain of custom design requests from women that I take through E.Webscapes. This is not to say that existing commercial themes don’t fill this need; Allure just provides another option with a targeted focus.

It seems like iThemes will play an important role in terms of supporting the themes from Allure Themes. Why choose iThemes for this role? Can you give us any more insight on the role iThemes will play in the development and support of Allure Themes?

iThemes has a proven and successful history of providing and supporting commercial products in the WordPress community. They know what they are doing and are very good at what they do. Over the years, I have developed a solid relationship with the team at iThemes and have 100% faith in their abilities. Having iThemes on board is my dream team and Allure users know, from day one, that there is a solid, experienced team in place to support the themes, answer their questions and build community.

How does the organizational chart look? Because I am one person and they are a full team of people – iThemes brings stability to Allure from day one. iThemes is providing the backbone for support, sales, marketing and affiliate program management. Basically, they focus on all the back end stuff which leaves me free to focus on the creative design and development.

Do you plan on using a framework for your themes, similar to what StudioPress does with Genesis and its child themes? Or will they be standalone themes? Why?

Yes, and no.

I am definitely going the way of parent/child themes at Allure because it absolutely makes the most sense for both myself, and our users. A parent/child theme set up is the best of both worlds for everyone – making it easy for me, the developer, to operate within a solid foundation and provide upgrades to our users that won’t break their own customizations and hard work. It’s a win-win.

That said, WordPress is my framework and Allure will not seek to re-invent that wheel. I intend to keep it simple, work within a clean parent theme that provides a solid, basic foundation for our users that will be there when they need us, and politely steps out of their way when they don’t.

You are also the author of BuddyPress for Dummies, which begs the question, are there any plans for offering BuddyPress themes as well as WordPress? What about other platforms?
buddypress for dummies

Interesting you are not the only person to ask that question – funny how one little book can pigeon-hole a person, isn’t it? :)

Of course I want Allure to provide the features and functionality that our users seek. Over the past year at E.Webscapes, we’ve seen a literal explosion of BuddyPress site requests and have been doing quite a lot of BuddyPress work for our clients there, so I do see this as an ever growing, emerging need; especially as BuddyPress becomes more and more brilliant with each new release. Providing a BuddyPress Addon for Allure is definitely something I intend to pursue after I get the party started with the initial launch.

You’re part of the secretive MassivePress project, will the launch Allure Themes have anything to do with launch of MassivePress?

MassivePress launches this week and we are all very excited about it. By “we”, I mean our founders: myself, Jason Schuller, Cory Miller, Michael Torbert, Carl Hancock and Grant Griffiths — just a fabulous group of people, with amazing talent to boot! I can’t say enough about these guys – I love ‘em. I guess that’s why I am very happy to be a part of the core MassivePress group.

I can’t go into much more detail about MassivePress until its launch, at which point I will be more than happy to yap about it. But, in terms of Allure… I can say, without divulging too much; Allure is a stand out example of what our mission and purpose for MassivePress is all about. Our pre-launch web site has been online since November (to be replaced by our official site later this week with our launch). I’m not giving away any secrets when I quote our words found there: “A coalition of like-minded WordPress entrepreneurs who think we can do more together than apart.” Stay tuned.

Anything else you’d like to say about Allure Themes or anything else?

My email has been popping since the announcement of Allure on Wednesday morning – so let me answer some of the questions that have cropped up most often:

Launching Allure does not mean that E.Webscapes is going away. E.Webscapes continues to be a strong business and one that intend to continue building. On the contrary, I see Allure and E.Webscapes working together in perfect harmony.

Yes, Allure will port to popular theme frameworks and make child themes for iThemes Builder, Headway and Genesis available on AllureThemes.com. It makes sense to provide a full array of choice to our user base. (eventually, after our initial launch)

Yes, Allure will be fully 100% GPL across the board, no questions asked. iThemes, and myself, fully respect the GPL and intend to operate within.

Ok, one more – follow us on Twitter: @AllureThemes

Thanks so much for your time and interest, Leland – hopefully we bump into one another at another WordCamp sometime this year!

Conclusion

The interview above is unedited, aside from myself adding a few links. I’d like to thank Lisa for taking the time to do this interview, especially so soon after her announcement. This will definitely be an interesting commercial theme venture to keep an eye on in the future.

Oh, and if Twitter isn’t your thing, you can also subscribe to Allure Themes’ newsletter to keep up with the latest updates.

What do you think of Allure Themes?

Related posts:

  1. Interview with the Owner of Premium Mod
  2. Commercial Themes and the GPL
  3. I Was Interviewed At 1stwebdesigner

Author: "Leland" Tags: "WordPress Community"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 25 Jan 2011 13:42

To honor the anniversary of WordPress today, Ben Welch-Bolen of Site5 hosting has created a little thank you site with a free WordPress Anniversary Theme. On the site, you can download the theme, and leave a small thank you message.

wordpress anniversary theme

Theme Features

The theme itself is pretty good looking (click the screenshot above for a live preview) and has a number of useful features.

Conclusion

Pretty cool to see a dedicated WordPress appreciation site like this, plus the free theme makes it all the sweeter.

Related posts:

  1. Underwater – Free WordPress Theme
  2. WP Sleek – Free WordPress Theme
  3. Elegant Themes Releases New Theme Options Page

Author: "Leland" Tags: "WordPress Community"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 21 Jan 2011 14:25

Imagine this scenario, you find a really cool snippet of code on one of the many WordPress tutorial sites out there and paste it in your theme’s functions.php file.

The code snippet works as advertised, and you then release your theme for sale on a well-known theme marketplace. Let’s pick a random one out of a hat and go with… ThemeForest.

Suddenly your theme becomes really popular, may be because of the massive list of apparently useful “features” you have listed on your theme’s sales page. With your theme’s success, also comes a number of support queries, mostly to do with plugins breaking while using your theme.

How did this happen, you wonder? Maybe it’s because you blindly pasted random globs of WordPress code into your functions.php file without actually thinking about or anticipating any potential compatibility issues.

A Real Life Example

So, I was trying to find a snippet of code that would pull all the attached images from a post and then display them on that post automatically. I eventually found a piece of code on Stack Overflow, pasted it in my functions file, and it appeared to solve the problem.

The first line of code was the following:

add_filter('the_content', 'strip_shortcodes');

Oh well, it worked, I didn’t think anything of it. I later tried to embed a contact form with a shortcode. Surprise, it didn’t work and I spent about an hour trying to figure out why. If I actually read through the code I was pasting, I would’ve known.

This was for a client site, not a released theme, so luckily I didn’t have to deal with a deluge of support queries due to my stupid mistake.

What Commercial Plugin Developers Think

Here’s a quote from Carl Hancock (developer of Gravity Forms) on this very topic:

Supporting the popular Gravity Forms plugin means we see more than our fair share of poorly coded themes. One of the primary support related issues we run into are themes that aren’t developed using best practices, which results in Gravity Forms styling issues and in some cases conflicts that result in Gravity Forms not functioning properly.

The biggest culprit in these situations are themes that include code snippets copy-n-pasted from tutorial sites. Theme developers seem to think that just because the code snippet was on a tutorial site, it must be good. Unfortunately that isn’t always the case and these poor decisions result in headaches and support issues for users.

Want to limit the potential for running into issues with plugins caused by a poorly developed theme? Stick to reputable theme developers such as Press75, iThemes, Headway Themes, Organic Themes, WooThemes, and StudioPress to name a few. Be weary of theme marketplaces where the experience and skill set of the author may be lacking. In most cases you get what you pay for.

Coding Best Practices

A lot of these issues can likely be avoided by following WordPress coding standards. For example, you should be prefixing your function names to avoid any potential conflicts.

In the case of styling issues with Gravity Forms, you may want to avoid certain blanket styles on form and input elements, and instead use WordPress default ID selectors for the bulk of your form stylings.

These includes #searchform, #s, #searchsubmit in the search box. Also #commentform #author, #url, #email, #comment, #submit for the comment form.

Conclusion

If you’re a theme developer, and not too well-versed at PHP, be careful when copying and pasting these code snippets into your theme. Even if you’re not that great at PHP, you can at least read through the code and try to make some sense of it before using it.

Like if you find that your shortcodes aren’t functioning properly, a line of code that mentions “strip_shortcodes” might have something to do with that.

Sometimes I get the feeling that WordPress theme developers just paste random snippets in their functions.php file, just so they can list another “feature” on their theme’s sales pages.

While I’m not a big fan of this sort of idea, it gets into a whole other argument on the role of themes and plugins on WordPress sites, which I’ll save for a future post.

Related posts:

  1. Remove Unnecessary Code from wp_head
  2. WordPress Weekend Resources – June 5, 2009
  3. Stop Downloading WordPress Themes from Shady Sites

Author: "Leland" Tags: "WordPress Community"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 14 Jan 2011 15:23

Michael Soriano of Fearless Flyer recently released a free PSD template called “Your Blazing App.” Like my Corporate Blue release (also designed by Soriano), I’ve also coded this one into XHTML/CSS for free download.

Your Blazing App screenshot

Download

Description

Like the Corporate Blue template, this layout consists of just a homepage. It’s designed for phone-related app website, but can be customized into a lot of other different uses. Here’s a description from the release page:

The layout itself is very modern. The page is housed in a beautiful etched container with very subtle textures. The large feature section showcases the “Apps” main message with large “call to action” buttons to get the viewers to instantly join.

There’s a blue ribbon separating the main section and the latest posts / sidebar. I imagined this to be an expanding area for categories and what not. Typically a little javascript should do this trick. The rest is pretty conventional, icons, typography, grid spacing and pixel perfect alignment.

I didn’t actually code the Javacsript part of the blue ribbon to make it expand, although the “Click here to expand” link is styled as a link so it shouldn’t be too difficult to integrate whatever Javascript you want.

Twitter Widget Compatible

I coded the Twitter list on the sidebar to easily integrate with their Javascript Twitter feed. I wrote more about this on my custom Twitter widget tutorial

With this template, pretty much all you have to do is place the following code at the end of your document (just before the closing body tag). Of course, you’ll have to replace the USERNAME with your actual Twitter username.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

You’ll also want to empty out the sample content in there so it says something like the following:

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

Want More HTML Templates?

I know Theme Lab is primarily known for WordPress themes, but I want to gauge interest to see if you’re interested in just XHTML/CSS templates. Would you be interested in more?

There are plenty of resources nowadays to get free PSD layouts, which means many potential coded templates here in the future.

I think examining the code of these (in my opinion, although I’m a little biased since I coded them) cleanly coded templates could in turn improve your overall WordPress coding skills. HTML and CSS is a major part of that.

Conclusion

I’d love to hear your thoughts in the comments. Oh and thanks once again to Michael of Fearless Flyer for designing the actual template!

Related posts:

  1. Corporate Blue – Free XHTML/CSS Template
  2. Are you a free CSS template designer?
  3. Bravissimo – Free PSD + XHTML/CSS Template

Author: "Leland" Tags: "Free Theme Releases"
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader