There are a lot of benefits in using their service, the best I can think about being not cluttering your server load with emails. Especially if you’re website is on a VPS with limited resources, having additional servers for incoming and outgoing emails running and constantly handling emails could be resource consuming. Better outsource these services to a third party and let the server handle website requests.

Google Apps email service is compatible with any website or server. All you need to do is point the MX records of your DNS entries to their servers and you have a working email. There’s a catch though when it comed to WordPress websites, instructing WordPress to send its own emails through the Google Apps service. Luckily there’s a plugin that handles this smoothly for us. We’ll discus this towards the end of the article, first let’s see how to set up a new Google Apps account:

Setting up a Google Apps Account

First go ahead to the Google Apps home page and select to create a new account. You will be asked for basic some basic information like your name, email address and business name. Afterwards, you will be asked to enter a domain name or to register a new one. At this step enter your website’s domain name as this will be the domain to which you will be assigning email addresses. You will be asked to verify the domain name, in a manner similar to Google Webmaster Tools. Afterwards you will be able to create mailbox accounts. Go ahead and clone all mailbox accounts from your current website. Make sure to complete this step before reassigning your DNS server’s MX records to avoid losing any emails incoming during the transition period.

Pointing your DNS Server’s MX Entries to Google Apps

Now that you have your account and mailboxes set up, go to your hosting’s control panel, to DNS Settings and change the MX records to point to Google. Note that these entries are provided by who is hosting your DNS server which is not necessarily the same service hosting your website. They could for example be your domain registrar or if you are using a service like Cloudflare without registering through a partner then they are hosting your DNS server. The easiest way to find this out is to check where your DNS servers point to.

How these look like may differ for different providers but they should look in essence the same for all. Most probably you should see one single MX record mail.yourdomain.com pointing to yourdomain.com (or your IP address) with priority 10 and TTL 1 dat or automatic. This isn’t necessarily what you have setup, but it’s not important since you need to delete it and any other MX records you may have. Maybe write them down somewhere as backup in case propagating your new entries fails somehow, although improbable. Now add these new MX entries:

ASPMX.L.GOOGLE.COM with priority 1
ALT1.ASPMX.L.GOOGLE.COM with priority 5
ALT2.ASPMX.L.GOOGLE.COM with priority 5
ASPMX2.GOOGLEMAIL.COM with priority 10
ASPMX3.GOOGLEMAIL.COM with priority 10

Click the “Save all entries” button if you have one (entries are usually saved after each modification) and wait for them to propagate. Propagation can take anything from instant to 2 hours, normally it doesn’t take more than 30 minutes. Google Apps can show you where your MX records point to under Setup > Set up your Apps > Gmail > Setup Gmail if you have selected. After propagation is complete you will also see a message “Congratulations! Your MX records are set up correctly”:

Now you should have working email addresses and mailboxes, your Google Apps Setup is complete. There is one more step though if you want to make your WordPress installation work with Google Apps:

Configuring WordPress to integrate with Google Apps

WordPress sends its own email notifications usually when you receive new comments but you may have other functionality enabled such as user registrations or sending newsletters, in which case configuring it to work with Google Apps becomes imperative. Luckily there’s a plugin WP Mail SMTP which can configure WordPress to use an external email outgoing server with SSL and authentication just as we need. Install and activate this plugin, then go to Settings > Email and configure it with the following settings:

Under “From Email” enter the email address you wish to send emails from. By default this is wordpress@yourdomain.com but can be any email address, just make sure a mailbox for it exists in Google Apps.

Under “From Name” enter the name you wish to appear in the recipient’s email client. By default this is “WordPress”.

Make sure you have selected “Send all WordPress emails via SMTP”.

Under SMTP Host enter smtp.gmail.com and SMTP port to 465.

Under Encryption select “Use SSL encryption” and under Authentication select “Yes: Use SMTP authentication”.

Then under Username enter your full email address, e.g.: wordpress@yourdomain.com and enter the password.

Here’s a screenshot of how the configuration page should look like:

Save the settings and WordPress configuration is complete. Emails sent by WordPress should now be handled by Google Apps.

You can send a test email to see the service is working. It will also show some debug information and please not that just because the first lines say “Test Message Sent. The result was: bool(true)” doesn’t mean the message was actually sent. Check the debug information below to see if there are any other errors and correct them as necessary. The only way to make sure the service actually works is when you have received the test email in your inbox.

You should now have a fully functional email service running through Google Apps. If you were using any email servers on your VPS or dedicated server you may want to stop them and remove them from the system startup table to save resources.

The post How to use Google Apps as an external Email Service for your WordPress Website appeared first on One Designs.

Pinboard has been designed with showcasing content in mind. It has several options for layout and the number of columns on which content is displayed and has a portfolio section if you wish to elegantly show your work. Are you ready to take this theme for a spin? Hit the download button below or click the demo link to see it like in action:

Download View Demo

All the theme’s features come packed with the default settings and taked little effort to get it up and running but each of this feature has been built into a separate template in case you need do do advanced customizations to your website. Click on any of the sections below to get additional information about the theme:

• Features

• Instructions

• Theme Support

Here’s a full view of the theme’s home page in Grid View, including the Featured Post Slider:

Read more below to see what this theme has to offer:

Features

We have carefully crafted this theme so it can fit any type of content. It is comes with a responsive layout and an advanced and flexible grid powered by jQuery Masonry that automatically and smoothly adapts to changes to the viewport of your browser. Here’s a list of all the features this theme comes packed with:

• Flexible, multicolumn grid
• Responsive Layout
• Post Thumbnails
• Post Formats
• Audio & Video playback
• Dedicated portfolio section
• Multiple layout options and custom page templates
• Built-in design elements for creating custom layouts and landing pages.
• Custom fonts and advanced typography options
• SEO-ready and options that give you control over code semantics
• Clean, organized and documented code

Instructions

Adding descriptions to menu items

The theme’s navigation allows a small description to be displayed below each menu item. To enable this, in the admin panel go to Appearance > Menus, expand the menu items and enter its description in the field called “Title”. This will then automatically be converted into a description to be displayed below the menu item.

Adding thumbnails to posts

The theme supports the built-in WordPress featured images functionality. To add a thumbnail, when editing a post, open the upload tool, select the image you wish to set as thumbnail and select “Use as Featured Image”. Note that thumbnails appear only in blog post lists. To display then in single posts you need to insert them manually.

Adding posts to the slider

The slider displays sticky posts as featured. Mark the posts you wish to add to the slider as sticky
and they will be added automatically. Note that this mode disables the normal post order with sticky posts on top
and sticky posts will appear only in the slider.

Adding a Logo

The theme uses WordPress built-in custom header functionality to handle logos. To add a logo to your website, go to Appearance > Header and upload your desired image. You can then adjust the image’s width but not the height. The optimal size for logos is 196×48 pixels. Note that you need at least WordPress version 3.4 to benefit from this functionality.

Support

For any support questions please use the dedicated section at the forum.

The theme is released under GPL. Feel free and encouraged to use, modify and redistribute it however you like.

