The Scipio Files #1: How to do Wordpress Theme Development, part 1
The Scipio Files #1: How to do Wordpress Theme Development, part 1
About two weeks ago, I published my intro article How to Learn Programming - A Beginner's Guide, which as of right now has received 276 upvotes and 160 comments (including me replying to comments). I guess it's safe to say the article was well received, lots of people seem interested to learn computer programming themselves, and therefore I've decided to publish a series of in-depth tutorial posts covering all kinds of different programming aspects.
If you are interested in learning how to program yourself, then follow me and use my tutorial posts as your guide! We'll be covering a lot and I will be publishing quite frequently. Always feel free to ask questions or add suggestions for topics to cover in the comments, or look me up on the Utopian Discord Chatserver, I'm also @scipio there!
Intro to Wordpress Theme development
As you might know, Wordpress is the most popular Open Source website content management system (CMS): currently around 29% of the web uses Wordpress, so mastering it is a good choice for a lot of people. In Wordpress, the way your website looks and the functionality it provides, is (for the most part) embedded in what's called a Theme. A Wordpress Theme may consist of multiple templates and / or template components. Many plug-and-play Themes exist, which you could deploy as-is, or customize to your liking. Some are free, some are paid-for, but I think it's far more interesting to discuss How to build your own Wordpress Theme! Not just customizing a "prefab" Theme, but starting from scratch with absolutely nothing. Exactly that is what we'll be covering in this mini-series of Wordpress Theme Development tutorials!
Beginning with HTML5 and CSS3: front-end template development
In part 1 of my Wordpress Theme Development tutorials, we're going to start with HTML5 and CSS3 as the front-end of your Wordpress Theme. On the back-end side, Wordpress uses PHP, a relational database management system (RDBMS) such as MySQL, and a webserver such as the Apache http Server or Nginx, but for the front-end you just need your own computer with a code editor such as the Atom editor and a modern web browser.
HTML basics
Just go to your computer desktop, and create a new folder there; call it "website". Inside this folder, place two blank files: "index.html" and "style.css". Open "index.html" with your code editor, put the following code in there and save the "index.html" file again.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>My first Wordpress Theme</title>
</head>
<body>
<section id="content">
<div class="wrapper">
<h1>My first Wordpress Theme</h1>
</div>
</section>
</body>
</html>
You can open the "index.html" file inside your browser via "File > Open File", or by dragging-and-dropping the "index.html" file on an open web browser tab. Your page / template at this beginning stage looks something like this:
It doesn't look really nice yet, but we'll work on that! Let's first start by understanding what is what:
How does HTML work?
- HTML is short for Hyper Text Markup Language;
- HTML describes the structure of a web page and holds its contents;
- HTML consists of tags, like
<head>...</head>and<body>...</body>and<div>...</div>; - inside HTML there are opening tags (such as
<div>) and closing tags (such as</div>); - for code readability, it's wise to indent child tags (
<section id="content">is for example a child tag of<body>...</body>), and because the child tag is inside the parent tag that's also called nesting; - HTML consists of three "components", look for example at
<div class="wrapper">:divis called an element,classis called an attribute andwrapperis in this case the attribute's value; - in HTML there exist a number of elements, which could have zero, one or more attributes each having a value. For learning HTML, it's very important to understand these core components element, attribute, value;
Top to bottom:
<!DOCTYPE html>is called a Doc-type declaration: it tells the browser "please regard this file as an HTML5 document". This statement needs to be on top of each html file;<html>...</html>is the main container in which you put all HTML elements;- the
<html>tag almost always has to child elements:<head>...</head>which holds mostly meta information, and<body>...</body>which holds the actual page structure and contents; <link rel="stylesheet" href="style.css">tells the browser it has to look for the "index.html twin file", in the same "website" folder, which describes how to display the HTML structure and contents inside the web browser. If you would have saved the .css file as "presentation.css", you should change the html-line to<link rel="stylesheet" href="presentation.css">;<title>My first Wordpress Theme</title>describes the title of the page, which is displayed at the top of the web browser inside the browser tab, and is very important for Search Engine Optimization (SEO) (if you want your website to be found), we'll talk about this more in a future tutorial);<section id="content">is just a tag to separate a page into multiple sections, we currently just have one called "content" and we will add more sections later.id=""is one way to give an element a name and please remember that anid=""is supposed to be unique per page, so don't give multiple elements on the same page the same id value;<div class="wrapper">(wheredivis short for "divider") includes the attributeclass=""which is intended to use multiple times on the same page. Via css you only describe once how to display all elements that have"wrapper"as their class name;- The element
<h1>used in the line<h1>My first Wordpress Theme</h1>is called a heading tag and is used to display large fonts, for a headline in this case. Inside the<h1>tag most of the time text is embedded.
CSS basics
Now please open the file "style.css" in your code editor, add the following code to it, and save the "style.css" file again:
* { margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 90%; }
section#content { background-color: red; text-align: center; }
h1 { color: white; font-size: 60px; }
If you now just reload your browser window, you will notice the look-and-feel of your first page has changed a lot! It now looks something like this:
It still wouldn't get you a Design Award, but practise makes perfect and we've improved the page, which is good: remember "baby steps"...
How does CSS work?
- CSS is short for Cascading Style Sheets and includes instructions how to display an HTML document;
- like HTML, CSS also consists of three "components", being selector like
section#contentwhich selects the html element(s) to stylize, one or more properties likebackground-color:that describe what kind of visual aspect to alter, and property value such asred; - property-value combinations are described after a selector statement inside curly braces
{...}end the end of a property-value statement is noted by a semi-colon;
Top to bottom:
- in
* { margin: 0; padding: 0; }the*symbol means that the "rules"{ margin: 0; padding: 0; }apply to all elements inside the html document, unless there's an exception statement for specific elements. In this case the rule dictates all elements should have no additional space surrounding the element (margin and padding). If you would omit that rule, all elements would by default show a bit of (mostly unwanted) additional spacing; - in
div.wrapper { margin: 0 auto; width: 90%; }the selectordiv.wrappertells the browser the rules{ margin: 0 auto; width: 90%; }apply to alldivelements that have the class name (.)wrapper. If there would be<div>elements in the html document without the class namewrapper, the rules{ margin: 0 auto; width: 90%; }would not apply to those<div>'s; - the
#symbol insection#contentmeans the rules{ background-color: red; text-align: center; }only apply to the<section>elements with anid="content".
Okay! We made a good start, learned the basic concepts of both HTML and CSS to use as the core foundation of your self-built Wordpress Themes, and please continue the tutorial in my following article "The Scipio Files #2: How to do Wordpress Theme Development, part 2" that I will publish very soon (hopefully later today or tomorrow!).
Posted on Utopian.io - Rewarding Open Source Contributors
@scipio Hey! It's been long and you got way ahead of me! : )
Remember we started together?
Gonna improve soon and I'm also going into this utopian-io thing thanks to you.
Of course I know and remember you! Keep up the good work!!!
Made my first utopian-io post! : )
High quality content as always, perfectly formatted, thank you for this.
Thx! I always do my best! And do watch the next parts, to be published very soon! (Writing part 2 right now!)
wow, what an awesome tutorial i find here. i love the way you explain it ;)
Thanks a lot! It's just part 1 (only HTML/CSS explained here, we need to begin somewhere!), in part 2 some more HTML/CSS to improve the page, but in part 3 we'll actually turn it into a Wordpress PHP-template! Follow-along! :-)
nice, i'll definitely read it carefully ^^
LOVE IT! It is great that you are setting the basics :D I also love making websites with wordpress n_n maybe I will add some content for this too soon :D
I became your fanXD
Aawww great! Thanks for the kind words! Stay tuned and follow-along on all my programming articles: this is just part 1 of a series, and I'm writing part 2 right now!
I will be following this closely!:)
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thx for the swift approval! :-)
Thank you, this is a great contribution!
Thx for the compliments! And follow along for parts 2, 3, 4 ... N !
I sure will mate, nice to see fellow devs here ;)
Hey @scipio I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Wow ... really cool brother ... very accurate ...