WordPress Theme Deconstructed

Last week we touched on the basic components of a typical WordPress theme. Below is a visual example of how the layout looks like.

The components are as follows:

The Header (header.php)

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

Most themes have a header image that displays at the top of the page. This image is generated by a graphic defined either in the CSS value for the property that represents the header area or through the use of a custom header feature in WordPress. In themes that don’t have the custom header image feature, you can easily define a background image for the header image using CSS. (source: CSS for Dummies)

Menu (navigation) – usually found within or above the header

There are two ways to display a nav menu. One is by calling wp_nav_menu() within a theme template file. The other is by using the Navigation Menu widget. Most themes will call a menu from their header.php template, but menus can be placed anywhere. (source: Justin Tadlock)

The Sidebar (sidebar.php)

In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title.
According to the WordPress Codex and in terms of design,
a sidebar is:
“… a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.”

(You can also check out our previous article “Adding Sidebars to WordPress” to read more about sidebars.)

The Content Column (index.php)

The content container in WordPress plays the most important role. It holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.

Content consists of text, images, or other information shared in posts. This is separate from the structural design of a web site, which provides a framework into which the content is inserted, and the presentation of a site, which involves graphic design.

The Footer (footer.php)

The footer is found within the footer.php template file. Footers are more than just a place to put copyright information. The footer in a web design is the bottom of the page. It indicates the end of the page. The footer includes navigational links to move the reader into your blog’s content, but it does so much more. It’s the last thing some visitors see after they finish reading your blog post and comments and should encourage people to stay a little longer on your site. (Source: lorelle.wordpress.com).

More next week!

WordPress Plugins 2013: Trends

WordPress themes, free or premium, come with common, basic features and functionalities upon installation. Some are built in together with the WordPress version you are using while others come with the theme you plan to use and install. Technically, these plugins are a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog. Simply put, these plugins offer new additions to your blog that either enhance features that were already available or add otherwise unavailable new features to your site. Here are some of what we think will be the WordPress Plugin Trends for 2013:

Jetpack Plugin

The JetPack plugin supercharges your self?hosted WordPress site with the awesome cloud power of WordPress.com. You can activate this plugin if you have an existing blog on WordPress.com. Once connected and activated, several awesome features available on WordPress.com like: Contact Form, Gravatar Hovercards, Shortcode Embeds, Spelling and Grammar, and many others become available to your self-hosted site. All this is powered by WordPress.com’s cloud infrastructure.

WordPress SEO Plugin by Yoast

This popular plugin designed and developed by WordPress Consultant Joost De Valk. WordPress SEO is the most complete WordPress SEO plugin that exists today for WordPress.org users. It incorporates everything from a snippet preview and page analysis functionality that helps you optimize your pages content, images titles, meta descriptions and more to XML sitemaps, and loads of optimization options in between. It has recently been updated and is now compatible with WordPress 3.5.

ALO EasyMail Newsletter

One of the best ways to connect to your market is to get them to subscribe to your newsletter via email. It is also one of the most tedious things to do if you do not have an ARS (auto responder system) provider who will automatically distribute your newsletter. ALO EasyMail Newsletter is a great email marketing marketing tool that allows you to gather and manage subscribers and write and send newsletters right within WordPress. It also supports internationalization and multi language requirements.

WP Smush.it

Improving your page ranking is not just about having the right keywords. Fast loading pages are now part of the equation. WP Smush.it is a plugin that offers an API that performs image optimizations like optimizing JPEG compression and converting certain GIFs to indexed PNGs automatically to help improve site performance. As sites continue to become more image intensive, plugins like this are helpful in managing load rate.

Photonic Gallery for Flickr, Picasa, SmugMug, 500px and Instagram

Social networking has branched out into different streams and has integrated images into its arsenal. Hence the popularity of Pinterest and Instagram. Photonic takes all that and lets you use the WordPress gallery shortcode and ramps it up with a lot of added functionality including glamming up your social networking images like Instagram. It supports Flickr photos, Photo sets, Galleries and Collections, along with Picasa photos and albums, SmugMug albums and images, 500px photos and collections, and Instagram photos and users. You can also enable authentication for your site visitors that will let them see private and protected photos from each provider.

WordPress 3.5 has been released so some of these plugins may need to be updated to work with the latest WordPress update. Please check the developers’ links to see of they have a version compatible with the latest update.

Top 5 Themes for Non-Profit Organizations

It’s now that time of the year when most of the world celebrates Christmas. It is the season when the Christian world reflects on the birth of the Lord Jesus Christ which ultimately leads to his sacrifice on the cross so people may live a much better life in Him. It is also during this time when people are reminded to think beyond themselves and work towards causes to make the world a better place to live in. In the spirit of Christmas, we are featuring top 5 best selling and well rated themes for non-profit organizations:

1. Churchope

Churchope is a WordPress theme designed for churches. The homepage features a great slider perfect for giving visitors a brief presentation on what the church mission and beliefs are. The theme has capabilities for embedding videos as well as playing audio tracks. It also has a great calendar system to keep church members updated on the next church event. Overall, whether it’s viewing or listening to the latest sermon online or catching up with the next church activities, Churchope meets those needs and so much more.

2. WP Church

This is another theme that’s perfect for churches. It has an amazing slider set on a wood finish background. WP Church also gives visitors the chance to watch videos and audio tracks, listen to preaching or testimonies, and keep track of event countdowns on a dedicated event page. It also has a special scripture tool that automatically adds scripture text when the scripture reference (e.g. Ps. 121:1) is typed.

3. Campaign

This is a special theme for individuals running for public office. Candidate updates and news may be posted as well as a schedule for campaign events & sorties. There’s also a special tool for capturing names & email addresses of constituents and supporters and even a special, easy to set-up donation button. This theme can also be used for fund raising, charity events and the like.

4. Earth

This premium WordPress theme is designed for today’s eco-warriors. The environmental movement relies heavily on images to tell the stories of how the planet’s resources are being depleted because of human and industrial factors. Earth has great multimedia presentation capabilities that can help tell that story. This theme has an amazing slider that capable of embedding powerful video presentations to stir up conservation. It also has great sortable portfolio pages perfect for documenting various conservation projects of any environmental organization.

5. Animal Care

Animal care is a theme designed for cause oriented groups or movements who want to establish an online presence. This theme’s home page has a beautiful slider that can be used to effectively communicate the organization’s mission. The theme has allotted ample space for images, blog pages, and there is also a special box for special news posts regarding the organizations activities. Interested parties are given an opportunity to donate via a special donation button on the homepage.

There are more themes out there designed for non-profits. Hat tip to all the designers and developers who have created these themes to help the advancement of great causes.

22 Awesome jQuery Typography Plugins 2013

In today’s fast moving internet world every website owner is using all the tools that he can to make his website look more visually appealing and more attractive in terms of design. This makes sense because if you think that websites should only provide information then you should not consider starting up a website at all.

Now many different types of technological tools are available out there which can help you design better websites. In this article I have chosen to focus on jQuery plugins.

jQuery is a JavaScript library that simplifies HTML, document traversing, event handling, animating and Ajax interactions for rapid web development.

Below I have compiled 22 awesome jQuery typography plug-ins which you can use to enhance your site. To show one example how these plug-ins can help you, let’s take a look at the first plugin J Rumble. I am sure you know sites that change the link color when you move your hover over the link. This effect is known as “hover effect”. J Rumble takes this technology one step further. By using this plugin, as soon as someone chooses an element of your site, the element will rumble, vibrate, shake or rotate.

There are 21 other plugins that will make your life easier. So scroll down and take a look.

(more…)

Fusion Theme from Elegant Themes Coming Soon

Elegant Themes recently announced their new and upcoming theme: Fusion – a theme designed to “fuse” professionalism and pizzazz to create that perfect solution for technology companies and blogs alike. If you run a tech blog or an app development company and you need a really cool looking theme that’s hip and modern then Fusion is probably the theme for you.

The general design of this theme is similar to Elegant’s recent themes, Nimble and Harmony, taking off from that single page design while adding the modern, graphic flavor to it. One of the many benefits of a “one page” design is that you get a quick and easy, concise at a glance look, quite handy for mobile devices, with options for details in sub pages.

Similar to Nimble and Harmony, Fusion has large sections clearly delineated from each other. Fusion has a section allocated for a logo, navigation menu and other corporate brand or social networking icons all prominently located above and seamlessly flows into a generously spaced section for a slider. This slider section can be used to showcase featured images or products, attention grabbing spiels, and other important announcements useful to your visitors. This can be followed by a section where static text boxes or placeholders can be used to feature select products or services. You also have an area to feature the latest blog post headlines that link to the full posts on the and there is also provision for sponsor links or ad banners. A widgetized footer area can also be setup to add more features and functionalities useful to the site.