We hope you will find great use for this theme. Please let us know how it has made your life easier by dropping us a comment in the box below. Happy blogging!

The post Pinboard Free WordPress Theme appeared first on One Designs.

We needed a HTML5 audio and video polyfill and the best and most feature-rich we could find was MediaElement.js. We also wanted a player skin that was beautiful and usable and fell in love with Orman Clark’s audio player design. We coded the design and the result was a custom skin for MediaElement.js which we now share with you. You can download the skin below or see a demo of it in action:

Download View Demo

MediaElement.js is a polyfill for the HTML5 <audio> and <video> tags. It features a JavaScript API and a media player fully skinnable using CSS. It supports a variety of cutting-edge features that are specified in the new HTML5 implementation including resizable layout, full-screen playback, closed captions, subtitles and chapters and has fallback players for Flash and Siverlight for older browsers. The player is fully skinnable using CSS; the Flash and Silverlight fallbacks are just simple players with no controls and the playback is controlled with JavaScript using the so called MediaElement API so there is no need to hack into source files to make skins work in older browsers.

It is in our opinion the best HTML5 audio and video polyfill because not only because it is complete and feature-rich but because it decorates the actual <audio> and <video> tags instead of requiring its own custom HTML code like other ployfills do, so you can keep your code clean and semantic.

We hope you like and enjoy this skin and feel free to use it for both your personal and commercial projects with no attribution required.

UPDATE: This skin has been made into a WordPress Plugin, you can download it for free here. You need to install the Offical MediaElement.js Plugin first for the skin to work.

The post Custom MediaElement.js Skin appeared first on One Designs.

Download View Demo

Click on any of the sections below to get additional information:

• Features

• Installation

• Theme Support

Here’s a full view of the theme’s home page in Grid View, including the Featured Post Slider:

The initial intention for this theme was to be the second iteration of Cover WP which was 3 years old and already past its time. However, after consulting with existing users of the theme we have decided it shifted too much from the original and deserved to have its own place as a stand-alone theme. As a consequence to this the theme Cover WP will be discontinued and no longer updated with Esplanade continuing its development cycle. Security updates may still be offered for Cover WP. If you are an existing user of Cover WP and thinking about upgrading to the new theme, see below what new features Esplanade has to offer. You may see some things like the Featured and Popular section are gone and replaced by the Featured Post Slider and the magazine-style home page has been replaced with a grid view. The home page has also been rethought to offer a more natural flow to the list of articles. Read more below to see what this theme has to offer:

Features

This theme comes feature-packed with things you usually see in premium themes, so don’t get shocked. Here’s a list of everything it has to offer:

• Blog View & Grid View
• Responsive Layout
• Post Thumbnails
• Post Formats
• Audio & Video playback
• One-click enabling and disabling of website sections
• Multiple layout options and custom page templates
• Drag-and-drop editing of layout dimensions
• Choose from multiple color schemes
• Custom fonts and advanced typography options
• SEO-ready and options that give you control over code semantics
• Clean, organized and documented code

We hope this feature pack is enough to satisfy most bloggers’ and small website owners’ needs. Let’s get into some descriptions and see how each feature could benefit you:

Blog View and Grid View

This feature is still experimental and currently available only for the home page. Basically, blog view follows the traditional flow of posts while the grid view uses a powerful grid to display the content, offering the ability to showcase almost every type of content from simple text to rich photo galleries, podcasts and videos. In the future we plan to improve this view mode and make it flexible enough to fit the entire structure of the theme.

Responsive Layout

The Layout of this theme automatically adapts to fit all devices that can browse the internet like tablets and smartphones. The design will automatically shrink to the width of the device and content blocks will automatically stack, making all content visible and accessible without any zooming or horizontal scrolling. Similar to a mobile version only that it naturally adapts to screen dimensions without the interference of third-party scripts thus maximizing compatibility. Here’s a screenshot of the theme on an iPhone, click on the image to see a live demo of the theme on various mobile resolutions:

Audio & Video playback

The theme features native HTML5 audio & video playback. Simply attach a video or audio file to a post, set it the video or audio post format and a browser-native player will start playing the file. If html5 is not supported by the browser it will fall back to a flash player.

One-click enabling and disabling of website sections

Sections that are not essential for the website, like breadcrumbs or the post slider can be disabled with one click from the options page. They will simply disappear and the design will automatically adapt to fit the changes.

Multiple Layout Options and Custom Page Templates

The theme comes with built-in with templates for the most popular page layouts, like sidebars on the left or on the right or splitting content with 2 sidebars. They can be individually chosen for pages and globally integrate with the entire layout. The default website layout can be changed in the theme options page.

Drag-and-drop editing of Layout Dimensions

The dimensions of the sidebars and content areas can be modified from the options page with a tool that allows dragging and dropping of the content separator. The dimensions are given in percentages to comply with the responsive layout. Here’s a screenshot of the layout editing utility:

Choose from multiple Color Schemes

The theme comes with 4 color schemes you can choose from: Neutral, Sand, Nature and Earth. You can change them in theme options. The difference between them is subtle but offers a shade of personality to color-lovers. Here’s a screenshot of the option highlighting the 4 color schemes:

Custom fonts and advanced typography options

The themes offers the ability to choose which fonts you would like to use and integrates itself with the Google Web Fonts Directory to allow even more fonts to be used. For the moment only some fonts are supported. The theme also offers the option to change font properties like font size, line height and color. If you’re not familiar with CSS color codes a point-and-click tool can help you choose your preferred color.

Instructions

Featured Post Slider

The slider handles sticky posts as featured. If the slider option is enabled
sticky posts will be displayed in the slider and the main loop will ignore them.
If the option is disabled the loop will display normally, with sticky posts on top.

Grid and Blog View

The theme comes with 2 view modes: Grid and Blog.
The Grid mode is similar to a web magazine and shown only on the front page.
Secondary pages display in blog view.
You can override this behavior in theme options.

Post Thumbnail Functionality

Post Thumbnails appear only in post lists, not on single posts.
They can be set by choosing “Set as Featured Image” when uploading an image.

Image Post Format

Posts with the image format will display the last attached image in a caption.
If a post thumbnail is set, this one will appear instead.

Gallery Post Format

Posts with the gallery format will display the first 6 attached images, on 3 columns,
and also offers a lightbox for full screen preview.
On single pages images from the gallery shortcode display in a lightbox.

Audio & Video Post Formats

Posts with the audio & video post format will display the attached media files
in a HTML5

Other Post Formats

Posts with the aside, status & quote post formats will displayed with no title;
the status post format will display the user’s avatar, in a mannersimilar to Twitter;
the quote post format will only display the post’s first <blockquote> tag.
Posts with the link post format will link out to the first tag in the post.

For any support questions please use the dedicated section at the forum.

The theme is released under GPL. Feel free and encouraged to use, modify and redistribute it however you like.

That’s it from our part and we’d love to hear your feedback! Use the comment section below to share us your thoughts and if you like this theme let your friends know about it by sharing it with the services below. Happy blogging!

The post Esplanade Free WordPress Theme appeared first on One Designs.

