Coming Soon: Origin Theme by Elegant Themes

Nick Roach has done it again! Origin Premium WordPress Theme is the latest WordPress theme released by Elegant Themes and it is indeed stunning. This grid-based theme is quite impressive both visually and function-wise. You can tell that every design element has been carefully thought of and meticulously designed details have been scattered all throughout the theme if you care to spot them.

Origin is a gorgeous portfolio-styled theme but it is also engaging and fun to navigate around. It’s like going on a treasure hunt where you expect to find some hidden treasure as you explore every item on every page. The overall experience is one of delight and surprise. Customization is quick and easy. This theme comes with 5 deliciously combined preset color schemes that immediately engage your eye. These pre made color schemes are good to go right out of the box but you can also create your own color palette based on your own branding preferences.

This premium WordPress theme comes with several built in page templates like an image gallery page, an advanced search page, a portfolio page with several display options, a blog feed page, a contact page, a secure member login page, and a sitemap for those concerned about content showing up in bot crawls and searches. There are also tons of shortcodes giving you more customization and functionality options.

Origin Premium WordPress Theme uses CSS media queries and AJAX infinite scrolling features to ensure that your website will display and function beautifully and intuitively no matter the screen size and device. If you are considering an upgrade to your own site or doing a project for a client, Origin has infinite possibilities and potential for turning your site from good to great.

More Features:

  • Responsive design
  • ePanel Theme Options
  • Large collection of shortcodes
  • Premade Page Templates
  • Perpetual Updates
  • Secure and Valid Code
  • Browser Compatibility
  • Complete Localization
  • Five Unique Colors
  • Unparalleled Support

Origin 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.

Preview the Origin Theme

Useful Resourcse to Help You Understand WordPress Theme Structure

Trying to understand how WordPress works can be overwhelming with the tons of resources available online. Below is a compilation of some great resources we’ve narrowed down to help you get your feet wet as you start practicing your WordPress coding skills:

The Basic Parts of a WordPress Theme

Language consists of words that are classified into different groupings depending on their function. The English language is divided into 8 parts commonly known as: nouns, pronouns, adjectives, verbs, adverbs, prepositions, conjunctions, and interjections. These words can be used in combination with one another to express a complete thought – a sentence. Other languages may have different classifications but generally, each language is comprised of several word classifications which when combined with each other express a specific thought.

We have been slowly laying the basic foundation to understanding WordPress these past few weeks. Last week, we learned common phrases that you hear in and around the WordPress community that you might not fully understand but have become familiar with because of common use. This week we shall be a bit more technical and try to introduce a little bit more of what goes on behind a WordPress theme, its basic parts, and how it is put together to function the way we normally see it.

A WordPress theme is quite similar to a sentence. It is a combination of several parts to express a visual representation of a design thought. Let’s take a look at these basic parts (not necessarily 8) to give us an idea of what they are and how they function.

A WordPress theme is comprised of as few or as many template files as you like. These templates are PHP (PHP: Hypertext Preprocessor) source files used to generate the pages requested by visitors and are output as HTML (Hypertext Markup Language). (source: codex.wordpress.org) Each of these template files can be configured to function according to a specific design.

WordPress Themes use a combination of template files, template tags, and CSS files to generate your WordPress site’s look. If you are currently a WordPress user (self-hosted or not) you can familiarize yourself by checking out the templates listed below in the backend admin panel of your site. You can look for them under Appearance>Theme>Editor. These may all seem Greek for now and and hard to understand but the goal for now is to simply observe how the codes are written in these templates. Just make sure you don’t edit them by mistake.

Below are the basic templates that you will find among the many other templates in your WordPress theme:

style.css

CSS (Cascading Style Sheets) is a language for defining the formatting used in a Web site. This includes things like colours, background images, typefaces (fonts), margins, and indentation.

The basic principle of CSS is to allow the designer to define a style (a list of formatting details like fonts, sizes, and colours) and then apply it to one or more portions of one or more HTML pages using a selector. To every CSS style definition there are two components: the selector, which defines which tags the style will be applied to, and the attributes, which specify what the style actually does.

CSS allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.

index.php

index.php is a universal template, it is what any page (home, archive, single post, etc) will use if no other template is available for it. The index file controls what the homepage looks like.

For the visual learners out there, a very helpful visual resource you can check out is this infographic Anatomy of a WordPress Theme made by Yoast. More on this next week!

