Tuesday, January 20, 2015

Ultimate 12-Month Guide To Learning WordPress (Plus Resources)

If you want to learn something new in 2015, why not make it WordPress? It powers a huge chunk of the web, you’ll understand your own website better, you’ll be able to communicate with developers better, and you can make some money helping out others. In addition, programming gives you insight into a certain way of thinking which can be helpful in other walks of life. The trick is to know what you need to learn and to go at it consistently – discipline is required.


learn wordpress 2015


This is a 12-month guide on what to focus on, one topic per month, one month at a time. Bookmark this guide and visit it regularly throughout the year, and by the end of the year, you might be able to hold your ground when it comes to WordPress.


Recommended Reading: Top 10 websites to learn coding online


Learn To Use WordPress Properly (Jan)



Whatever level you use WordPress on, I”m betting there are many things you don”t know. In January you should focus on the admin side of things, no coding just yet.


Make sure to inspect and try out all the functions you see. Try all the links, look at screen options, Help tabs, try to schedule a post, figure out what a sticky post is, create a sidebar and some widgets, assemble a menu, look at all the available settings and so on.


The idea is to become proficient at using WordPress so you can read and work through tutorials faster. Many people skip this step and it causes unnecessary confusion during the learning process. While programming you don”t want to be distracted by what the WordPress importer is, you’ll have plenty to do without that burden.


Resources That Can Help


The list below is by no means exhaustive but I recommend that you go through each section in the admin and try everything out. If you can”t figure out what something does, Google it and go from there.


Developer Tools & Basics (Feb)



To get started with development you’ll need some tools and some basic knowledge about working with files. The first thing you’ll want is a capable text editor. There are plenty of code editors previously reviewed here in Hongkiat, and most are.


I personally use Atom, and editor made by GitHub. While it is a hugely capable editor it doesn”t have easily accessible FTP capabilities (which I recommend you take into account when choosing an editor. you’ll see why in a moment).


Familiarize yourself with your editor. Whichever one you use I recommend reading about it via Google searches, looking through the settings and make sure you can use it to create and edit files on your computer with confidence.


Next, you’ll want to learn about FTP. File Transfer Protocol is a way to read and edit files on a remote computer. The idea here is that you’ll be able to modify your website without having to download files, and upload them once you”ve modified them with a separate application. Here”s a look at Coda 2 in action.



You should spend some time this month learning about how basic aspects of the Web work. Why web servers are used, what a browser is used for and so on. You don”t need to go into too much detail but you’ll need a basic understanding of a number of concepts.


Resources That Can Help


HTML & CSS (Mar)



It”s time to get our hands dirty with some HTML and CSS, the main languages of the Web. HTML is what gives pages their structure, CSS is what styles them to look the way they do. They are both easy languages but they require pratice to master.


I think it is important to mention that from here on out you will need lots and lots of practice. I believe that all languages used on the web are easy but there is a great deal of easy information to digest which is part of the difficulty of programming.


Don”t get discouraged if you don”t understand something or something isn”t working, we”ve all been there. Once you”ve gone through some resources and you feel ready for a challenge I recommend practicing by finding an element you like on a website and trying to recreate it. Another good method is to head over to 365 PSD or Dribbble and finding a web element you like.


For example, take a look at this Easy Notes shot on Dribbble. Click on the attachment and try and recreate the middle to-do type widget.



Once you can create individual elements you can tackle larger projects, like a full website. You can browse sites like Themeforest, Designmodo and Premium Pixels for further inspiration. You can even take ready-made WordPress/HTML themes and try to recreate them at home as a static HTML page.


Do make sure to be aware of licencing. Themes on Themeforest and many other places are licenced and may not be used without a licence even if you recreate them from scratch!


Resources That Can Help


HTML


CSS


Other Resources


PHP (Apr)



The time has come to learn some server side stuff. So far you have only learned clientside code. HTML and CSS is sent as is to a user”s browser and is processed there. PHP is processed on the server and is converted to HTML and CSS and sent to the browser. It introduces a huge number of useful features which you’ll learn about this month.