Having your website load faster doesn’t mean just choosing a good or a localized hosting service. There are many other factors that contribute to your website’s load time. This isn’t necessarily to your disadvantage. You’ll see that with little effort you can achieve fast loading times even on shared hosting. Let go through the steps we’ve done to make our website load faster:

Why make your Website load faster anwyay?

Maybe you’re still wondering why it’s worth going through all this or all you heard is Google is considering page load time as a ranking factor for your website or that slow loading times result in less sales. While both of these are true, you need to understand the mechanisms behind it to figure out what makes website speed so important. The part of your website’s experience affected by loading time is its usability. In more rough words said, waiting kills usability. Slower loading websites make users wait. When users wait, they don’t use your website, they’re not engaged in anything and have all the temptation to engage in something else, of course unless you’ve already captured their attention with some catchy title but that’s not what we’re discussing right now. Bottom line is this: The more seamless your website is loading the more engaged your users will be.

Check your current Website’s loading Speed

First of all, check to see how your website currently behaves in your visitors browsers. This will determine whether page load speed is a high priority issue for your website to which you’ll have to dedicate much attention to or not. To do this just making a simple test on your machine isn’t enough. Your visitors don’t have your location, your computer, your internet connection or your browser. To test this you need accurate results from several users from your target audience. Fortunately there are several tools available on the internet that give you pretty accurate results.

Google’s Webmaster Tools has a section called Site Performance where it gives you the average load time of your website and Pingdom Tools also shows you detailed information like waterfall charts and browser load times, however our personal favorite tool is Loads.in because it allows checking your website from several hosts across the globe while also giving you detailed information like waterfall charts and screenshots showing the progress of the page’s load at several times. Here’s a screenshot of Loads.in waterfall chart for onedesigns.com:

Note that the first114ms are a 301 redirect from onedesigns.com to www.onedesigns.com. 301 redirects presume additional HTTP requests and thus affect page load speed.

Based on these results you can assess the importance of this aspect on your website and decide how much you need to invest in it. Here are some preliminary conclusions we’ve come up with:

• under 2 seconds – Little to no concern regarding site speed. Websites loading this fast should have no problem. However if you find aspects you could improve, making it perform better can never hurt.
• between 2 and 6 seconds – Medium concern. Website probably could use some optimizing and improving after which a performance increase will be highly visible.
• over 6 seconds – High concern. You’re probably doing something very wrong. If your website is loading this slow it’s possible you should even consider a redesign.

That being said let’s see what you could do to increase your website’s performance:

Optimize Images

Probably one of the easiest and most helpful steps to increase your website’s performance. Images can be pretty big in size and if you don’t optimize them properly they can add a huge load, sometimes up to several megabytes to your website. There are several tools to optimize images and the Save for Web and Devices feature in Photoshop is pretty good. Images can be optimized lossless if the format permits but you can also do a lossy optimization if the image is big or its details are not so important.

Also, consider serving images to scale to make them smaller in size and avoid the browser needing to redraw them. Setting the height and width attributes for images is also known for contributing to the website’s performance since it tells the browser before the image loads of the surface needed to draw it.

Reduce Number of HTTP Requests

Consider this: Every HTTP request, whether an image, a stylesheet or a script is a call to the server back and forth which adds to your loading time. While modern browsers and web servers have the ability to multitask requests and deliver them in parallel, having too many might exceed their capacity and not only make your website load slower but also the browser respond slower. Here are some things you can do to reduce the number of HTTP requests:

Combine Background Images using CSS Sprites

The traditional way of implementing background images is to have a separate image for each background or some smaller images that keeps repeating over a block. However, even if these images are small in size, each of them represent a separate HTTP request. It would be more efficient if you could concatenate all these images into a single file reducing the number of requests to 1.

Example of Sprite with Social Networks Icons

To technique to combine all these requests into one is to put all the background images in one file called a sprite and display the needed image using background-position. Here’s an example:

.comment-bubble {
	background-image:url(images/sprite.png);
	background-position:-64px -256px;
}

This declaration will show the element located 64 pixels from the left edge of the image and 256 pixels from the top of it.

Concatenate Scripts and Stylesheets

If your website has several scripts and stylesheets each of them means a separate HTTP request. However, if all scripts and all stylesheets are placed in one file they would perform the same, but would reduce the number of HTTP requests to 2. In WordPress, the plugin W3 Total Cache can do this automatically for you.

Ditch useless Design Elements

If your design features elements like seamless background patterns consider removing them entirely. Either replace them with a CSS3 technique if possible or give them up. Repeating background patterns are difficult to render using CSS sprites and if they are subtle then they add little impact to your design. If they affect performance they’re definitely not worth keeping.

Optimize Request Serialization

If you look at a waterfall chart you’ll see some requests are loading in parallel and some other are delayed. While some of them may be delayed due to browser load, most of them need to wait for another resource to load before they can begin loading. For example for a background image to begin loading, the stylesheet where it is called needs to finish loading first. This may not be a problem and actually doesn’t even have a solution, but when you are calling several resources from several files including importing stylesheets from other stylesheets and loading scripts from other scripts then the serialization will be much longer, increasing the website’s load time.

To keep the serialization as low as possible you should consider the following:

• Call all images, stylesheets and scripts from the HTML document.
• Call all background images and web fonts from the CSS document.
• Call any resources from scripts only if absolutely necessary.

This ensures the serialization takes place is maximum 3 steps. Here are also things you should avoid:

• Don’t call stylesheets using @import rule.
• Don’t call scripts from within other scripts.
• Don’t call images from other files than the HTML and CSS documents.

Minify your Scripts and Stylesheets

Code is written to be human understandable. However browsers don’t care about its arrangement as long as it is syntactically correct. Removing all the spaces and tabs used for code indentation may reduce the size of these files up to some KB. Optionally you can also minify the HTML code if you feel it adds to the website’s performance.

There are several tools that can do this for you; in WordPress the plugin WP Minify is known to do it best, however the plugin W3 Total Cache which also offers other features that help increase website’s load speed can do it for you and additionally it stores the minified files in a separate cached location so you can still have the well organized code if you wish to make changes to it.

Cache dynamic Content Pages

WordPress, like any other CMS, generate HTML pages on the fly on each request. This means the server parses, compiles and executes the PHP files upon each request which slows down the first HTTP request response. However, since it is a content publishing platform, in most cases the generated content is identical each time and the content generation process is just redundant. The solution in this case is to use a plugin that caches dynamically generated pages statically on the web server and serves them on every request until they expire or are modified. Don’t worry, changing them or adding a comment takes effect immediately as the plugin detects them and updates the pages accordingly.

There are several WordPress plugins that perform the task extremely well, one of the best considered being WP Super Cache and Quick Cache; however the plugin W3 Total Cache which achieves similar performance and has the advantage of offering many more features that help you increase the website’s load speed, which is why we recommend it. We’ll get into details about this plugin later.

Optimize Server Settings for Speed

