For many people, our first revel in of coding for WordPress is after we write our first theme.

Finally, each WordPress web page wishes a theme, and if you need one thing bespoke then it is sensible to code it your self.

After I began out with WordPress in 2010, I’d by no means labored with a content material control machine (CMS) sooner than. However I’d coded a lot of HTML and CSS, both inside of huge websites that used HTML for content material as a part of a CMS, or for small shopper websites I constructed from scratch.

I spent weeks weighing up the professionals and cons of various CMSes I may just use for shopper websites (have in mind, this used to be sooner than WordPress changed into the dominant pressure it’s as of late) and determined on WordPress for 2 causes. The primary used to be the superior group of customers and builders that we’re all part of. And the second one used to be the truth that with some HTML revel in, it’s now not that onerous to create a WordPress theme.

Proceed studying, or leap forward the usage of those hyperlinks:

On this collection of 3 posts, I’m going to stroll you during the procedure of making your individual WordPress theme from static HTML. We’ll get started with a unmarried HTML report and a CSS stylesheet, and convert the ones right into a WordPress theme with all of the bells and whistles that includes.

The posts will paintings during the procedure so as:

  1. Growing your index.php report, including in template tags and a loop.
  2. Growing further template recordsdata and template portions such because the header, sidebar and footer recordsdata.
  3. Including capability, together with widgets and a navigation menu, and getting your purposes report arrange.

On this submit I’ll create a unmarried report – index.php. That can be in response to the index.html report from my static web page, however I’ll take away the content material and substitute it with template tags and a loop.

So let’s get began!

What You’ll Want

To practice together with this collection, you’ll want a couple of gear:

  • A construction set up of WordPress, ideally in your native device.
  • A code editor.
  • A static web page – in the event you don’t have one you’re running from, you’ll download the files I’m using.

Be sure to do that paintings on a construction web page, now not a reside web page – you don’t need the sector to look your theme till it’s able.

The Beginning Code

The beginning web page has simply two recordsdata – our index.html and taste.css. I’ve intentionally stored issues easy, and used a pared down model of my web page. Right here’s the way it seems:

Our starting home page

You’ll be able to to find the contents of the index.html and taste.css recordsdata on Github – I’m now not going to turn the code right here as there’s so much!

Notice: It is a fundamental set of code designed that can assist you create your individual theme. If you wish to use it for reside websites, you’ll most certainly have so as to add additional styling and many others. to it. It wouldn’t cross the theme listing necessities. Please simply use it for finding out, to not energy a reside web page.

Environment Up Your Theme

To create your theme, you’ll desire a folder for it to your WordPress set up. The use of your code editor or report supervisor, move to wp-content/topics and create a brand new folder. Give it no matter identify you need. I’m going to name mine wpmudev-theme-part1.

Reproduction your index.html and taste.css recordsdata to that folder. They gained’t do anything else but, however they are going to quickly.

Now you may have a folder with two recordsdata in it. You’re getting began!

At this time, WordPress doesn’t know that you’ve a theme. Any theme wishes simply two recordsdata: index.php and taste.css. As you’ll see whilst following together with this collection, you in most cases want greater than that, however the theme will serve as with simply two.

Let’s get started via including commented out textual content for your stylesheet. Open your taste.css report and upload the next:

This provides WordPress the ideas it must recognise that that is the theme stylesheet. Be at liberty to edit the main points, including your individual identify and URL and converting the identify of the theme in the event you like.

The following factor to do is alternate the filename of your index.html report to index.php. You currently have the 2 recordsdata that may get your theme running.

Alternatively you haven’t added any PHP but. To do this we’ll want to upload some template tags and a loop. Let’s do this.

Including Template Tags

A template tag is a different WordPress serve as that you just use in a theme template report. It may do any certainly one of all kinds of items – to look the variability of template tags on be offering, take a look at the codex.

Right here we’re going so as to add template tags for 2 issues:

  • Calling the stylesheet
  • Mechanically generated categories and IDs for CSS

