Site icon Hip-Hop Website Design and Development

WordPress Development for Beginners: Getting Started

Pixeldust WordPress Developer

Interested in learning PHP and building your own themes and plugins for WordPress? Or just being able to code your own killer customizations for your websites?

Learning WordPress development might seem like a daunting thing to do but it all comes down to getting started. So we’ve put together this free series to help you start the New Year right.

Over five weeks, you’ll learn PHP and start coding your own themes and plugins from scratch.

This is the first post in our five-part series for beginners, teaching you the fundamental concepts of WordPress development so you can take the leap from tinkerer to developer.

Note: For this series, it’s important that you already have a thorough understanding of HTML and CSS as both of these languages are essential building blocks when working with WordPress.

Let’s get started.

How WordPress Works

To understand what and how we can develop for WordPress, we’ll start by taking a quick look at how WordPress works.

There are three major components: the core, themes, and plugins.

The core code contains all the default functionality that makes up the WordPress content management system. This includes everything from the admin backend to functions like scheduling posts, password strength checking, allowing the creation of users, and so on.

While the core is responsible for the backend of a website and how it operates, themes are responsible for the front-end and how websites look and feel. We use the WordPress admin to create posts, pages, and other site content, but exactly how our posts and pages are displayed to visitors is up to the theme. This gives you considerable power over your website. You might want to install and activate pre-built themes or break out of the box completely and go your own way with custom designs.

The simplest way to describe plugins is that they provide additional functionality to WordPress. To make this happen, a plugin may modify the backend and/or the front-end of a website. A plugin that adds a Tweet button for Twitter is a good example. It would probably create a new settings page in the backend admin menu where you could set up some default options for a user’s tweet and it would also add itself to the front-end of a website, most likely displaying under a post.

Areas of Development

As far as WordPress development goes, you can develop any of the three major components above in addition to standalone applications with the help of the new REST API, but more on that in a moment.

Regardless of what it is you want to do with WordPress, I would recommend following a set path in your studies. The following list will help you familiarize yourself with the systems you need to know before learning more about your area of choice:

  1. Themes
  2. Plugins
  3. REST API
  4. Core

Themes

Learning how themes work and how to develop them will allow you to create websites and craft single-page sites, content-heavy dynamic websites, and everything between. It will also allow you to get better/more client work (if that’s what you’re interested in pursuing) or even go into the theme sale business.

There are many successful theme authors on marketplaces like Themeforest and Mojo Marketplace, among others.

At the time of writing this, the most popular theme on Themeforest sold 1,377 last week – that’s more than $81,000 in just one week! That’s a lot of money if you can develop the perfect theme.

While not all theme developers make quite that much money, and you may not become a multi-millionaire overnight building themes, you can still make a nice living from themes if you do things right.

If you want to see some great examples of themes, take a look at the marketplaces I mentioned above, or check out the WordPress Theme Directory where everything is free. Many first-time theme developers also release their work to the directory.

Plugins

In a way, plugins are the lifeblood of WordPress, transforming it into everything from a forum to a social network, eCommerce platforms, and much more with the push of a button. Plugins give you total control over all aspects of the WordPress system, allowing you to modify anything you want. This can be a huge help in making WordPress white label for clients, adding that one little function you always need; making WordPress your own.

Plugin marketplaces also exist and are generally owned by some of the same companies that also run theme marketplaces. CodeCanyon is by far the largest with more than 4,000 plugins available to purchase. Sales tend to be lower than with themes, but if you find the right niche it can still be very profitable.

WordPress also has a free Plugin Directory with more than 40,000 plugins. It’s a great source of tools, inspiration, and examples of great code (and also bad code, regrettably).

REST API

Using the REST API will come a bit later in your career when you have mastered themes and plugin development, though theoretically, you may be able to utilize it if you know another language pretty well, like Java or Ruby.

The REST API is relatively new and allows you to create true applications based on WordPress. This includes iPhone and Android apps and all sorts of crazy things like TV apps even, if you know some other programming languages.

The best way to explain this feature is to compare it to something like Twitter or Instagram. No doubt you’ve seen someone’s Twitter feed displayed on their website. To add this feature to your own site, you don’t need to know how Twitter’s core code works, all you need is a bit of code that says: please retrieve my latest five tweets. Twitter handles the actual retrieval, spitting back the data of the five tweets you asked for. You can then use HTML and CSS to display that data.