Building Blocks to WordPress Grammar

The primary reason we learn a language is to be able to communicate more effectively. When we travel to new places or visit countries we’ve never been to before we usually buy one of those 15-minute language translation mini books and stuff them into our pockets, ready to be pulled out at any opportune time. We try to familiarize ourselves with the local translation of useful terms and phrases such as “Hello”, “Good Morning”, “How much?”, “Where’s the restroom?”, and other basic words to get us by. At this point, the primary goal is to understand and be understood. Sentence structure and rules of grammar are not the need of the hour just yet. Learning what these common and necessary basic words and phrases mean is the starting point to building your vocabulary and practicing your communication skills.

Similarly, we can learn to speak the language of “WordPress” by first simplifying our goals. Our goal at the moment is to understand and be understood. The semantics and structures can come later on as we first familiarize ourselves with the language and build our basic vocabulary.

Here are some of the most common words and phrases that you will encounter often as you begin to learn how to speak “WordPress.”

Content Management System (CMS)

A Content Management System, or CMS, is software for facilitating the maintenance of content, but not design, on a web site. A blogging tool is an example of a Content Management System.

WordPress

WordPress is web software you can use to create a beautiful website or blog. It is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It has many features including a plug-in architecture and a template system.

WordPress installation

Setting up WordPress for the first time is is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. There are several installation guides on WordPress.org to guide you through the process.

Hosting Provider

A hosting provider is a company or organization which provides, usually for a fee, infrastructure for making information accessible via the web. This involves the use of a web server (including web server software such as Apache), and may involve one or more related technologies, such as FTP, PHP, MySQL, and operating system software such as Linux or Unix.

Web Server

A web server is a computer containing software for, and connected to infrastructure for, hosting, or serving, web sites written inHTML. The most common web server software on the internet is Apache, which is frequently used in conjunction with PHP, Perl, and other scripting languages.

Domain Name

A domain name is a name used for identification purposes on the Internet. In WordPress a domain name usually identifies a server where WordPress is installed. To make this work, the Internet’s domain name system (DNS) maps the domain name to a server’s IP apress. For example, the domain name example.com maps to the IP apress 192.0.43.10. Many domain names can map to the same IP apress, allowing a single server to run many websites.

cPanel

cPanel is a popular web-based administration tool that many hosting providers provide to allow users to configure their own accounts using an easy-to-use interface.

Site

In the WordPress user interface, a site can simply be the website created by WordPress, or it can be a virtual website created as part of a network by the multisite feature. A site in a network is virtual in the sense that it does not have its own directory on the server, although it has its own URL and it might have its own domain name. In WordPress code the site is the website created by WordPress. If multisite is in use, then the site is the network website and each virtual website is known as a blog.

FTP

FTP, or File Transfer Protocol, is rather predictably, a client-server protocol for transferring files. It is one way to download files, and the most common way to upload files to a server. An FTP client is a program which can download files from, or upload files to, an FTP server. You may need to use an FTP client to upload your WordPress files to your web server, particularly if you use a hosting provider.

HTML

HTML, or Hypertext Markup Language, is the W3C standard language with which all web pages are built. It is the predecessor toXHTML, but HTML is often still used to describe either one. It is often used in conjunction with CSS and/or JavaScript.

CSS

CSS, or Cascading Style Sheets, is a W3C open standards programming language for specifying how a web page is presented. It allows web site designers to create formatting and layout for a web site independently of its content.

PHP

PHP is a recursive acronym for PHP: Hypertext Preprocessor. It is a popular server-side scripting language designed specifically for integration with HTML, and is used (often in conjunction with MySQL) in Content Management Systems and other web applications. It is available on many platforms, including Windows, Unix/Linux and Mac OS X, and is open source software. WordPress is written using PHP and requires it for operation.

MySQL

MySQL is a popular open source SQL (Structured Query Language) database implementation, available for many platforms, including Windows, Unix/Linux and Mac OS X. WordPress requires a MySQL database to store all blog information, including posts, comments, metadata, and other information. WordPress also works with MySQL-compatible databases such as MariaDB and Percona Server.

XML

XML, or Extensible Markup Language, is written in Standard Generalized Markup Language (SGML) and essentially allows you to define your own markup language. XML is extremely useful in describing, sharing, and transmitting data across the Internet. Typically used in conjunction with HTML, XML defines data and HTML displays that data.