Calling the Stylesheet

At this time in the event you open up your web page together with your new theme activated, you’ll understand that none of your styling is loading. Right here’s how mine seems:

My site with no CSS

Don’t panic! You simply want to upload a stylesheet name to the head segment of your index report.

Notice: Partly 3 of this collection, I’ll display you find out how to transfer this to the theme purposes report, which is easiest follow. For now we’re simply running with two recordsdata: the stylesheet and index.php recordsdata, so we’ll keep on with the ones.)

Open up your index.php report. In finding this line:

Edit it so as an alternative of calling a static report, it makes use of PHP to load the theme stylesheet:

This makes use of the bloginfo() template tag, an invaluable tag that fetches a wide variety of details about your web site from the database. On this case it’s fetching the url of the theme after which having access to the report in that folder known as taste.css.

Now refresh your own home web page. You’ll to find that the kinds load. Right here’s my web page now:

My site with styles working

You’ll understand that it seems precisely like your outdated static web page. That doesn’t imply we’re carried out despite the fact that – nowhere close to! The content material is pulling via from static content material in that index.php report, which we’ll proper via including a loop. However first let’s upload some extra template tags.

Growing Mechanically Generated Categories and IDs

It’s truly helpful as a way to get WordPress to mechanically generate CSS categories and IDs in your posts and your component. This implies you’ll later use the ones categories for styling, focused on particular submit sorts, classes and extra.

Open your index.php report. In finding the outlet tag. It’ll be sitting by itself line, after the last tag.

Edit it so it reads like this:

This makes use of the body_class() template tag, which is able to discover what sort of web page your web site guests are on at any given time and generate CSS categories in response to that.

Should you refresh your web page and check out the code you’ll to find that WordPress mechanically provides some CSS categories for you:

Those will range in line with the web page you’re on to your web page and which form of content material it’s showing. You’ll be able to use this to focus on your CSS at positive content material sorts equivalent to unmarried posts, positive classes or anything else you need.

Now let’s do that in your particular person submit. In finding this line to your index.php report:

Edit that line so it reads like this:

This makes use of two template tags:

  • The the_ID() tag fetches the submit ID and makes use of that to provide the submit a novel ID.
  • The post_class() tag works in a similar fashion to the body_class() tag, including an inventory of categories to the object component that correspond to the kind of submit that is. Notice that at the moment this gained’t paintings correctly as you’re now not fetching a submit from the database – but if we upload the loop subsequent, it’ll.

Including a Loop

Now for the thrill bit. At this time, the content material of your web page is hard-coded in. You need it to be populated from a decision to the database, in order that the proper content material can be displayed no matter web page you’re on.

For your index.php report, to find the code throughout the

tag (the only you already added the ID and closes to with template tags).

Edit that code so it reads like this:

There’s a large number of code there – if you wish to perceive what’s occurring, take a look at our post explaining the loop.

Now in the event you refresh your own home web page you’ll see some very other content material – your posts. If that is a brand spanking new WordPress set up you’ll see the default submit that’s added while you set up WordPress:

My site now has a loop

Including Hooks

The general step on this first a part of our collection is so as to add a few vital hooks to our code. Those are positioned within the head segment and the footer, they usually’re crucial for lots of plugins to paintings.

For your head segment, upload this sooner than the last tag:

Now transfer right down to the tip of your index.php report. Ahead of the last tag, upload the wp_footer() hook:

That provides a different hook to the highest and backside of each web page to your web page – those are crucial in your topics and your web page to paintings correctly, so don’t skip them.

Now save your report.

What Comes Subsequent

You currently have the beginnings of a WordPress theme. Alternatively there’s nonetheless paintings to do. Within the subsequent a part of this collection I’ll stroll you during the strategy of splitting your theme up into a couple of template recordsdata. You’ll create separate recordsdata for the header, sidebar and footer, an come with report of the loop, and a separate report for every of pages and archives.

WordPress Developers

[ continue ]