This is exactly what the REST API does for WordPress. You can connect to any website and ask it for your latest five posts. But you can do a lot more than that: you can delete users, create users, edit categories, and more (which you need to authenticate yourself, of course). This means you can use WordPress as a repository of information and build the front-end and/or the backend using a different system altogether.

Core

WordPress is developed by a community of thousands of volunteers around the world. A total of 471 people worked on WordPress 4.4, and many more people work on other aspects of WordPress, from translations and mobile applications to accessibility and support.

In fact, you could get involved right now. While you need to have quite a bit of experience to contribute code to WordPress core, you could get started identifying bugs, verifying them, and submitting ideas at any time using the WordPress Trac, the place to follow along with the development of WordPress core code.

If you’ve found a bug you can actually attach the code that gets rid of it. After a fair amount of review and vetting, your code will be used if everything checks out. This is the best way to get involved in contributing to core development.

ThemeForest is by far the most popular WordPress theme marketplace with more than 6000 themes for sale.

WordPress Development: What You Need to Learn

There is a well-defined set of tools you need to be familiar with to get started with WordPress development and WordPress web design.

For any good developer, though, the process of learning never ends. I’ll lay out the starter bundle for you right here and I’ll also cover some of the more advanced tools you may bump into eventually as you learn more.

The absolute minimum you’ll need to be comfortable with is HTML, CSS, and PHP. In addition to these languages, you’ll eventually want to learn JavaScript and MySQL at some point. When you have a good grasp of these languages, you can then move onto things like LESS/SASS, Coffeescript, XML, JSON, and so on. None of these languages are essential to WordPress development, but knowing them will broaden your horizons and/or make your life as a developer so much easier.

HTML and CSS

The first two languages you should learn are HTML and CSS. No matter what code you write, no matter what language you use, it all eventually boils down to HTML when sending web pages to a user, and very likely some CSS styled that page.

HTML is responsible for giving websites structure. At a basic level, this means that you’ll be deciding what text should be a heading, what should be a list, what goes in the sidebar, and what’s in the header and footer. On a deeper level, you’re actually making important SEO and optimization decisions. Don’t worry about that bit for now, though, as getting to grips with the syntax is most important.

CSS is used for applying styles to your HTML structure. You’ll define the color of text, links, the space between paragraphs, image alignment, border colors, float properties, border thickness and other elements using CSS code. CSS is extremely easy to learn but very difficult to master.

Web developer site W3Schools provides fantastic tutorials on how to use HTML and CSS.

PHP

PHP is an immensely popular server-side scripting language and, according to web technology survey service W3Techs, is used in 81.6% of all websites where the language is known. PHP is the language WordPress (and most other content management systems) are built on and, as such, a thorough knowledge of PHP is essential for WordPress development.

Just by knowing PHP, you’ll gain more than just the knowledge to code for WordPress. Learning any server-side language will give you insight into how programming works, and it will bestow a special kind of logic, which you can use to solve all sorts of problems on and offline.

A server-side language differs from a client-side language – like HTML – in that it is processed on the server first. In HTML, you could write code for Good Morning and that HTML would then be sent to the browser as-is where your visitors would see “Good Morning” displayed.

In a server-side language, you could write code for something like good [time_of_day]. and before that command is sent to the user, the server would process it and figure out what to put in place of [time_of_day]. Depending on what time of day you access the site, you may see “Good day” or “Good evening”. Note that the data your browser receives is still in plain old HTML but it has been processed on the server beforehand. Also, note that the code above is not actual PHP code, it’s just an example to show you the logic.

W3Schools also provides a fantastic PHP tutorial. We’ll look at the basics of PHP programming in the second tutorial in this series, but it’s worth brushing up on your skills to become proficient.

As with all programming languages, it’s practice that will make things sink in and help you get better. You could learn almost all PHP within a couple of days but you would still have no idea what you’re doing – you need to try things out, mess up, not understand what’s going on. Overall, stick with it! As they say, practice makes perfect.

JavaScript

The role of JavaScript on the web is ever-increasing, especially with JavaScript-based tools popping up, like Node and Angular.

JavaScript is usually used to add dynamic functionality to websites and for asynchronous loading.

Let me give you an example of both.

If you would like a form to be completely hidden but fade in inside a lightbox when the user clicks on a button, you can use JavaScript since it can handle the animation and perhaps other functions, like checking the form is filled out correctly before being sent along.

Asynchronous loading is done via a mechanism called AJAX. AJAX can be used to retrieve information from the server and then display it without reloading the page. A good example is endless scrolling where the first 10 posts are loaded and when you get close to the bottom of the page the next 10 posts are retrieved and appended to the current set.