Servers are by default configured to serve resources as they are and browsers get to cache and refresh them how they want. However, with some simple server-side settings the way requests are being handled can be controlled. Resources can be set an expiration time and they can even be sent compressed. Changing these settings usually requires tweaking the .htaccess file but with help from the plugin W3 Total Cache you can handle these settings from the WordPress admin. Here’s what you should do:

• Set an expiry header for static resources of at least one week
• Set Pragma, Cache-Control and ETag headers to encourage browsers to cache static resources
• Enable GZip compression

Place Stylesheets in Head and Scripts in Footer

Stylesheets should be in the document’s <head> to make it load and render as soon as possible. Some browsers don’t render the page at all before all stylesheets have been loaded and parsed.

Scripts that are not crucial for the website’s rendering should be placed in the document’s footer. This ensures the browser does not begin executing them before the page has finished loading, affecting its performance.

Use a Cookie-Free Domain for static Resources

Web servers have the drawback that if during a page request they serve a resource with a cookie, they will serve the cookie with every resource sent to the browser. This adds a lot of redundant information to each request increasing its load time. However, if static resources are served from a different domain than the one serving the dynamic content, the cookies will not be sent along. Using a Content Delivery Network or CDN solves this but there are also other solutions. Delivering them from a sub-domain of the original domain though does not solve it though.

Use a Content Delivery Network

In terms of hosting, what is more important nowadays is to have the web servers located as close as possible to the users making the request deliver faster, increasing the page’s load speed. This may be problem if your website’s target audience is worldwide but Content Delivery Networks come here to help. Content Delivery Networks, abbreviated CDNs, are data centers located worldwide in target locations that cache static resources of websites and serve them to visitors nearby. CDNs may add to your hosting bill, but if your target audience is worldwide then it’s worth it. The plugin W3 Total Cache automatically integrates your WordPress website with CDNs so you don’t need to bother with settings things up each time you upload something.

Keep in mind however CDNs have one drawback: Since they only cache static resources and the first request being the HTML document and is usually a dynamic one, the request is transferred through a DNS translation to the original server and is served back to the visitor’s computer. This makes the very first request always take much longer, sometimes up to a second. This is not a problem if the other resources are transferred fast enough, however if you have very few static resources, or in contrast many dynamic resources, the CDN could actually hurt your websites performance. If this is the case do some testings before going with a CDN.

Use CloudFlare

If your budget doesn’t allow you to get a CDN for your website, the free of charge service CloudFlare is here to help. CloudFlare is a global network of data centers that act as a proxy between your web server and the internet. The original purpose of this service was to be a security shield between web sites and internet users, but additionally to that CloudFlare caches the website’s static resources in their data centers before sending them thus acting like a CDN. While not offering all the features of a dedicated CDN, its performance may get close to it. The plugin W3 Total Cache can also integrate with CloudFlare.

However, the dynamic requests are still served from the original server through a DNS translation so if you serve few static resources or many dynamic ones, do some tests before. CloudFlare has a section on their dashboard where they show you the performance of a normal request compared to a request backed by their data center and give you a comparison of website load speed. However, they’re tricky. If their service actually hurts the website’s performance they may just display a message saying the page load score is not available. Don’t trust them if you see this message and do some tests yourself.

Beside the security shield and caching static resources CloudFlare also offer features like minifying files and deferring loading of scripts which might also help with website performance.

Use W3 Total Cache

The plugin W3 Total Cache offers a complete set of features to help you increase you website’s performance. It does most server-side tasks automatically from one place without having to tweak the server settings yourself or install a different plugin for each one. Here are the features the plugin offers:

• Caching of dynamically generated content pages
• Minifying scripts, stylesheets and HTML documents
• Concatenating all scripts and stylesheets into a single file
• Caching of database queries and objects
• Set up server-side settings like cache validators, ETags, Vary-Accept headers and document compression
• Integration with CDN services and CloudFlare

Now that we have seen how we can increase the website’s speed with some simple tricks let’s take a look at some things to avoid:

Don’t use third-party Plugins

This is a highly subjective one and bald to bring it up, however if you do some tests yourself you’ll reach a conclusion: Third-party plugins increase website’s load time. The Facebook Like button, the Twitter button and the Google +1 button are all known to increase the website’s loading speed. The reason is because each of them loads its own iframe, which loads its own resources. Their functions can also be implemented with some simple query URLs. They won’t look the same though.

However, these plugins are highly optimized and their effect on the page’s loading speed is not that high. If you want to have the behavior of those buttons on your website then put them, just don’t put more than 2-3 or the website’s performance will be affcted. Also, check each of them and see how many HTTP requests each performs. The Facebook Like Box for example does an awful number of HTTP requests because it loads an image for each displayed user who liked the page. You should definitely not use that one if you want your website to perform fast.

Don’t use Query Strings for static Resources

Query strings appended to static resources are completely useless. The only purpose they serve is to prevent the browser from caching it, which is exactly what you do not want. Additionally some browser don’t cache these resources at all so they’re sent all over again on each request even if the query strings don’t change.

Avoid Requests with 404 Response

Requests that return a 404 take longer. Any simple test will prove it to you. Even if calling some elements that return a 404 do not affect the way the website looks, it definitely makes it load slower. Additionally any other HTTP response which implies a new HTTP redirect affect the page’s load time. 301, 302 redirects, 405 forbidden and similar responses all affect the site’s performance. You should be careful not to do such redirects for the main links and in document resources like stylesheets or scripts.

Useful Tools to help you increase your Website’s Speed

Now that we’ve seen what you can do to increase your website’s loading speed, let’s check out some tools that can help you along the way:

• Loads.in – Tool to check website load speed from different locations. Offers detailed information such as waterfall charts and screenshots.
• Pingdom Tools – Tool to check website load speed. Offers some detailed information and advice how to improve its performance.
• Google Webmaster Tools – Has a section called Site Performance where you can see the average loading time for your website. It gives you a history of the last months progress and a comparison with the fastest loading 20% which they consider to make the difference between slow and fast loading pages. The time however may be a bit unrealistic: 1.5 seconds. Why would a page that loads in 2 seconds be considered slow? It also tells you how accurate these results and from how many users they have been gathered. Keep in mind though these results are gathered only from users who have the Google Toolbar installed.
• Google Page Speed – An addon for Firefox and Chrome that analyzes a webpage’s performance, puts up a page score and gives advice on how to improve its performance. Also available as an standalone online tool.
• YSlow – A plugin available for several browsers that compares the page with a set of rules and puts up a page score. Also offers advice on how to increase the page’s performance. Note that the report on the CDN service is not accurate as a list of CDN is not available with the plugin and must be manually set up.

Remember not to implement all these steps at random. Always do intensive testing and reporting and find out what fits best for you. Also, you shouldn’t stop at the steps presented in this article. It was written from a personal experience and there’s probably more to research and implement on this subject.

The post Make your WordPress powered Website load with Lightning Speed appeared first on One Designs.

