Some time in the past, we launched to you the idea of making a WordPress theme from HTML. We cut up the tutorial into two components and at the moment we’re all about fleshing out the 2 tutorials, so be happy to treat this put up because the third serving within the put up collection. My goal is to take aside the WordPress theme to offer you a transparent image of the way it (the theme) works.
This put up assumes you have got a working data of HTML and CSS. I’ll go forward and declare that having HTML and CSS abilities is a prerequisite in designing WordPress themes. Yet one more factor, this put up will keep clear of huge phrases and tough ideas – will probably be simple to grasp, so be able to have enjoyable and be taught.
A Little HTML Priming
Each HTML internet web page is cut up into totally different components utilizing the tag. As an illustration, you’ll be able to break the physique () of your web site into a number of sections reminiscent of navigation, header, major content material, sidebar and footer amongst others.
After getting your internet web page in sections, you’ll be able to order (or prepare) the sections as you want utilizing CSS. This course of is called styling, and it includes including different type parts reminiscent of colour, dimension, borders, particular results and many others. Such is the facility of CSS, which – by the best way – is brief for Cascading Model Sheets. If you put your HTMl and CSS recordsdata collectively and throw in a few photos, you find yourself with an entire web site.
Issues are usually not very totally different with WordPress themes. As we noticed partly 1 of How To Create A WordPress Theme from HTML, WordPress themes are cut up into totally different recordsdata. For those who can not spot some similarity at this level, permit me to elucidate.
Static HTML internet pages are cut up into divisions (what we known as sections earlier on) utilizing tags (or tables if you happen to’re actually old-fashioned). Alternatively, WordPress themes are cut up into totally different php recordsdata, that are then put again collectively utilizing template tags.
Subsequently, as an alternative of getting all physique parts (header, major content material, sidebar, footer and many others) residing in a single file (as is the case with static HTML), every of the physique parts (in WordPress themes) lives in a separate recordsdata.
So, the header will stay in header.php, the sidebar will discover house in sidebar.php, the primary content material will stay in index.php, or single.php (if it’s a put up) or web page.php (if it’s a web page). The footer part will stay in footer.php and so forth.
Are you following? Try the illustration under:
From our illustration above, , and are known as template tags. Their work is to fetch header.php, sidebar.php and footer.php in that order out of your theme listing, and show the content material in your index.php, thus finishing the online web page.
Don’t let the .php extension scare you, the content material inside php recordsdata is simply HTML code that you just’re accustomed to. As an illustration, your header.php can include typical HTML listing navigation. Equally, you’ll be able to put typical HTML code within the footer.php, sidebar.php and index.php.
You may as well place the loop.php operate in your index.php (or anyplace you fancy) to show your weblog posts, however I ought to decelerate and get again to the anatomy of WordPress themes. I’ve talked about a factor or two concerning the loop partly 2 of how one can create a WordPress theme from HTML. and we are going to speak about it (the loop) and different features sooner or later.
Transferring on…
A primary WordPress theme is comprised of no less than 4 template recordsdata particularly:
- index.php
- header.php
- sidebar.php
- footer.php
Let’s see what goes into every of those magical recordsdata:
Index.php Template File
That is the primary file with out which you don’t have a working WordPress theme. It’s the first (or default) file that masses while you go to a WordPress web site. Take into account it the equal of index.html.
A typical index.php in WordPress themes will seem like this:
You may add the loop between to show weblog posts on the homepage (index.php) as proven under:
