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…)

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

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.

17 Awesome Adobe air apps for designers

One fine day I was trying to fill in an important official form online on my Mozilla Firefox’s browser. After spending about half an hour I reached the last few questions of the form. One question there asked me to click a checkbox to answer but I could see no checkbox on the screen. After wasting a lot of time reading the instructions and every possible detail over and over again I asked for advice from my friends. One person told me that I should try to refill the form on Internet Explorer. I tried it and now the checkbox appeared and I successfully completed and submitted the form online.

The problem just described occurred because the form was designed to work especially for Internet Explorer. You see, designing an application for all systems is tedious as one has to tweak the runtime code again and again to make it compatible to work with different systems. Here is where Adobe AIR jumps in. If an internet application is designed using Adobe AIR then it will automatically work for all systems and browsers.

Technically speaking:

“Adobe AIR is a cross-operating system runtime that lets developers combine HTML, JavaScript, Adobe Flash and Flex technologies, and Action Script to deploy rich Internet applications (RIAs) on a broad range of devices including desktop computers, netbooks, tablets, smartphones, and TVs. AIR allows developers to use familiar tools such as Adobe Dreamweaver®, Flash Builder®, Flash Catalyst®, Flash Professional, or any text editor to build their applications and easily deliver a single application installer that works across operating systems.” – Adobe’s website.

Adobe AIR has a wide array of apps that can help designers design better applications. Below I have selected 17 of them.

(more…)

20 Useful Admin Plug-ins for WordPress

Do you know what makes WordPress the number one choice amongst bloggers? Although one can list many reasons but one of the most prominent in the list will be the number of plug-ins it supports. WordPress currently runs more than 20,000 plug-ins that have been downloaded more than 30 chore times! This is both good and bad news. Good news because you will have a lot to choose from. You will almost every time find what you need. Bad news because amongst such a vast ocean of plug-ins it is easy to get lost and drowned in the information overload. To help you out we present you with 20 WordPress admin plug-ins that we feel are the best in their niche. As the name suggests these are admin plug-ins i.e. they will help the administrator of the WordPress blog to operate the blog in a better and more efficient way.

For example, let’s say that you are fed up with all the clutter of the unnecessary and superfluous windows and bars that occupy your WordPress dashboard. Try Ad minimize, listed in the first position below. This plug-in allows you to compress windows to allow more content to be substituted in its place. Obviously different people have different priorities. So with Ad minimize you can customize your WordPress’s dashboard the way you like.

Besides Ad minimize, there are 19 other useful plug-ins that, I think, you should know of. Scroll down and check them out.

(more…)

40 Future City Art Illustrations for Inspiration

My physics teacher used to say – “Change is constant in nature. If change is not taking place then something is wrong.” We started from a Big Bang, life somehow evolved on earth, we learnt how to burn fire, we learnt the power of a wheel, we learned how to make machines, Franklin discovered electricity, Faraday discovered how to produce it in power houses, Bill Gates developed Windows and here we are in the twenty first century. But what if we try to go a little further? What if we try to envision the future? This is an interesting topic and the numerous popular science fiction movies and novels bear witness to this fact.

Stephen Hawking said on a Discovery Channel program that it may be possible to build a time machine with which we can go into the future but not back in history. Such a time machine has not yet been made and is only a subject of fiction. Science is too strict and limited by the laws of nature while art, in this respect, is limitless as it is free to imagine and inculcate anything and everything in its domain. Below I present you with 40 art illustrations which our artists have carefully crafted by imagining what the future of our world might look.

(more…)