PHP is what allows WordPress to display thousands of articles using a single file. PHP is how a website can display the logged in user”s name, how Facebook can display your friends, and so on. The same page on Facebook will look very different for you than it does for me due to the magic of server side code.


Again, PHP is not difficult but there is a lot to know. The difficulty is further increased by not being able to create something useful for quite some time. I recommend looking at WordPress themes as soon as possible to see some practical applications.


Keep in mind that you don”t need to know everything in PHP to get started with WordPress. Object Oriented PHP is not something you’ll need to worry about in the short term and you don”t have to memorize all the functions available.


Having a good working knowledge of variables, loops, if statements and functions is a good start. From there, the more you know the better, and you’ll pick up a lot of things from WordPress itself.


Resources That Can Help


Modifying A WordPress Theme (May)



Finally, we can get started with WordPress! WordPress uses HTML, CSS, PHP and Javascript to display content. You haven”t learned about Javascript just yet but that”s ok, we can do that in a later month.


The first thing you should do is modify a theme. Using FTP go into the folder that holds your active theme and play around with it. Find where the title is and move it below the content, add some text, add some CSS and so on.


Note that this will actually change your live site so only do this if you’re sure it”s ok. Also, themes should never be modified by touching their code directly. It”s fine for practice but in reality you’ll need to either create your own theme or use a child theme to modify an existing one (see the resource section for this month for more info).


The goal for this month is to get comfortable with how a theme works and the code that it uses. You should start learning about template tags, special WordPress functions that can be used to display post data, and the files that a theme requires.


The theme I recommend modifying first is Twenty Fifteen. This should come installed with WordPress 4.1+ as it is the new default theme. This theme follows all current standards and sets the bar for development; you can be sure that whatever coding you see in Twenty Fifteen is correct.


At the end of the month you should feel comfortable making minor changes to a theme and you should have a rough idea of how to start your own theme from scratch. Don”t forget, this month is about experimentation, don”t be afraid to do things that are advised against on some sites. you’re learning, not creating a product!


Resources That Can Help


Creating A Theme (Jun)



Creating a theme is not too different from modifying an existing one but you’ll need to create a lot of your own files. Don”t be afraid to copy-paste from other themes like Twenty Fifteen. Files like comments.php which governs the discussions is roughly the same on most sites. You can use CSS to make it look different, and just rearrange some HTML perhaps.


Creating a theme is a good exercise because it takes you through so much functionality it deepens your knowledge of WordPress in general. you’ll need to create a header and footer, you’ll need to think about sidebars, menus, comments, single posts, pages, home pages and more.


You should be focusing on questions that come up during development. Your website will show the latest 10 posts on the front page, but "what do I do if I want something completely different?" These are the type of questions that may only arise while building something.


you’ll need to have a good understanding of the template hierarchy which governs the files responsible for displaying specific content. Make sure to take a look at page templates (see resources). These allow you to build pages with custom functionality.


Once you”ve gone through everything, I recommend taking a look at Advanced Custom Fields. This plugin allows you to create extremely useful option groups for posts which you can use in your themes.


I”ll list plenty of resources here but if in doubt, refer to the Twenty Fifteen code base for help, it should have everything you need!


Resources That Can Help


The Basics About Hooks & Plugins (Jul)



The hooks system provides the foundation for plugins. They allow you to add new functionality to WordPress or modify existing core functionality without the need to modify the core code.


They work kind of like triggers. Instead of going to the code in the WordPress files which publishes a post, and adding your own code to send the author an email, you can say: “When WordPress publishes a post, send an email to the author”. This can be done in a completely separate file which means the core code is never modified.


You”ve actually been using them in your theme as well when you used the wp_head() and wp_footer() functions. WordPress uses these internally to output a bunch of code, like the admin bar for example. This is how plugins can modify themes without actually touching the theme.


Learning about hooks will be your entry point into plugin development. Understanding them is key to working with WordPress and perhaps offering professional services in the future. Take your time to master this one, you will be relying on hooks heavily for all your projects.