Bit this article isn’t here to discuss these parts. Yes, the website’s identity and solid layout are crucial and you should try as hard as possible to make them stand out. What we want to discuss right now are the cases when making the website look the same in all browsers equals going one step too far. And it’s not about doing extra work and wasting more time, sometimes giving that much interest in making your website look identical across browsers can actually hurt your website. Yes, you read that correctly – when caring hurts. Let’s see why:

Websites are not all Design and Content

When we have a website then we have a design, some content and we also have usability. The website’s usability is as important as its design and content and you know you’ve gone too far when the design is affecting its usability. That’s isn’t a secret any longer but exactly how can you determine when a website’s usability is affected by trying to make it look the same across browsers? We’re not discussing things like supporting legacy browsers is hurting your website because probably everybody knows that by now.

The most common mistake I’ve seen in this matter is using fallbacks for each and every HTML5 or CSS3 element you’re implementing. Sure, you feel like you discovered a new toy and like to play around with it a lot. However, when the website is rich with shadows, rounded corners, grandients canvasses or web fonts, creating a fallback for browsers that do not support them is just going to hurt. Just consider this: Every rounded corner, shadow or gradient implies a background image and a container inside the code to hold it, or worse a CSS expression. To recreate web fonts you’ll probably go with a font replacement tool like Cufón, which requires the standard library script, the font script and the call script. The consequence of all this: Page gets significantly loaded. Or bloated if you prefer the naming.

Also, sometimes it’s just not possible to recreate something the browser renders naturally and make it look equally as good. For example you might find it difficult to recreate a box shadow that spans across the entire page container. That would probably mean creating 8 other containing elements around the container, 4 for the margins and 4 for the edges, make them stick to the container’s margin and apply a repeating shadow to them as background. Often you’ll find this impractical so you’ll go with a simpler, but not so good looking shadow.

Let’s take a look at this example, the home page of CyberChimps.com, which uses CSS3 extensively, does some falling back but also leaves some design elements behind in older browsers:

CyberChimps.com in Firefox

CyberChimps.com in IE8

We can agree the website looks equally well in both browsers. If we look carefully at the navigation menu we can see in Firefox there’s a linear gradient as background that has been successfully mimicked in IE. However we can also see in Firefox the navigation bar there are some rounded corners which in IE were left behind. The overall feel of the website remains however the same. In Firefox we can also notice a subtle shadow behind the navigation bar. In IE this could probably not be imitated so they have opted for a more obvious shadow. If we look at both browsers, we can tell the shadow in IE looks obviously out of place.

What it means when you use fallbacks

Every time you use a fallback or any technique or hack to make a browser behave some of the following occur:

• Each background image is an additional HTTP request – page load time suffers
• Each background image needs a separate container in the code – code gets bloated, empty tags even in new browsers, semantics are lost
• Each script is an additional HTTP request – page load time suffers again
• Each script is run in the browser – browser respond slower
• Every CSS expression uses significant ressources – Don’t ever use CSS expressions. CSS expressions are bad, mkay?

Also consider that most people who use older browsers probably also use older computers. Consider also that the browser you’ll mostly need to tweak for is Internet Explorer 8, which is a slow behaving browser by its nature.

Now I’m not saying you shouldn’t develop your website cross-browser. By all means, if you can make it look and behave as close as possible across all browsers then do it, but do it with care.

Use Browser optimization but use it with care

Of course one or two background images or a script can’t hurt too much. If all you’re doing is adding a background image for the top navigation which has a gradient background and adding the HTML5 script for IE then you should have no problem. It’s when your website has lots of rounded corners and shadows and gradients and I mean tens of them when these hacks start to hurt. Also, if these elements are more subtle then falling back to a solid color instead of a background image and forgetting about box shadows may seem better ideas than to implement them by force.

Consider the following rule of thumb: If the website’s design is based on HTML5 and CSS3 elements in its essence then stick to that and use fallbacks for older browsers only where the website’s consistency demands it. If the website uses only a few of these elements then you can make them look conveniently across all browsers.

If you take a look at my website you’re on right now you’ll notice I use elements like rounded corners, background gradients and box shadows quite a lot. However if you visit it from IE 8 you’ll see they’re all gone: the edges are hard, gradients are replaced with background colors and box shadows are completely forgotten. Now I’m not saying my website is an example of consistent user experience. The complete lack of fallbacks was a compromise made in favor of speed.

A not so good example may be if you visit the WordPress backend. In the screenshots below you can see the visual experience of the page is severely altered:

WordPress Admin in Firefox

WordPress Admin in IE8

In a modern browsers you will see shadows, gradients and rounded corners and if you visit it from IE 8 most of them will be gone, however in this case they have an excuse because they are trying to get rid of outdated browsers.

Offer the same experience, not the same looks

If you’re website looks great but it responds slow to something as simple as vertical scrolling then it’s not so great altogether. It’s not worth making it look like the design you had in mind if it can’t behave like a website should – fast and smooth. If the website’s speed and accessibility are kept and its looks are still pleasing then it’s enough for a satisfying user experience. If JavaScript, HTTP requests and other make it load and respond slower then you’ll have to lighten up the page’s load a little. Obtaining  a functional and aesthetically pleasing website is not difficult, you just need to find the right balance.

But my client wants it and pays for it

The main reason why this article was written is the continuing market demand for websites looking identically in all browsers. And it maybe written in vain since, we all know, the client always wins. But the fact that the client wants it doesn’t stop you from trying to talk him out of it. In the end it’s for his benefit and remember – you’re the expert.

The post Why Websites shouldn’t look the same in all Browsers appeared first on One Designs.

The theme comes with two view modes: a gallery view for photoblogging and the classical blog view. Supports post thumbnails, the all-new WordPress 3.1 post formats and takes them a step further by offering audio & video playback. You can download the theme below, view a demo or read further about the theme’s features.

Download View Demo

Click on any of the sections below to get additional information:

• Features

• Installation

• Theme Support

Here’s a full view of the theme in Gallery View:

And in blog view:

Features

Here’s a list of the features this theme comes with. More information about each feature is presented below:

• Gallery & Blog View
• Post Thumbnails
• Post Formats
• Audio & Video playback
• Clean, organized & documented code (yes, it’s a feature )

How let’s get down to the details:

Gallery and Blog view

The theme is intended to be used for photoblogging, travel blogs, professional photography portfolios but also podcasting and conventional blogging. That’s why this theme came up with 2 views and the ability to change them. You can select which section is viewed in which mode and if you would like the default category view to be gallery, you can select one category to be styled as blog.

Post Thumbnails

The theme uses the theme post thumbnail feature to turn each post into a photography showcase. The gallery slider uses post thumbnails to display the image galleries and a featured image can be set for each post. This is useful even if you are not a photographer and have for example a travel blog.

Post Formats

The Theme Supports the WordPress 3.1 post formats image, gallery, audio, video, aside & link. Posts with these formats automatically detect attached media and present it to the viewer in a special format. You can read more about how post formats are handled in the instructions.

Audio & Video Playback

Introducing HTML5 audio and video playback! Taking advantage of the newest emerging web technology, this theme presents you with native audio and video playback and a fallback option for Flash Player if the browser does not support the HTML5 audio and video tags.

Additional Features