So far we we’ve seen that Elegant Themes has been consistent as far as quality is concerned and so far, each product released remains true to its reputation for great design. This commitment can be experienced and has been experienced by so many customers in every Elegant Themes subscription. This latest theme offering is something to look forward to and no doubt it will be something that will surely be according to Elegant Themes’ strict standards.

Get 77 Premium Themes For $39

Specialty: Clean Business WordPress Theme

The main purpose of a business theme is to create awareness, generate interest, and convert casual visitors to engaged followers/clients/customers. For a business theme to be effective, it has to have the following elements:

  • Great SEO capabilities.
  • Great design recall.
  • Readable, well organized text and multimedia content.
  • Effective interactive feedback system.

WP Business Bundle just released Specialty, a responsive premium WordPress theme designed to present your business or your company in a clear and concise manner. Overall, the theme is clean, modern and generous with whitespace. It has a great, sizeable slider that can really grab attention of casual visitors. Visitors are given control over slider transitions which gives each slide the appropriate airtime based on visitor preference.

Content is definitely readable on this theme. Font size and spacing between text boxes are great, giving visitors an uncluttered, relaxed reading experience. Images are displayed in a clean, well organized portfolio grid style which can also be sorted according to category. There’s also the option to use a jQuery masonry layout for those who want that Pinterest look. Thumbnails are slightly bigger that typical portfolio pages giving visitors a better overview of the work. Pages containing detailed narratives include large images of the work. This theme can also handle video and it includes a large section where you can showcase a special video or image right on the homepage.

Specialty does have a responsive design giving visitors the chance to appreciate the site’s content on smartphones and tablets. Specialty includes a basic contact form, custom post types, an easy to use custom panel, and just the right amount of widgets and features to get your site up and running without much fuss.

More Features:

  • Import/Export Functionality for Theme Options
  • Seven Pre-Defined Color Schemes
  • Breadcrumb Navigation
  • Adjustable Footer Widget Area (1-4 Columns)
  • Custom Post Types: Slider | Portfolio |Testimonial
  • Engaging Portfolio Layout with jQuery Masonry
  • HTML5 Markup | CSS3 Effects

Specialty Premium WordPress Theme is part of a bundle of themes and business-tailored plugins at WP Business Bundle available starting from $79. This theme includes documentation, future updates. For an additional $9 per month, you also get the PSD files, XML files, and access to the theme’s support forum.

Join WP Business Bundle Now

Harmony Theme from Elegant Themes is LIVE

On Nov 29, Elegant Themes officially released Harmony, a versatile premium WordPress theme designed for musicians and bands. Its key features are its custom audio player for sampling music tracks, event manager features and eCommerce functionality. Visitors can listen to the band’s music, purchase concert tickets via the band’s ticket vendor of choice and purchase music/merchandise through the theme’s WooCommerce powered e-store pages. It’s a one-stop website both musicians and fans will surely enjoy.

Harmony is a well designed, well developed theme considering this is Elegant’s first step into music themes. A lot of expectation and inputs have been given by users since the theme’s announcement on Nov. 7 and these suggestions have been carefully woven into the theme as best possible. The theme continues to deliver that signature Elegant Themes look and upholds its reputation for simple yet sophisticated design that distinguishes it, specifically Harmony’s aesthetics, from other music themes in the market. In addition, its excellent event management capabilities make it convenient for fans to patronize the band’s latest gigs and concerts as seamless and as effortless as scrolling through the pages.

Harmony includes an integrated MP3 audio player which gives fans and potential fans the opportunity to listen to audio samples of upcoming or already released music tracks. The theme is also equipped to display music videos and concert previews as an effective marketing tool to attract the attention of this media savvy generation of fans. This theme is also responsive and will work well on handheld and mobile devices – a staple of every ear plugged music fan out there. This means that fans can enjoy their favorite band’s music anytime, anywhere – which is definitely music to any musician’s ears.

Features:

  • Responsive Design
  • Theme Options
  • Shortcodes
  • Page Templates
  • Perpetual Updates
  • Secure and Valid Code
  • Browser Compatibility
  • Complete Localization
  • Unlimited Colors
  • Unparalleled Support

Harmony Premium WordPress Theme includes top-notch tech support provided by Elegant themes’ support staff to help you setup your site and get it running in no time.

Get 77 Premium Themes for $39

Let’s Write Some WordPress Poetry

If you have been following this basic WordPress journey, you would have learned some very basic info about WordPress, HTML, CSS, PHP, tags, html templates, css stylesheets, and a whole lot more. It’s about time to put that basic info to the test and write something “poetic” or at least attempt to. The key word here being “attempt”.

Our attempt is to write something very simple and easy. We will assume that you already have your own domain name and that you have WordPress installed and running on your site. If you’ve never coded a WordPress theme before or your brain freezes at the sight of all the gobbledygook and unintelligible mishmash of hyphens, brackets, parentheses, asterisks, colons and semicolons, and so much more, this might help you. For the experts out there, pardon the language, because this might turn out to be too barbaric for your code sensibilities. Sounds scary already.

We now know that HTML and PHP are two distinct “web” languages and that WordPress is written using PHP. WordPress Themes are basically plain HTML templates, with WordPress specific PHP tags integrated into specific areas where needed.

Just like the old snail mail letter where you have the date, the heading, the greeting or salutation, the body of the letter, the closing, and the signature, the basic components of a typical WordPress theme consists of:

  • the Header
  • the Menu (navigation)
  • the Sidebars
  • the Content Column and
  • the Footer

And just like the traditional snail mail letter where you need to write on real paper, you will need a text editor to write your code. Those are the basics.

In a previous article, we wrote that one of the fastest ways to learn a language is through immersion. We will attempt to apply this immersion technique in this exercise and hopefully we can learn to understand, then “speak” and “write” WordPress code as we go along. In this little experiment, we shall choose a theme, (Twenty Eleven, in this case), analyze it, try to dissect it and break it down, and then ry to create our own version, super simplified of course, based on our understanding of how it works. We will be working backwards instead of coding from scratch.

Let’s take a look at what Twenty Eleven’s Main Index Template (index.php) contains and let’s dissect. (The code below is taken from an existing website. Some of the tags have been color coded only for the purpose of this discussion).

Note that the items highlighted in red refer to the basic components of a WordPress Theme. If we strip it down to these basics, eliminate the rest of the code (strings, integers, and variables) and leave just the basic, we can actually begin to write simple code that looks like this:

(The Header)
<?php get_header(); ?>

(The Menu)
<?php if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>

(The Content)
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>

(The Sidebar)
<?php get_sidebar(); ?>

(The Footer)
<?php get_footer(); ?>

Of course we might be breaking a few syntax rules here and there but we’ve managed to write some sort of broken WordPress poetry. Haiku-like perhaps but nevertheless, it IS code. Till next!

5 Excellent Resources for Free PSD Web Templates


The Internet is such a great resource for learning almost anything. You can practically start a whole new career based on all the free available information that can be downloaded online. Thanks to very generous people who don’t mind sharing their talent and resources for others to learn from. For those who want to try their hand at designing web templates, one of the best ways to learn is to mimic the good ones that are out there. Thankfully, there are excellent resources out there if you know where to look. Here are some of the best that’s out there today and the great thing about it is that these resources are absolutely free. Check them out:

Blaz Robar

Blaz Robar is a graphic designer from Melbourne, Australia and is part of a web design studio, Eleven Media that specialises in creating unique WordPress themes. Below is one of the many PSD templates available on his site Blazrobar.com and you can also find his work on www.thelayoutlab.com.

Luis Zuno

Luis Zuno is a full time web designer & developer spends his time creating themes and templates. Below is a sample of one of the free PSD files on this site were created by him. According to him, you are free to download, and use them in both your commercial and personal projects. Luis Zuno’s work can also be found at ThemeForest.

Martin Fabricius

Martin Fabricius is a young and talented web designer from Vejle Denmark and has won several awards in his homeland. According to him:

My big passion is usability and web and app design. I make web and app design on a freelance basis apart from my job as CTO to Ungarbejde.dk

Below is a sample of the kind of work that is available on his website:

Elemis Freebies

Cemile and Volkan are two graduate students at VCD in Istanbul and work as freelance web designer/developers. Currently they are working on creating user-friendly and clean website templates on Themeforest.
Below is a sample of their work which can be downloaded for free on their website:

Premium Coding

Premium Coding is an interactive multimedia design website that provides tons of resources for web developers, designers, and the web community. Below is a sample of one of the many free resources you can download from their site.

With all the free tutorials, templates, and design resources available out there, you can jump start your web design skills in no time. So bring out your text editor, your editing software and get started. All you need to add to the equation is your time.