AJAX

AJAX is a technique that web pages use to have the server perform certain processing without reloading the web page. For example, when you approve a comment in a WordPress blog, WordPress uses AJAX to change the comment’s status, and you see the change without having to reload the Comments screen.

Script

Script is an automated series of instructions carried out in a specific order.

Theme

A theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. A theme modifies the way the weblog is displayed, without modifying the underlying software. Essentially, the WordPress theme system is a way to skin your weblog.

Template

In WordPress a template is a file that defines an area of the web pages generated by a theme. For example, there is typically a template for the header area at the top of the web pages, a template for the content, a template for the sidebars, and so on. The templates are like building blocks that make up the complete web page.

Frontend

The front end is what your visitors see and interact with when they come to your website, www.YourSite.com.

Backend

The back end is the area that authorized users can sign into to ap, remove and modify content on the website. This may also be referred to as “WordPress,” “admin” or “the administration area.”

Sitemap

A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion.

Perhaps these words are already familiar to you but for those who are taking this WordPress journey with us, a lot of these terms will sound Greek. As you encounter these words over and over again and see how they work in real life situations, your understanding will gradually increase. Everything, like pieces of giant jigsaw puzzle, will eventually fall into place and reveal the bigger picture. In this situation, the sum of parts is greater than the whole. More next week!

Nimble Theme by Elegant Themes

Nimble Premium WordPress Theme is a well balanced theme in a lot of aspects. The theme’s demo displays a combination of colors that is pleasing and attractive to the eyes. Its styling is bold but still effectively leaves makes clever use of white space giving the eyes a place to rest strategically. The overall design is balanced and looks beautiful on large monitors as well as on smartphone displays. It is indeed aptly called “Nimble” as it is flexible enough to adapt to various types of websites.

Nimble’s homepage is deliberately section giving it that clearly defined look. Each section has its own color scheme, effectively transitioning users from one section to the next as they scroll through the page. The top section contains a beautiful, full width slider for showcasing attention grabbing works and taglines. Clicking on a slide takes you to a page that contains details of the featured work or post. This section transitions into another section which can be used to give a bird’s eye view introduction about important information such as the company, mission, vision, product/service summaries or other types of information. This is further enhanced by call to action buttons at the bottom of the boxes that take you to pages where you find more exhaustive descriptions. There is also a section that can be used for special quotes, taglines or announcements. The next sections can be configured to contain recent news and updates, recent blog posts, recent portfolio additions, and even a price table to complete the whole layout. All these customizations can be easily handled via the ePanel Theme Options feature included in all Elegant Themes WordPress themes.

Nimble’s responsive design is quick and impressive. Images and content quickly resize to the width of your browser or the screen size of your handheld device. This means that your visitors can expect a pleasant browsing experience all the time.

More Features:

  • Responsive design
  • ePanel Theme Options
  • Large collection of shortcodes
  • Premade Page Templates
  • Perpetual Updates
  • Secure and Valid Code
  • Browser Compatibility
  • Complete Localization
  • Five Unique Colors
  • Unparalleled Support

Nimble 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.

Nimble Theme: $39 | Demo & Download

Learning the ABC’s of WordPress Grammar

“Code is poetry” – the WordPress mantra that’s been read by probably every WordPress user on the planet. If you haven’t then maybe you’re on a different planet or probably using another Content Management System apart from WordPress.

It is kinda romantic if you really think about it. The challenge is, not everyone understands the code. We all know Shakespeare wrote great poetry, as did Edgar Allan Poe, Elizabeth Browning, Alfred Tennyson and so many other great poets and authors. But how many who belong to this current generation truly understand what the sonnets and the verses mean? How many can dissect and decode the true meaning behind the words and symbolisms these authors used? We can all give our opinions and interpretations about these works of literary art but unless we “decode” and study the context behind those words that have been so beautifully strung together, in accordance with generally accepted standards, we might create a mental image quite different from the author’s intent. These standards need to be the foundation from which these “works of art” can be evaluated and interpreted.

How does all that apply to our understanding of WordPress? A WordPress theme is actually a unique “work of art.” It is a combination of both the literary and the visual. It is quite easy to appreciate the visual product that results from the string of commands and codes that have been strung together by a WordPress author or designer. But the true beauty behind this visual delight is the code or language that brings it to life. Every line of code is a brush stroke that layers on top of each other to create the functional art we know as WordPress themes. Perhaps that is why some WordPress purists are so passionate about what they do. They are in fact modern-day technological artists who use code as their medium to express their art. Hence, to them, code is sacred. Code is poetry.

