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.

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

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!

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

The Basic Web Page Structure – HTML5 List of Tags


You can think of an HTML page as a series of containers. After an opening statement that defines the type of page to follow, there is one large element, the <html> tag, that contains the two primary structural elements, and <body>.

HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as “<body>“, and an end tag, such as “</body>“. (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)

Here’s how the basic essential code for an HTML5 web page looks:

<!DOCTYPE html>
<html>
<head>
<title> Title of document goes here </title>
</head>
<body>
Visible text goes here…
</body>
</html>

Before we can fully appreciate what these containers or placeholders do to our webpage we need to know how they function. Below is a list of HTML5 compliant tags we can use to study and familiarize ourselves with as to the description and function of each tag. Let’s do a little exercise. As you go through the list, pick a web page (any, even this one) and right click on it. Select “view page source” and try to find the tags listed here and look for them in the page source. Try to classify which ones are basic tags, formatting tags, image tags, and so on. While you are at it, challenge yourself to decode the code. Have fun!

<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<time> Defines a date/time
<wbr> Defines a possible line-break
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
<figure> Specifies self-contained content
<audio> Defines sound content
<source> Defines multiple media resources for media elements ( and )
<track> Defines text tracks for media elements ( and )
<video> Defines a video or movie
<nav> Defines navigation links
<command> Defines a command button that a user can invoke
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<hgroup> Groups heading elements
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a details element
<embed> Defines a container for an external (non-HTML) application

Don’t forget that WordPress uses PHP but PHP is a server-side technology (runs on a server) that dynamically generates the HTML that will be sent to the browser (IE, Safari, Firefox, Chrome). HTML is whatever you view on a website.

On Becoming a WordPress Professional

How does one become a certified WordPress professional indeed? Earning your stripes as a WordPress professional does not come from a course you enroll in and study for X number of years in your regular university. Neither do you get a degree or a diploma for the numerous WordPress conferences, seminars or webinars you attend. In truth, becoming a WordPress professional is not age bound, race bound, location bound, language bound or educational background bound. One key ingredient is the willingness to learn, make mistakes, and learn all over again.

Many current WordPress professionals and practitioners did not start out as such. Perhaps some have come out from the corporate world and taken a radical sabbatical from their daily grind while others probably started out in their dorm room or garage. Maybe others began tinkering with WordPress while they were in their teens while some are going through a second wind in their careers. The Internet has this built-in democratic leveling quality where anyone can make it regardless. Since the year is about to end, maybe some of you are considering a quiet change or transition into something else – a new career path of sorts. You don’t necessarily have to be a developer or a designer to be a WordPress professional. Here are a few options for you to think of if you are considering a shift into the exciting world of WordPress:

Developer

Web development is the back-end of the website, the programming and interactions on the pages. A web developer focuses on how a site works and how the customers get things done on it. Good web developers know how to program CGI and scripts like PHP. They understand about how web forms work and can keep a site running effectively.A good web developer will have excellent programming skills and be able to use a range of programming tools. He or she will be able to provide solutions to give a website the functions required. Web developers will use a range of programming tools such as ASP, Javascript, XML and SQL. The focus is more on the backend and the functionality of the site.

Designer (Themes)

Web design determines the look and feel of a website. It covers the layout, navigation and colors of a website. Web design is more concerned with aesthetics and user experience than functions. A web designer will make a website easy to use and fit for purpose. A good web designer will have graphic design skills and a good understanding of marketing. He or she will know how to grab the attention of visitors and encourage them to explore a website. A web designer is concerned with how a site looks and how the customers interact with it. Good web designers know how to put together the principles of design to create a site that looks great. They also understand about usability and how to create a site that customers want to navigate around in.

Developer (Plugins and Widgets)

Plug-ins and widgets are a great way to enhance the functionality of your site by adding in extra features. These can be placed anywhere inside your template by function hooks. You can start creating and eventually selling stand-alone plugins that add value to existing or new themes.

Support Professional

One of the most common deficiencies in the WordPress themes marketplace is the lack of or absence of theme support. You can start a career by being part of a support team that is responsible for providing after-sales support to customers who have purchased specific themes.

Consultant/Marketing

Providing consultancy services, networking, and hooking up clients with designers and developers is another option to becoming a WordPress Professional. Many times, a lot of great designers do poorly sales-wise because of a lack of marketing skills. You can offer your services to acts as a marketing consultant to WordPress designers and developers who have little or no time to do the marketing themselves.

Blogger/ Theme Description Writer

With the explosion of WordPress themes in the marketplace, there is very little difference between one theme to the next and a lot of them look like clones. You can offer your services as a writer to create a marketing hook for designers and developers who would rather write code than a marketing spiel.

Documentation Writer

Providing appropriate and useful detailed documentation that is easy to understand even by WordPress beginners is another option. Transcribing the installation and setting up process in easy to follow steps adds value to the theme and a well written piece will mean less resources spent on support.

WordPress Trainor

If you have acquired a certain level of proficiency in WordPress and you are confident enough about what you know, you can also try going into teaching and training.

These are just a few ideas to think of as you consider starting or shifting to a career as a WordPress professional.

10 Useful WordPress Add-ons for Firefox

Almost in all our blog posts we need to add external links, images, etc. to enhance the quality of our posts. The traditional method to do that is to first write the complete article and then search for the relevant data on the Internet and, when found, insert it in the blog post. But you can save a lot of time by using the Zemanta WordPress add-on. If Zemanta is installed and you are writing an article in WordPress then the add-on displays relevant articles, links and images that match with your text and you can choose which ones to insert right from the WordPress dashboard. Zemanta will also display the attribution details of the image. Obviously this is a great help in your blogging journey.

This is just one example on how add-ons can help you in blogging. If you want more of these fantastic add-ons then you have come to the right place. In this article I present you  10 useful WordPress add-ons for Firefox.

The add-ons collected below have different purposes. For example Deepest Sender, can be used to post to your WordPress website even when you are on a different page. This can be of a great help when,  you are reading an article on the Internet and you think you can build upon the idea presented there in a better way. All you have to do is to hit Ctrl+ and you will be in your WordPress dashboard and can start typing.

So scroll down and find which one suits you best.

(more…)