You Don’t Need Any Coding Skills When Working With WordPress

“No code required, works right out of the box.”

I’ve been working with WordPress for for a few years now, and I’ve heard or read that phrase many times when chatting with folks, or reading various articles, forum posts, or promotional materials for plugins and themes. “No code required” is a rather frequent buzz-phrase.

And it is true; you don’t need any coding skills. Whether you’re running a simple blog, a small business site, or even a network of sites, you can get by just fine. The array of built-in features and customization options that come with most plugins and themes nowadays enable you to create some pretty awesome stuff.

So, what’s the catch? Well, there is no catch, really. There is, however, a box. You know the one, it’s in the second half of the buzz-phrase above.

What theme designers and plugin developers might not tell you is that box is often required for their stuff to work the way they intended it to.

Chucking the box

Although working with WordPress to build a site or network with zero coding skills is entirely feasible, you are limited by the features and options built into the theme and plugins you use. But what happens when you need or want some functionality that your plugins don’t provide? Or stuff doesn’t look so hot with your theme? Or you’d prefer some theme feature show up somewhere else? Or… ?

Well, if you have zero coding skills, you basically have 3 options:

1. Live with things the way they are, and keep on dreaming.
   • This option is easy and requires no effort. It does tend to generate a pervasive state of disappointment and frustration though.
2. Hire a/some developer(s) to create the awesome stuff you want ($$$).
   • Depending on the extent of customization you want done, this can quickly bring your PayPal balance to the same level as your coding skills: zero.
3. Learn how to create the stuff you want yourself.
   • Effort required: variable. Return on investment: nirvana. Well, maybe not nirvana, but satisfaction and pride in a job well-done are likely (as well as a website that works the way you want it to).

So what do you need to learn so you can customize stuff the way you want it?

Minimum coding skills recommended to work with WordPress

When you start getting into customizing things around your WordPress site, you’ll quickly discover that there are 3 basic types of code that come into play rather quickly.

• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheets)
• PHP (Hypertext Pre-Processor)

There are other code languages used throughout pretty much every WordPress theme and plugin (JavaScript, jQuery, etc.) but for the great majority of everyday customizations, you really don’t need to get into those. If you get a handle on the basics, you’ll be amazed at the awesome things you can accomplish on your site or blog.

At the end of this article, you’ll find links to some excellent tutorial sites. But for now, to help get you started on your own learning curve, let’s take a quick look at each of those 3 code languages, and see what they’re used for. While I would consider the first 2 essential learning, the 3rd (PHP) is optional. Keep reading to find out why.

HTML (HyperText Markup Language)

HTML is the easiest coding language to learn (oh, happy days) and, as you are just starting out as a newbie-coder, you can also consider it the most important one. Why? Because that’s the language that actually displays the content on web pages. To state it simply: HTML is just a collection of identifying tags used to wrap content in containers so it displays on-screen in a particular manner.

You’re probably already familiar with HTML if you’ve ever taken a look at the HTML view in your post editor. Go ahead and look at one of your posts in HTML. Notice all the funky brackets before and after your content? That’s really all there is to it.

HTML tells the browser what is being displayed on-screen. For example, to tell the browser to display content in paragraphs, each paragraph must be preceded by an opening <p> tag, and followed by a closing </p> tag. The backslash in the closing tag is what tells the browser to “close this”. Here’s a simplified illustration of what a typical WordPress page layout might look like, with the basic HTML needed to produce it:

OK, that’s fine. But the HTML is all in a column, yet the sidebar is off to the right. How do you do that? Ah, that’s where your 2nd language comes into play: CSS. (Yup, you’re gonna be multilingual!)

CSS (Cascading Style Sheets)

We’ve seen that HTML is used to tell the browser what type of content to display on the screen. CSS is the language used to tell the browser how to display that content.

As an example, let’s take a look at the sidebar from the illustration above. In the HTML, the code for the sidebar is written beneath the content. Yet in the actual layout that displays on the screen, it shows up to the right of the content. Here’s how that happens:


#wrapper { float:left; margin:auto; width:960px; }
#content { float:left; margin:20px; width:600px; }
#sidebar { float:left; margin:20px; width:280px; }


Here’s a quick run-down of the 3 style rules above:

• Float: is a style rule that tells the browser how to align an element with respect to its parent container. So float:left; tells the browser to align the HTML element with the left side of its parent. If 2 or more elements within the same container are floated, they will line up side-by-side if their dimensions allow it.
• Margin: is simply the thickness of the blank space that surrounds the element. Notice the margin:auto; applied to the wrapper container; auto is an especially useful value for our main container as it effectively centers the wrapper container on screen no matter the size of the browser window.
• Width: is pretty self-explanatory.

To get the sidebar on the right-hand side of the content, the sum of the widths and margins of both content and sidebar must be less than or equal to the width of the wrapper.

• Content: 20px + 600px + 20px = 640px
• Sidebar: 20px + 280px + 20px = 320px
• Wrapper: 960px… Bingo!

So, if you’re going to customize anything at all in the look and feel of your WordPress site, you’ll need to know which HTML container elements to target with your custom CSS style rules. For more examples, see this post. See also Tip #1 in this post to learn how to find which HTML elements you need to target.

PHP (HyperText Pre-Processor)

I know, it should be HPP instead of PHP, but here’s why it’s not. Now that that’s out of the way, let’s see why you might want to dabble a bit in PHP.

HTML & CSS are necessary to tell the browser what type of content to display, and how to display it. PHP works completely behind the scenes to dynamically fetch that content according to conditions and variables that are defined in functions.

PHP can be used to fetch content from a variety of sources, including other websites, RSS feeds, etc. But, when working with WordPress, it’s main use is in querying your database. Functions can be written to fetch and display different information depending on virtually any conditions you can think of.

So, contrary to the HTML & CSS sections above, I’m not going to waste anybody’s time by giving examples of actual code here. Instead, I’m going to stop writing, and give you those links I promised earlier so you can move forward. :)

The sources listed below are the best and simplest I know of (and I visit them regularly when I’m puzzling something out). If you know of other resources that may be useful for folks just starting to hone their coding skills, please leave a comment below with a link. Thanks for reading!

Some great places to learn HTML, CSS and PHP

• HTML Dog By far, one of the best HTML & CSS tutorial sites around.
• HTML.net There to help you learn HTML, CSS, PHP & JS in plain English… and 10 other languages too!
• w3schools They have a neat “Try it yourself” editor that allows you to experiment with stuff as you’re learning.

Photo credit: Flickr.com

Tags:

• code