In order for us to understand and appreciate code we need to learn the language. We need to study its vocabulary and apply grammar rules that will help us interpret it. For many of us we still need to learn our ABC’s. Many of us are scared to touch code because we fear making mistakes. How many times have we messed up our websites because we took out a portion of a code without fully understanding why it was there in the first place?

The secret to learning a language fast is by immersion. One needs to be immersed in an environment where one is forced to communicate using whatever language is available. We will attempt to do that in the next few weeks. Our goal is to learn the language of WordPress and make it easily understood even by the most novice of beginners. Hopefully, we can help you, our readers, achieve a level of fluency or perhaps spur you on to start creating your own WordPress themes, your own works of art. If that sounds exciting to you, then make the journey yours as well. Stay tuned!

WordPress Theme Marketplaces 2013: Trends

A good way to spot emerging trends in the WordPress themes market would be to look at the behaviour of theme marketplaces like Themeforest, Mojo Themes and other boutique WordPress marketplaces. Here are some of our observations of what is currently ongoing and our take on what is to be:

Themeforest – The WordPress Marketplace Giant

With about 2500 themes in its inventory, Themeforest is probably the largest theme marketplace there is. Collis Ta’eed, founder of Envato which runs Themeforest, observed that the main trends on theme sales for 2012 have been: responsive, e-commerce and app themes (themes that have app like functionalities).

These trends are indeed reflective of trends observed by developers in the industry. With mobile platforms taking their place as the new mainstream it is just fitting to find responsive themes becoming more of a necessity rather than a trend.

The introduction of Jigoshop and WooCommerce plugins are making people realize the viability of turning WordPress themes into robust e-commerce solutions.

Specialized app themes will remain and will continue to flourish because of the specific niches they service. These niche WordPress app themes will continue to evolve as the themes market matures.

Mojo-themes and other WordPress Boutique shops

A look at the top 10 sellers on Mojo Themes similarly shows 4/10 themes are already responsive indicating that the trend towards mobile friendly themes is indeed a phenomenon. Their top selling theme is an e-commerce theme validating the emergence of WordPress as an e-commerce solution. The rest of the themes are multi-purpose or portfolio themes which target professionals, small or medium scale businesses and corporations.

Boutique theme shops and clubs such as StudioPress, Thematic, Press75, iThemes, WooThemes, Templatic and many others continue to thrive with their own loyal following.

Outlook for 2013

Major and minor WordPress theme marketplace vendors are experiencing the trends towards responsive themes and e-commerce. The question is how will these trends influence these marketplaces as they prepare for 2013 and beyond?

It is our opinion that responsive themes will continue to be in high demand as the transition to mobile platforms is still ongoing. About 6.1B mobile subscriptions are still yet to convert to internet ready smartphone subscriptions. The recent introduction of WooCommerce and Jigoshop indicates that the market is also only in the early stages of adaptation and mainstreaming of this technology. 2013 will be a year for continued acceptance as more sites exploit the democratization of e-commerce with these two plugins. Perhaps more eCommerce plugins will be introduced into the market and WordPress users will have more options and solutions to choose from.With a big year ahead for responsive themes and e-commerce, developers now have to bid for the best products to serve these markets as well as look at what lies ahead in 2014.

As ThemeForest continues its commitment to evolve and improve its review standards on what WordPress themes are made available in the marketplace we can expect higher quality WordPress themes that will satisfy even the strictest Code gurus out there. The renewed commitment to become more involved in the WordPress community is also a welcome move that will surely benefit us all.

12 Useful Twitter Hacks and Snippets For WordPress

Everybody loves twittering these days. Don’t believe me? The statistics should make you a believer. As of 2012, Twitter had 500 million active users! The 140 character post social media platform is ruling the world, second only to Facebook. Considering the huge number of Twitter users, people are using Twitter options like plugins and add-ons on more and more websites.

These plugins and add-ons can have varied uses and applications. For example, some commenting systems like Discus allow you to post a comment with your Twitter picture being displayed in the comment as your Avatar. This helps you not to upload your display picture again and again whenever you want to comment and hence saves a lot of time. See entry #3 below for more on this.

Or maybe you want your blog posts’ links to become tiny so that your readers may share them on Twitter. As we all know…Twitter has a 140 character limit. Under such a constraint it is not a wise practice to share large URLs on Twitter as you will want some room to type out some text relevant to the link in your tweets to tell your followers about what you are sharing. Option #7 below enables you to achieve this.

There are 10 other options below that combine the technology of WordPress and Twitter to produce great results. Check them out by scrolling down.

(more…)

HTML5 WordPress Themes 2013: Trends

The evolution of HTML from the time it was introduced years ago to the HTML5 we know today is a technical geek lover’s journey. This article is not about that but just in case you are interested to know how it all came to be here are some interesting resources for you to check out. For those who want a more comprehensive history of HTML5, you can read all about it here – Dive into HTML5 by Mark Pilgrim. For those who just want a quick overview, check out this cool infographic The History of HTML5 published by Mashable. If you are really want to get into the technical stuff, you can go straight to the source right here – W3C.

What’s so Cool About HTML5

According to PCMag:

HTML5 was designed to provide a comprehensive application development platform for Web pages that eliminates the need to install third-party browser plug-ins such as Java and Flash. HTML5 provides support for 2D graphics, document editing, drag and drop, browser history management, audio and video playback and local file storage.

Simply put, HTML5 is composed of a set of rules that tell computers how to interpret code to display websites. It’s the 5th version of a set of instructions, governed by specific rules, that tells your browser how to execute these commands to display a specific design. It is the language of the web. HTML5 includes the following updates:

HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:

  • Media elements (video and audio) have APIs for controlling playback, syncronising multiple media elements, and timed text tracks (e.g. subtitles).
  • An API for form constraint validation (e.g. the setCustomValidity() method).
  • An API for commands that the user can invoke (used together with the command element among others).
  • An API that enables offline Web applications, with an application cache.
  • An API that allows a Web application to register itself for certain protocols or media types, using registerProtocolHandler() and registerContentHandler().
  • Editing API in combination with a new global contenteditable attribute.
  • Drag and drop API in combination with a draggable attribute.
  • An API that exposes the components of the document’s URL and allows scripts to navigate, redirect and reload (the Location interface).
  • An API that exposes the session history and allows scripts to update the document’s URL without actually navigating, so that applications don’t need to abuse the fragment component for “Ajax-style” navigation (the History interface).
  • An API for base64 conversion (atob() and btoa() methods).
  • An API to schedule timer-based callbacks (setTimeout() and setInterval()).
  • An API to prompt the user (alert(), confirm(), prompt(), showModalDialog()).
  • An API for printing the document (print()).
  • An API for handling search providers (AddSearchProvider() and IsSearchProviderInstalled()).
  • The Window object has been defined.

WHATWG HTML has further APIs that are not in HTML5 but are separate specifications at the W3C:

  • An API for microdata.
  • An API for immediate-mode bitmap graphics (the 2d context for the canvas element).
  • An API for cross-document messaging and channel messaging (postMessage() and MessageChannel).
  • An API for runnings scripts in the background (Worker and SharedWorker).
  • An API for client-side storage (localStorage and sessionStorage).
  • An API for bidirectional client-server communication (WebSocket).
  • An API for server-to-client data push (EventSource).

source: W3C

How Does this Affect WordPress Developers?

The HTML5 standard features make it easier to develop faster, interactive, and more semantically correct web pages, eliminating the need for functions that require JavaScript and Flash. WordPress designers, authors, and developers can take advantage of HTML5 enhancements on these 6 key elements: video, application cache, canvas for images, geolocation, worker threads, and notification. No doubt, HTML5 has bridged the divide between desktop and mobile and so far it is the best way to create mobile-friendly websites on a variety of devices.

What Trends do We Expect See in 2013

  • The rise of the baked, boilerplate, bare bones or blank HTML5 Themes
  • HTML5 will be supported by all new WordPress themes
  • More single dynamic pages websites with animation features
  • WordPress themes running on HTML5 compatible smart phones
  • Responsive design
  • Simple and clean themes (no to options-overload, yes to feature-specific themes)

HTML5 is still a work-in-progress and its adoption into more and more WordPress themes will continue as more and more users turn towards the mobile web. We can continue to expect more power, more speed, and more capabilities from it in the future as this technology continues to mature.