We have taken special care when creating this theme to follow all WordPress quality and security guidelines but without cutting on innovation and creativity, to give you a state of the art product. The theme’s code is clean and documented and the theme is designed in such manner that child themes can be easily built upon it. All theme functions are pluggable and can be overriden by child themes and the theme takes advantage of filters and hooks to ensure great flexibility.

Instructions

Post Thumbnail Functionality

By default, Post Thumbnails will appear when posts are being viewed in gallery mode, in blog mode and also in single posts. Post Thumbnails will not work for pages

Image Post Format

Posts with the image format will display the last attached image on top of the post. The last attached image should not appear in the post content to avoid duplicate display.

Gallery Post Format

Posts with the gallery format will display a gallery of attached images, on 3 columns, and also offers a lightbox for full screen preview. Posts with the gallery format should not use the [ gallery ] shortcode to avoid duplicate display.

Audio & Video Post Formats

Posts with the audio & video post format will display the attached media files in a HTML5 <audio> tag with flash fallback. If more than one media file is attached to the post, then these will be used as fallback sources.

Aside & Link Post Formats

Posts with the aside & link post formats will be displayed as normal posts, but can be shown in the Ephemera widget in the sidebar.

Widgets

The Theme includes a custom Widget, Ephemera, that can be used to display a list of the aside & link posts. The widget was copied from the Duster Theme.

Support

For any support questions please use the dedicated section at the forum.

That’s it, happy blogging!

The theme is released under GPL. Feel free and encouraged to use, modify and redistribute it however you like.

The post Minimatica Free WordPress Theme appeared first on One Designs.

Building parent and child themes can actually solve a lot of common problems for developers. For example if developing websites in WordPress and much of the code base repeats itself through projects, a parent theme could stand as a framework offering a starting point for development and a child theme could only take care of the customizations and project-related tasks.

However, since the parent and child theme are 2 complete separate themes that could be made by 2 different developers, several issues may be encountered while used together; for example a major update to the parent theme’s code could cause the child theme to break or one would need to duplicate an entire template file just to make a minor modification, thus losing its inheritance from the parent theme. In this article we will go through some techniques and best practices, that can make a parent/child theme relationship more flexible. First, let’s see the basic principles of this relationship:

Parent/Child Themes Inheritance

Basically, a child theme inherits all the template files from the parent theme, except the ones that can be found in its directory. For example, if the file style.css is found in the child theme’s directory, this one will be used as default stylesheet, all other templates being inherited from the parent theme.

The sole exception to this rule is the file functions.php, which is loaded both from the child theme and from the parent theme.

More about the parent/child theme relationship can be read at the Codex article about Child Themes.

Now let’s see some techniques that we can use when developing parent themes, so we can improve the theme development process of child themes:

Functions that retrieve Template Locations

When manually calling for different template files, it is important to know whether we want to call it from the parent theme or the child theme and if we need the local path to the file or the URI to it.

Normally, if we call a file internally in our request, like requiring a template file, we need the local path. If we call for a file to be displayed in the outputted document, like for example a favicon, we need its URI.

Important: These functions return the values, not echo them and retrieve the locations without a trailing slash (/).

These are the functions that retrieve the template locations:

get_template_directory() : returns the local path of the parent theme’s directory. We need this for example if we require theme theme’s options page. This is likely not to be overridden in the child theme. Example:

require_once ( get_template_directory() . '/theme-options.php' );

get_template_directory_uri() : returns the URI to the parent theme’s directory. We need this for example if we want to call a file that we no not want to be overridden in the child theme. For example, if we register an included JavaScript file:

wp_register_stcript( 'myscript', get_template_directory_uri() . '/scripts/myscript.js' );

get_stylesheet_directory() : returns the local path of the child theme’s directory if a child theme is active and of the parent theme’s if no child theme is active. We need this for example if we want to include template files from the child theme. Example:

include ( get_stylesheet_directory() . '/default-values.php' );

The example above is just for demonstration purposes. If you require a file from the child theme, it is recommended to include it with the function get_template_part.

get_stylesheet_directory_uri() : returns the URI to the child theme’s directory. Useful if we want to call a file like a custom stylesheet or a favicon, that is likely to be overridden by the child theme. Example:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" >

Pluggable Functions

Pluggable functions, are functions that can be overridden by the child theme, i.e. they can be rewritten to be different than the original. They can be added in the functions.php file (or other files included from this file) and the way functions can be made pluggable is by adding an existence conditional before declaring them. The template engine loads the functions.php file from the child theme first, and if the function is already declared, it won’t be loaded from the parent theme’s functions.php. Here’s an example of a pluggable function:

if ( !function_exists( 'mytheme_nav_menu' ) ) :
function mytheme_nav_menu() {
	if ( current_theme_supports( 'menus' ) ) :
		wp_nav_menu( array( 'theme_location' => 'primary_nav', 'fallback_cb' => 'wp_list_pages' ) );
	else :
		wp_list_pages();
	endif;
}
endif;

If a function called mytheme_nav_menu is found in the child theme’s functions.php, the one above will not be loaded. This way, certain functionality sections of the theme can be modified without the need to override complete template files. More about pluggable functions can be read at the Codex article Pluggable Functions.

Action Hooks

Action hooks allow several PHP functions to ‘hook‘ to them, and calls these function when the action hook is called. With the help of action hooks, instead of hard coding a functionality in the theme, it can be declared in a function and then hooked to an action hook. A function can be hooked with the function add_action:

add_action( 'mytheme_after_header', 'mytheme_nav_menu' );

In the example above, we have hooked the function mytheme_nav_menu to the action mytheme_after_header. Action hooks can have any name, but it is preferable that they have descriptive names. Action hooks are called with the function do_action:

do_action( 'mytheme_after_header' );

Functions hooked to this action will be called every time the statement above is called. For example if the statement above is called after the header section, then all function hooked to it will be called there and all output by these functions will be outputted there.

Any hooked functions can be removed with the function remove_action:

remove_action( 'mytheme_after_header', 'mytheme_nav_menu' );

If this function is called before the action hook is fired, the function mytheme_nav_menu will no longer be called, even though it has been hooked earlier.

This way, the theme’s content can be controlled through hooks and customized and overridden by child themes. If template files code is written well and the only PHP statements are calls to hooks in different common locations and all functionality is declared in the functions.php file, the customization possibilities are unlimited and the need to override template files is even more diminished. Action hooks are also useful if plugins require calls to functions from the theme’s template files. Instead of editing the template files, the functions can be hooked.

Action hooks and functions hooked to them also accept arguments and call hooked functions with certain priorities, more about it can be read at the Codex function references about add_action and do_action.

WordPress also has some predefined action hooks that fire at certain moments during a normal request, more about action hooks can be read at the Codex articles about Actions and Action Reference.

Filter Hooks

A filter hook, takes a value that has been passed to it, passes it through all functions that have been hooked to it and then returns the value. This is useful if we want to allow customizing content before outputting it. Let’s take the example of a static footer code and see how this can be customized using filters:

<p>&copy; My Website, All rights reserved</p>