This month you shouldn”t delve too deep into plugins but learning the required files and some basics will probably fit inside our timeframe. Plugins are very easy to create, they actually just require a single file with a comment on top.


From there you can do whatever you”d like but you do need to use the correct hooks – which is why hooks are so important.


Resources That Can Help


Plugin Proficiency (Aug)



August is the time to put some practice into creating plugins. Find something you would want a plugin for and do it yourself. Would you like all instances of good transformed into “awesome” any time a post is published? Go ahead and do it.


If you find a great idea feel free to submit it to the plugin repository but the name of the game is practice makes perfect. You can start to worry about following coding standards and making sure your code is commented and nicely formatted.


You should have enough knowledge now to be distracted by such things. After a while commenting and standard code will be second nature, even if it seems a little unweildy at first.


Create at least 2-3 plugins this month. Make them varied, if one modifies post content, perhaps the other should do something when a post is published. Perhaps you should create some custom post types and custom taxonomies, these are frequently needed for more complex projects, see the links in the resources section.


This is the stage where you should gradually be learning outlying areas of WordPress like creating new roles, custom post types and more. You can hunt all of this down and study them but it may be better to tackle them as they come up as a requirement for a project.


Coding efficiently and confidently with the things you know is more important than the amount of things in your brain. I”ve been coding for a long time now and I sometimes need to look up the simplest of things. Knowing that something is available is enough, being able to code with ease is more important,


Resources That Can Help


Javascript (Sept)



The (almost) last piece of the puzzle is Javascript. Javascript allows you to add interactivity and other advanced features to your website. By utilizing Javascript you can an pop-up modals, load comments in place, implement endless scrolling and much more.


Javascript is fundamentally a client side language but can be coupled with server side code using AJAX. This is what allows you to vote on an article for example. When you click the vote button the button changes to a thank you note and the vote count is incremented by one. All this happens without the page reloading. This is Javascript coupled with some PHP using AJAX.


Most of the Javascript you’ll be using will be jQuery. jQuery is a Javascript framework which implements special functions and gives you easy access to commonly used patterns. It”s important to understand that jQuery is not special Javascript, just as there is nothing special about the PHP used in WordPress. It”s simply a frame in which you can work.


Javascript can be the most complex since it spans multiple disciplines and can be found in many aspects of a website. From tracking codes to loading resources, managing images, intercepting user actions and simple animations, it is truly everywhere.


The good news is that you know you have all the knowledge you need to add Javascript to your theme or plugin right away. You should be “over the hump” – anything you learn right now should be easy to implement once you”ve learned it.


Resources That Can Help


Javascript


jQuery


More


Practice Practice Practice (Oct)



To underline how important practice is I would recommend devoting an entire month to it at this point. I”ve been programming for quite some time now and compared to a newcomer I can understand new concepts faster but I”m still completely lost without practice.


Luckily, the more your practice, the faster you will learn things later. In fact, by getting used to always working with code, you will need less and less practice to get the same result.


In a WordPress environment the best way to practice is to create themes and plugins. One method you can try is to recreate a simple, already existing, plugin from scratch. If you get stuck somewhere you can look at the source code of the actual product.


Focus on deepening your understanding of concepts you already know. Get into the practice of reading design and developer magazines, and developer blogs of your favourite apps. Here are some of the biggest places to read about web development apart from right here on Hongkiat of course.


Your Reading List


Advanced Concepts (Nov)



This is the month where all the knowledge you have should come together and you can start becoming a programmer. You should be able to start seeing the big picture and have a working knowledge of the four main languages that WordPress uses: HTML, CSS, JS and PHP.


I would advise starting to learn object oriented PHP. You are already using it in your themes and plugins in the loop and other constructs. OOP (object oriented PHP) will enable you to write better code and to understand the core code of WordPress better. In addition, it is the gateway to programming with C type languages and thus creating apps for iOS for example.


You can further your WordPress knowledge by learning about some of the classes, how to interact with the database directly, how transients work.


