Coding Toolkit

At this blog, you’ll find original tutorials to customize your WordPress Theme with CSS and with a Child Theme. To do so, this ABCD coding toolkit will guide you in your learning process.

Basically, we could sum it up like this:

a) There are languages we need to know, or at least start getting familiar with;

b) WordPress has its own language, sort of speak, which is mixed with the other languages

c) There are free game changing tools you definitely to try

d) Creating a Child Theme, is a fun and easy way to try out what you’re learning and to customize the theme for your blog.

A) Languages

When we code, we write in different languages:

  • in HTML: to create the structure of a website and its layout
  • in CSS: to design the look, and also make tweaks to the layout
  • in PHP: to make things work, sort of speak
  • in JavaScript: to make really cool things happen

Where Can I Learn to Code for Free?

You can follow a structured path (a course, a program, or many) or you can learn at your own pace while developing your Child Theme.

If you want to follow a structured path: At EdX, my favorite e-learning platform, there’s a free course “HTML5 and CSS Fundamentals” to get you started; it is self-paced and you can purchase a certificate if you want; huge bonus: it is part of a full career to become a Front-End Web Developer!

If you want to learn on your own: at W3schools, there are complete and exceptional tutorials on HTML, CSS, JavaScript and PHP;

The Coolest CSS Feature: Flexbox

Flexbox (or Flex) is web layout model, and its part of the CSS language. With a few snippets (lines of code) you can – for example – create rows and columns and make your elements adjust to the screen automatically.

From CSS-tricks, here’s a Complete Guide to Flexbox (way too much fun in here!)

B) WordPress Language

When we code on WordPress sites, we’ll find it has a special vocabulary; think about the World Wide Web speaking in the languages mentioned above, and the country of WordPress adding its own words. These ‘words’ are:

C) Software

To code, all you need is a text editor to write “in plain text”, but… how could you visualize what you are doing? And which text editor is best?

  • A Text Editor: on Mac, for example, you can use the “TextEdit” app, and write “in plain text” (this is very important) However, as you’ll see in the Sublime Text guide, there’s a better way to code
  • A Local Host: your WordPress website/blog is at a host on the web; can you imagine having the same in your computer? It will allow you (as you’ll see in the MAMP guide) to use WordPress offline, develop your Child Theme, test plugins and etc.
  • An FTP utility: once you created your files, you’ll need to upload them to your website; for that, you’ll need something like FileZilla.

There are the tools I use, for a blog running with the WordPress.org platform. There are free versions for all of them and they are easy to install.

Sublime Text is a Text Editor for Code
+ Learn More
MAMP allows you to have a local host on your computer. Learn how to install it and WordPress.
FileZilla allows you to upload your files to your server

Last but not least, there is this thing called “The Inspector” (it’s in your browser!); it lets you see the code behind any website. Check out here how it works.

d) How To Create a Child Theme

WordPress has a Child Theme Handbook teaching you all about it. This blog is running with one I’m still developing (for the Twenty Twenty Theme)

If you’re feeling lazy, check out the following quick guide to create a child theme.