Now, instead of hard coding it into the footer, we can insert it into a string variable and pass it through a filter. The function which passes a variable through a filter is apply_filters:

<?php
	$copyright_text = '&copy My Website, All rights reserved';
	$copyright_text = apply_filters( 'mytheme_footer_copyright', $copyright_text );
?>
<p><?php echo $copyright_text; ?></p>

Now let’s pass this string to a function that also adds the word “Copyright” before it. A function hooked to a filter must accept the value as an argument and is hooked to the filter with the function add_filter:

function mytheme_add_copyright( $input ) {
	$copyright  = 'Copyright ';
	$copyright .= $input;
	return $copyright;
}

add_filter( 'mytheme_footer_copyright', 'mytheme_add_copyright' );

Now the final output of the footer text will be:

<p>Copyright &copy; My Website, All rights reserved</p>

If every outputted content would be passed through a filter, customizing the theme’s content would be much easier. WordPress has some predefined filter hooks, more information about filter hooks can be read at the Codex articles about Filters and  Filter Reference.

The strength of the parent theme can also be improved by adding functionality such as shortcodes to enlighten access to several functions and to allow insertion of certain content inside posts, theme options to allow as much customization of the theme as possible and intensive documentation on how to use and to develop upon the parent theme. A good practice is also to provide backwards compatibility when updating versions or adding functionality and to frequently check the child themes for compatibility issues.

The post How to create flexible WordPress Parent Themes appeared first on One Designs.

This shouldn’t be a problem if the theme has only one options page (and this should be the case for most themes) or even 2 pages, but what if the theme options split into 4, 5 or 6 pages? Themes offering advanced functionality like frameworks may require such an interface if it’s offering a lot of options that cover more than one area. In this case, placing many submenu entries under the Appearance menu would be an ugly option, as these would get lost among the other option pages and would create a unnecessarily long and confusing submenu.

The solution in this case is to create one single menu entry for the theme options and use tabs to separate the options pages. Each page will still be stand alone and have its own URI so it can be managed just like any other options page.

In order to create the tabs, we create a function that generates them from an array and outputs the links for them:

function mytheme_admin_tabs( $current = 'general' ) {
	$tabs = array( 'general' => 'General', 'layout' => 'Layout', 'advanced' => 'Advanced' );
	$links = array();
	foreach( $tabs as $tab => $name ) :
		if ( $tab == $current ) :
			$links[] = "<a class='nav-tab nav-tab-active' href='?page=mytheme_options&tab=$tab'>$name</a>";
		else :
			$links[] = "<a class='nav-tab' href='?page=mytheme_options&tab=$tab'>$name</a>";
		endif;
	endforeach;
	echo '<h2>';
	foreach ( $links as $link )
		echo $link;
	echo '</h2>';
}

Now let’s see what we have done:

• We are storing the tabs (in the form slug => name) in an array called $tabs
• We are creating the links in an array called $links
• We are outputting the tabs wrapped in a h2 tag

Note: Replace mytheme_options with your current theme options page’s slug.

The tabs will now show at the top of the options page with the proper links. As you can see, we have added an argument &tab=slug to the page’s URI so we can check which tab is currently viewed. This argument is ignored by the WordPress core and its presence will not affect its functionality in any way.

All we need to know now is the tab we are viewing so we know which page to output. We do this with a simple call to $_GET['tab'] and call the function that generated the options page:

if ( $pagenow == 'themes.php' && $_GET['page'] == 'mytheme_options' ) :
	if ( isset ( $_GET['tab'] ) ) :
		$tab = $_GET['tab'];
	else:
		$tab = 'general';
	endif;
	switch ( $tab ) :
		case 'general' :
			mytheme_general_options();
			break;
		case 'layout' :
			mytheme_layout_options();
			break;
		case 'advanced' :
			mytheme_advanced_options();
			break;
	endswitch;
endif;

Here’s what we did:

• First we checked if the current page is our theme’s options page, in order not to conflict with any other pages that may use tabs.
• We checked what tab is set in the URI and defaulted it to ‘general’ because WordPress doesn’t add a tab to the menu link, it does not know about it.
• We called the required function to generate the options tab, depending on the current tab.

That’s it! Our options page is now separated in tabs. Sorry to disappoint you if you expected it to be more complicated. Forget about jQuery and AJAX content generators that just bloat your code and reduce the user experience. This is a streamline method, simple and clean that lets you control a theme with lots of options.

Hope to see more clean and useful options pages in themes from now on.

The post Separate multiple Theme Options Pages using Tabs appeared first on One Designs.

In this article, we will go through the greatest known frameworks, analyzing them from each standpoint we considered important and see how they can help your website or development process. The aspects that we will review are:

• Features
• Development Capabilities
• Security
• Support
• Child Themes

Some frameworks we reviewed did not make it into the “great” category. They will be presented in some words at the end of this article, along with a teaser.

Now let’s take these themes and break them to pieces:

Genesis

The premium theme framework from StudioPress and the foundation for all their themes. Genesis is pretty young for its reputation, being just one year old; however, it rose to popularity quite short after its launch. The idea for this framework came after the developers at StudioPress realized most of their themes use the same code base.

Features: Genesis advertises itself to offer “unlimited-everything”. Truth is, it offers a lot of features out of the box and is extended by some great plugins. Here’s what this theme and its options offer: select fonts and font sizes, SEO options, featured posts, automatic updates, ad ready, localization, featured images. And it doesn’t end here; this theme offers a generous options page that lets you have control over most parts of your website and is of course inherited in child themes.

Development Capabilities: Genesis has been built with development in mind. It has been thought to stand as a foundation for child themes and all themes from the StudioPress Gallery are child themes built upon Genesis. It offers over 50 action and filters, and all generated content is hooked to those actions which makes it a flexible and extremely customizable theme.

Security: Before officially releasing the theme, the developers from WordPress were asked to do a security audit of the theme. Their conclusion was that Genesis followed all recommended security guidelines and was definitely build with security in mind. You can be sure that with Genesis you get a secure theme, free of vulnerabilities.

Support: Support is available through the support forum. Genesis is known to be a community project, so many people may be around to help.

Child Themes: StudioPress has a generous gallery of themes, all being child themes for Genesis. Here as some of the most beautiful:

Crystal

Their newest child theme released just one month ago. Intended to be used as a portfolio theme, it’s definitely a beautiful piece of art that goes way beyond its purpose. It has a 2 or 3 columns layout, a dedicated portfolio template and a jQuery image slider for the front page.

Expose

A child theme for photographers and photoblogging. Showcases a beautiful gallery of articles and featured images on the front page.

Landscape

Another theme for photographers, this time with a front page image slider and gallery.

Platinium

A stylish magazine style theme, great for a wide variety of websites.

Lifestyle

A stylish magazine style theme that should fit for any website, perfect for a fashion, lifestyle or music blog.

Lexicon

A beautiful magazine style child theme for journalists and gossip blogs.

Manhattan

A portfolio theme with a front page gallery slider and contact form.

Mocha

Another stylish theme perfect for fashion, lifestyle or music blogs.

