Categories
Ten reasons to build wordpress themes from scratch

10 Reasons to Build WordPress Themes from Scratch

Have you every wondered why you should build WordPress themes from scratch? Well, I have compiled 10 reasons why I build WordPress themes from scratch as opposed to hacking another theme. This isn’t going to be one of those articles that bashes the use of professional themes or child theming. Most people start out using free or paid themes to develop with, because it helps get us used to how WordPress themes work and it can speed up the dev process. I wouldn’t be where I am today if I hadn’t hacked apart a theme or two.

When Should You Buy Or Hack A Theme?

There are times that you should purchase a theme or grab a free one if it suites your needs. If you’re a business owner and you just started the business, there usually isn’t a budget for a website. If you happen to be apart of a non-profit organization that has just started or all of it’s funding is used elsewhere, grab a $40 theme and add your content. There are some really great WordPress theme developers out there creating beautifully designed and highly functional templates.

When Should You Build WordPress Themes From Scratch?

If you are a developer and you have been hacking themes for a while, you should start building themes from scratch. It is a great learning experience and it will take your skill level way up. If you are a business owner and have a website already, I would recommend looking into a developer that can build you a custom solution. If your website is looking old, isn’t working for you rather against you, you aren’t being found on search engines, or all of the above you should upgrade. If you fit into any of these examples, this article is for you!

The Wordpress Template Hierarchy

WordPress Template Hierarchy For Developers

There are many articles on the web that explain the template hierarchy within WordPress but I wanted to write one about the WordPress Template Hierarchy for developers. Something that drastically opened my eyes to the power the WordPress Core developers have given us. The purpose of a template hierarchy is to not only allow you to develop more quickly and easily but to have backup support in case something happens to one or two of your files. It allows within your development to cover all of your bases or choose to only code the basic necessities. Ultimately, it is the skeleton of your theme and we need to know how to manipulate it and put all the bones in the right place.

Learn The Basics First

The first thing I would recommend doing if you haven’t already is go check out the WordPress template hierarchy on the codex. The explanation they give is really good actually. For some, especially beginners, it may look like lorum ipsum in some spots. After you read through that article, this article will give you a little more in depth information along with things I have experience in my daily theme development.

Google App called Word Lens

New Google Word Lens App

Google has always been a powerhouse in the acquisition of new and upcoming technology. So when you see them buy something from another company you know that it is gonna be something special. To give them an edge up from their already wonderful Google Translator, they have purchased Word Lens from a company called Quest Visual. This new app is a visual language translator that works through the built-in camera on your phone or device.

How Does It Work?

Once Google got their hands on it they turned it over to the public for free! That’s right folks, go download the new Google Word Lens App from the Android Play Store or the Apple App Store. You can currently use the trial version of it for free. When you first download it you will receive a few language packs for free. Then when the trial period is over the app will still be free to download but then you pay for the language packs you want.

The app is very easy to use and so far has only had a few inaccuracies. Simply open the app, point your camera at the language you need to translate, preferably something like a sign or something with larger letters. I found that it doesn’t work well with long bodies of text and small font size. The screen literally translates the language visually and replaces the language on the sign into the language you have requested. No joke! I had to download it and try it myself.

Watch the YouTube video from Quest Visual and see the new Google Word Lens App in action.

Flat butts never looked so good

Flat Butts Never Looked So Good

Love it or hate it…flat design is in! In the mainstream media bubble butts are the new craze. Well a New York art director named Peter Jostrand decided to shake things up a bit and create Flat Butts. What is Flat Butts you ask? Go check it out for yourself…it is a must see. Picture this…minimalistic art combined with animal butts! Yeah I said animal butts!

Parallax for WordPress developers

Use Parallax in WordPress

Have you ever wondered how to use Parallax in WordPress? I am going to give you the skinny on how to implement Parallax into any of your future theme developments. After searching all over the internet, I never found a single article that told me the whole process. So I thought, “Wayne your readers need this!” And now here it is.

The Solution

Earlier this week I wrote an article about how to link scripts and stylesheets correctly in WordPress. If you feel like you don’t know how to do this go ahead and read that article because we are going to use that knowledge here in this article.

Linking correctly in WordPress

Link Scripts and Stylesheets Correctly in WordPress

If you are a web developer and build websites using HTML and CSS, you already know how to attach css and js files in the head of your webpage. Well there is a completely different way to link scripts and stylesheets correctly in WordPress. This is what we are going to solve today!

The Solution

Hopefully you already have a good grasp on the page template hierarchy in WordPress, but if you don’t you can learn about it in the WordPress Codex. We need to access the functions.php file because we need to add some code into it to “enqueue” or call the styles and scripts. We will not be adding the below code into the head of our webpage:

WordPress CSS3 Hover Transitions

CSS3 Hover Transitions

In my last two articles I focused on How to use JQuery with WordPress and how to Use the Dollar Sign in WordPress instead of jQuery. These articles gave you jQuery techniques to use with WordPress. Today I am going to show you a super simple, super helpful tool to accomplish some really fancy css3 hover transitions in the websites you build. You won’t believe how simple it is to implement and use!

How To Use CSS3 Hover Transitions

Front-end developer Ian Lunn created a simple css library called hover.css. This file, when either linked to your site in the header or copied into your existing style sheet, automatically gives you the ability to add over 30 different transitions to use on elements in your websites. Once you have the css3 hover transitions linked, choose whichever animation you like best and remember it’s name. Next you add that class name to the element you want to apply it to. In addition, you must always apply the standard “button” class to make the transitions work correctly. Here is an example of the code and how it looks:

Dollar Sign JQuery

Use the Dollar Sign in WordPress instead of jQuery

In my last post we discussed how to harness the power of JQuery in WordPress. What if you want to use the dollar sign in WordPress instead of jQuery? In this article I would like to show you how to properly mark up your JQuery, when to tell your script to run, and a quick tip on how to make the $() work instead of having to write out jQuery() in complicated functions.

The code example below shows you how to correctly start and end any scripts that you write. You begin with <script> and end with </script> just like a div. Then it is good practice to add any JQuery calls inside of an anonymous function as seen below:

Using JQuery in WordPress

How to use JQuery with WordPress

JQuery is a very popular Javascript library that provides simple yet powerful tools to simplify client-side scripting of HTML. It can be an asset to know how to use JQuery with WordPress. For those developers who know it through and through, it can transform a website from being good to being great. Because we all know that a website that is interactive is a website that people stay on longer and re-visit frequently. I will admit that I’m no where near a JQuery master but I have learned enough to use it’s capabilities within WordPress.

Why Would Anyone Need To Know How To Use JQuery With WordPress

Anyone who has every worked on a pre-made theme or who is building a custom theme from scratch knows that there are some things in WordPress that are hard to get to. Whether it be plugins, widgets, or you simply can’t find where the developer put that piece of code. JQuery can help with this! Let’s give you an example. Recently while working on an e-commerce website, I stumbled upon a piece of code that for the life of me I couldn’t find. I really wanted to add the Responsive Columns classes from Twitter Bootstrap onto this specific div. So I leveraged the search and destroy power of JQuery and accomplished my goal.

The Solution

Ok…great for me…now how did I do it so you can do the same thing in your themes. I promise you that the more familiar you get with this wonderful tool the more reasons you are going to find to use it!