You should be able to undertake small, paid projects now with confidence. Don”t forget that doing actual commissioned work is where you learn most. It”s not only about coding, it”s about learning to communicate about code to people who don”t know anything abut the internet.


Practice is important at every stage but you should now have enough knowledge to learn a concept without too much work. Transients (options with an expiration date) should be clear for example, even if you”ve never had the need for them. You should be able to gauge when they will be useful, and look them up as needed.


As the final language to learn for WordPress you will want to look at MySQL which is used to query the database directly. Much of this functionality can be used via functions but sometimes you’ll need to query the db directly.


I would like to stress the importance of getting into an object oriented mindset. It will seem very alien at first and the usage of them will seem unclear. Remember how the use of PHP was unclear when you first studied it? How does a variable and an if statement get me a webpage?


Object oriented PHP is similar. It is used for complex cases, the more convoluted things in it are only needed for large-scale applications. This is why concepts sometimes seem redundant or over-complex.


I really recommend high-quality video tutorials for this one. My favorites can be found on Laracasts (see resources). Laracasts was primarily made for Laravel but contains a lot of OOP and other high-level concepts.


Advanced Development Tools (Dec)



Now that you know a lot more it”s time to make your life easier by learning to use some advanced tools. This includes things like using SSH to access a server, WP-CLI to manage WordPress installations, Vagrant to create a local WordPress installation, and more.


The first thing you should learn is how to set up WordPress locally using XAMPP, MAMP, WAMP or Vagrant. I personally use Vagrant, but the rest are just fine too. This removes the need to use FTP all the time, considerably speeding up development time.


Next you should look into SSH. This involves using the terminal and issuing commands. This sounds scary but really isn”t. It will open up a whole new world. WP-CLI will be a great introduction to this. It allows you to install WordPress in a few seconds, download a theme, update it, and create test users with a simple command.


I also recommend learning all about CSS preprocessors. Languages like LESS and SASS allow you to use variables, functions and other advanced concepts in your CSS.


As a part of your preprocessor studies you should learn how to use advanced compiler tools like Prepros or Codekit. These tools can reload the website whenever a file is saved, automatically compile CSS, minify Javascript and so on.


This will give you insight into the world of coding for production. In development you want to use as many separate files as you can to make your code more logical. In production you only want as small a footprint as possible so all Javascript and CSS files should be minified and concatenated. The mentioned tools give you all you need to get comfortable with this.


You should also start working more efficiently with your text editor. Are you using snippets? Are you checking your syntax automatically? Do you know all the keyboard shortcuts that would make your life easier?


This is an area where you can continuously change and grow. I went from using XAMPP to MAMP to, finally, Vagrant. It was a natural learning curve and I am still in the process of learning all there is to know about Vagrant.


I went from using Notepad++ to Sublime to Coda to Atom. There”s nothing wrong with any of these tools but as I grew I naturally progressed from one to the other.


Finally, you will want to look into version control, specifically SVN and Git. The basics are much the same, you’ll need to learn some separate commands, but once you understand one, the other will be easy to grasp.


The reason you’ll want both is that WordPress uses SVN at the moment so when you release plugins and themes you’ll need to use SVN. Most projects use Git as it is a bit better for working in teams, so that is what you’ll want to use for other projects.


Resources That Can Help


Final Words


I hope this article gave you a good overview into what is required to get from nothing to being a pro developer. In reality if you can commit full time it probably won”t take a whole year.


There are two big things to keep in mind. The main one is that while no single bit of this is difficult, it is a LOT to know, which makes it hard when put together. Don”t be discouraged if you get stuck or you work slower than others. Everyone works in their own pace, if you keep at it, you will become a good developer.


Also, one of the main characteristics of good developers is that they never stop learning. They continuously look for better solutions, learn new languages and new methods. They keep in mind that the world of coding is not black and white, many times there is no single good answer to a problem.


Good luck with your coding studies in 2015, let us know how you’re doing in the comments below!



No related posts.











Ultimate 12-Month Guide To Learning WordPress (Plus Resources)
at
Labels: , , , , , ,

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)