News

With a simple layout and strong focus on content, as the name says, great for news papers and writers.

Outreach

A beautiful theme with an interesting front page gallery and showcase of posts.

Thematic

A free WordPress Theme Framework by Ian Stewart. Features several grid-based layouts, support for popular plugins, 13 widget-ready aread, hooks and filters to make it a flexible framework. One of the most popular and easy to use frameworks, Thematic is perfect for beginners, developers and bloggers alike.

Features: Thematic is a “starter” theme, aimed to be a solid parent theme for child themes to be built upon. While it doesn’t have a rich options page, it comes with several grid-based layouts to choose from and several built in functions that can be hooked to the numerous actions and filters, making development of child themes an easy process. The easy learning curve of Thematic has brought its popularity. If you’re a developer, just take a look at the code.

Development Capabilities: Thematic offers a solid code base and several built-in functions to get you started. While using the theme in its original shape doesn’t bring a lot, development of child themes is an easy task that would definitely give some power to your website.

Security: Built by Ian Stewart from Automattic, Thematic is definitely a community project that incorporated the best practices in the development of WordPress themes. However, since this is a starter theme, and not one that offers several options, this isn’t such a big concern.

Thematic: There’s a documentation and a support forum available.

Child Themes: The original intention for Thematic, as Ian Stewart reported, was to have a solid foundation for his website, to easy development process for each redesign. Thematic offers an easy way to build child themes upon, and also the theme’s home page offers a nice gallery of free and paid child themes, here are some of them:

Neutica+

A slick magazine style child theme with an interesting layout, featured images and a front page content slider.

Early Morning

A theme with beautiful typography, for writers or bloggers.

SimpleCart

A child theme offering simple and basic eCommerce solutions.

Street

Another theme with beautiful typography, using the Cufon script to render fonts.

Audry

A stylish and creative theme with a very beautiful design and color scheme.

Gallery

A theme for photographers and photoblogging.

Simple Realty

A theme designed for small real estate businesses.

Hybrid

Hybrid is a powerful theme framework developed by Justin Tadlock. Built on similar principles as Thematic, Hybrid is simple to use and build upon, has several built-in features and functions and a more generous options page. The theme is free to use and it also has a theme club with paid membership offering documentation and support.

Features: Hybrid stands as a powerful parent theme to build child themes upon, offering lots of built-in functionality like post thumbnails, breadcrumb trails, SEO options, shortcodes and much more.

Development Capabilities:If you’re a developer, you’ll love this theme.  Hybrid offers 14 custom page templates, 9 widget-ready areas, lots of actions and filters to hook your functions to. Also, the available child themes are feature rich so starting a development process should be an easy task.

Security: Developed by Justin Tadlock, one of the greatest WordPress developers working very close with the WordPress community, Hybrid has been build following the best security practices WordPress recommends.

Support: Support and documentation is available to paid members of the theme club.

Child Themes: Hybrid offers a generous gallery of child themes, here is a selection of the most beautiful:

Hybrid News

A magazine style theme with post featured images and front page posts slider.

Outline

A minimalist theme supporting featured images. The theme Justin Tadlock uses on his blog.

Life Collage

A child theme making use of some beautiful colors.

Old School

A magazine style theme perfect for a gaming or music website.

Boxpulse

A theme with light colors and a front page featured posts slider.

WP Full Site

A one column child theme with beautiful typography and focus on content.

Canvas

Canvas is the premium theme framework from WooThemes. As they state, it’s their most ambitious project to date and indeed it’s a very well made framework. It offers many features, a n extremely generous options panel and almost everything in the theme is customizable.

Features: Canvas comes with a lot of buil-in features. It comes with custom page templates, the ability to change the layout, typography, background elements and use custom fonts. It also supports featured images, shortcodes and has built-in SEO options.

Development Capabilities: Canvas supports child themes and has been built on the Woo Framework, bringing all the code base WooThemes has to offer and a lot on built-in functions ready to use.

Security: Since WooThemes has gone GPL, their themes are known to be very stable and secure, built following the recommended theme development guidelines. While the method used to handle the theme options may be a little outdated, the still is secure and safe to use.

Support: Documentation and support is available through the WooThemes support program.

Child Themes: The theme has great support for child themes, however, unlike other framework authors, WooThemes doesn’t provide any ready child themes. We could find some child themes made by a fan-site Steam Engine Media, to showcase what Canvas can acchieve:

Optimize Canvas

A business theme created on the same code base as the Optimize theme from WooThemes, just turned into a child theme for Canvas.

Typewriter Canvas

A minimalist theme with beautiful typography, for writers or bloggers.

Carrington

Carrington is a powerful framework that comes in 4 separate packages: Carrington Blog, Carrington Text, Carrington Mobile and Carrington JAM; all built upon the same code base, Carrington Core, the main difference between them being the design. Although offering an options page, Carrington is a starter theme, but, unlike other theme frameworks, it comes with a design that is stylish and ready for use, diminishing the need of building upon.

Features: Carrington comes with basic features like flexible, small size templating system, customizable header and colors and AJAX-loading of contents.

Development Capabilities: Carrington uses a solid code base, separate from the design, which is called Carrington Core and is the actual framework. Upon them, some theme designs have been built, not as child themes but as stand alone themes, probably to serve for similar looking child themes.

Security: Carrington follows most of the guidelines at WordPress for building secure themes. The Theme Options page is built using an outdated method, still it uses nonces and other recommendations which make it a secure theme.

Support: Documentation and a support forum are available.

Child Themes: Carrington supports child themes, however we couldn’t find any available in the wild. Instead, Carington offers these 3 complete themes:

Carrington Blog

A stylish and elegant theme for blogs and websites.

Carrington Text

A simple, minimalist theme. No background images and beautiful typography to make the content stand out.

Carington Mobile

The Carrington theme to serve mobile phones and handheld devices.

Carrington JAM

Short for “just add markup”, this is a plain text, raw and unformatted theme to be built upon.

Bonus Theme Frameworks

These are some themes that didn’t make it into the great category, but are still very good themes to use:

Atahualpa: A theme framework offering a solid code base. Good if you are starting a big development project or know yourself around with code. This theme offers an options page with more options that you can handle and sometimes misses some you could handle. Also has the habit of outputting hundreds of lines in the document’s head.

Thesis: An evil theme having a way of it’s own of being a framework. Child themes are not supported, at least not the way they should. It also comes with a license and price tag that make you feel like an iPhone user. However, it has an options page that could cover most of anyone’s needs and is known to offer great support.

Stuffusion: An advanced theme framework offering a lot of customization options. One of the most popular and highest rated at the WordPress directory.

Platform: Comes in a free and paid version, having a drag an drop options page that lets you customize your theme. Also comes with a lot of other features and a beautiful design.

Constructor: A theme framework offering several design options and known to be easy to customize.

Teaser

I am currently working at a theme framework. When it will be ready, it will be available for free as all my other themes. Here are some teaser screenshots of the front page and the theme options page:

The post 5+ WordPress Theme Frameworks Compared appeared first on One Designs.