In November, Automattic launched Calypso, a desktop app that allows users to manage WordPress.com and Jetpack-enabled websites. Written purely in JavaScript, and leveraging libraries like Node and React, Calypso signals a potential shift away from WordPress’ reliance on PHP. As such, WordPress co-founder has encouraged developers to “Learn JavaScript, deeply.”

A good place to start learning JavaScript is, again, W3Schools. We won’t be exploring Javascript in this beginner series, but it’s worth learning as knowing this language will become essential for WordPress developers in the coming years.

Many developers first learn JavaScript through the extremely popular jQuery framework. It is used extensively in WordPress and in millions of projects on the web. While this is just fine, keep in mind that JavaScript is more than just jQuery, and learning JavaScript on its own is a good idea as well.

MySQL

MySQL is a language used to access and work with data in a database. WordPress uses it heavily to retrieve all its data, but as developers, you won’t need it too much because WordPress has its own set of helper functions. In some special cases, you may need to write your own database query or you may want to optimize something for your own site, so having a basic knowledge of MySQL is helpful.

Working with databases is pretty straightforward. A table in a database is very similar to a Microsoft Excel spreadsheet. Each column has a heading and data is stored in rows. MySQL is used to add, delete, modify, and retrieve data. You might want to write a MySQL query that returns all posts that have the word “awesome” in them and have more than eight comments. You may also want to find all users who are named “Daniel.” You could also use MySQL to calculate the sum of all your advertising views or find the most popular advertisement in your network, for example.

Again, writing raw MySQL code in WordPress is rare, but it does happen, and understanding how the language works will help you write better code in general. Head on over to W3Schools for their SQL tutorial.

W3Schools is an excellent free resources for learning HTML, CSS and MySQL.

Advanced Tools

Once you’re familiar with at least the three essential languages – HTML, CSS, and PHP – you can begin exploring various helper tools. One of the first things people tend to learn is LESS and/or SASS. Both are supersets of CSS, which means that all valid CSS code is valid LESS and SASS code. What both languages add is the ability to use variables, functions, and other constructs in CSS, which is not possible by default.

Build tools are something you will want to explore at some point as well. The best ones are Gulp and Grunt. These can monitor files for changes and run various tasks when the requirements are met. For example, any time you change a SASS file you could automatically compile it into CSS and save it to a specific file. Images could be optimized, files concatenated, external packages downloaded and all sorts of other handy tasks can be made to happen with these tools.

The command line, or terminal, is something you should also take a look at. Yes, using the command line can look scary but it really isn’t – just typing in a few commands can save you so much time. A simple script and a tool named WP-CLI can install WordPress in a few seconds, including the installation of themes, plugins, and test content whereas doing it manually takes much longer and involves much more effort.

Version control is another one of those extremely useful tools you don’t know you need until you try it. It was originally devised for working on the same code in teams but can be used as a solution for managing projects, bugs, and backing things up at the same time. SVN and Git are the most popular contenders. Git wins this round with me due to its slightly better workflow and Github, which provides a web-based Git repository hosting service.

WordPress is a Gateway Drug

The great thing about WordPress is that it can be a gateway to learning other web development skills and languages.

I’ve personally had this experience, first learning object-oriented PHP, then getting into Laravel, outlying areas like build tools, LESS/SASS, command-line tools, and such. I’ve also ventured into native app territory with C# and other languages.

Once you get how everything works, you learn more and more as you create new and bigger projects and everything becomes easier. After object-oriented PHP, learning C# was not a huge effort because your brain becomes accustomed to the logic of it. It’s similar to learning to play the ukulele after the guitar or learning to drive a truck once you’ve practiced driving in a car. There are lots of differences, but once you have the basics pinned down, moving forward isn’t such a big leap.

Further Reading and Study

Now that you know what’s needed to get started in WordPress development, you may be feeling overwhelmed, but don’t worry, that’s how everyone feels at this point!

I can’t stress enough how important it is not to be discouraged. All coders have to start somewhere. Most are terrible at coding when they start out, struggle with understanding concepts, and get frustrated. But it’s the ones who power through and don’t give up and are always pushing themselves to learn who succeed – in this determination that separates the good coders from the bad.

Missed a Tutorial in our Series?

You can catch up on all five WordPress Development for Beginners posts here:

Changes to WordPress’ core code is tracked at Make WordPress Core.

In the meantime, here’s what you need to do before starting WordPress Development for Beginners: Learning PHP: