WordPress Theme Tutorial (Half 1)

by birtanpublished on July 3, 2020

hello everyone welcome to another

WordPress tutorial in this lesson we

will learn how to create a wordpress

theme from scratch which means we'll be

writing all of the HTML CSS and PHP code

ourselves now for those of you that

stumbled upon this video and are not

interested in coding I will say this

obviously one of the strengths of

WordPress is that it allows people who

would rather not write a single line of

code to still create an amazing website

but if you are using a pre-built theme I

guarantee you that in the future there

will be changes that you wish you could

make to your website even if it's as

simple as changing the way title text is

output or moving an element up or down

the page a bit I can guarantee you that

that moment will come and if you don't

have a basic understanding of WordPress

themes making those changes yourself

will be tricky and you might need to

hire someone to do it for you but I'm

here to tell you that with just a bit of

basic understanding all of a sudden

themes are not intimidating code is not

intimidating and you will have a firm

grasp of which file to go to and what

code to write to make something happen

so whether you love coding or you really

just love WordPress and want to learn a

bit more about how themes work let's

roll up our sleeves and get started so

currently we're looking at a fresh

install of WordPress now this is on my

local computer you can see localhost in

a previous lesson we learned how to

install wordpress locally but this

particular copy is installed in a folder

named wordpress so here is that folder

and we need to navigate to a certain

themes folder so we can create a new

theme so that folder lives within WP

content and then there's a folder named

themes so if we go into the themes

folder we can see that these are the

three themes that are provided with

WordPress out-of-the-box but we want to

create a new one

so just create a new folder and you can

name it anything you'd like I will name

this learning WordPress next we'll go

inside this new folder that we just

created and we want to create two new

files so I'll use a text editor and the

first file that we want to create is

named indexphp

okay and the second file that we want to

create is named style dot CSS so let's

review we have a folder for a new theme

and within that folder we currently have

two empty files and let's begin by

adding a bit of code to the style dot

CSS file we'll start with a CSS comment

to let WordPress know a little bit about

our theme so we can say theme name and

you can type anything you'd like

I'm calling this theme learning

WordPress can provide an author name you

can provide a link to the author

I'll just include a link to this YouTube

channel and you can describe your theme

where you can provide a version number

there's all sorts of different tags you

can use to let WordPress know about your

theme but for the purposes of this

lesson I think this should suffice so

that's all we need in this style dot CSS

file for this exact moment now let's hop

over to the indexphp file and just

create a heading that says hello world

and that's all we need for now so go

ahead and click Save and then if we go

back to our wordpress admin and we click

on appearance in the sidebar you can

then choose our new theme so we can see

that currently the theme name 2014 is

activated but here's our new theme named

learning WordPress and if we click on it

we can see a little bit more we can see

that it's by this author and if you

click this it would take you to that

YouTube page we link to but if you click

activate on this new theme and then go

ahead and view your WordPress website

and the other tab if you refresh you can

see the new theme that we just created

hello world now obviously this theme is

useless no one wants a theme that just

says hello world so let's give ourselves

a real-world task if we head over to our

posts in WordPress we can see that we

have two posts example post in hello

world so let's give ourself a goal we

want to output the title and the text

for these posts on our home page so

let's write the code to make that happen

so let's hop over to indexphp get rid

of hello world and let's open

PHP if this is your first time seeing

PHP do not worry it's just a different

scripting language

so if HTML is how we define and display

our content PHP is a scripting or

programming language that lets us talk

to databases that lets us do more

dynamic things so for the time being

we're topping into PHP so we can write

code that talks to WordPress and gathers

our content so we can output it on the

page now the first bit of PHP that we

will write together is referred to as

the loop the loop is central to

WordPress and it's aptly named what

we're going to do is loop through all of

the different posts and output them on

our page so here's what the loop code

looks like we begin with an if statement

so if a condition is met if we have

posts we want to do something and what

do we want to do we want to loop through

all of our posts so while we still have

posts left to loop through we want to do

something with each post then we'll end

this while statement oops so now any

code between this line and this line

will get repeated for each blog post so

we can include something like the title

and the body text here but let's go

ahead and finish our skeleton logic so

we said if this condition is met if we

have posts do this but what if we don't

have posts so we'll use an if statement

we'll say go ahead and echo a paragraph

that says no content found ok and then

we'll close out our if statement and

we're good to go so now any code we

place between this line and this line

will get repeated for each post so let's

go ahead and drop out a PHP here and

then re-enter PHP on this line so now we

can include plain HTML on this on these

lines so we can say h2 title should go

here and now if we refresh our page we

can see that there are two titles which

corresponds with the number of blah

post's we have to now watch how easy

wordpress makes it to add the dynamic

title in here instead of this dummy text

all you need to do is drop in to PHP and

simply say the title WordPress has a

function named the title which makes it

this easy now if we refresh our page we

see that the two relevant titles for our

blogs are their example posts in hello

world and yes in case you're wondering

WordPress makes it very easy to add the

actual content if you believe it or not

they have a function named the content

and if we refresh we can see that there

you have it the content for each blog

posts has been added now let's go ahead

and make these titles links so that if

you click on one then you're only

viewing that blog post so we'll create a

hyperlink surrounding that text and then

in instead of putting a URL in here

wordpress has a really neat function

named the permalink and it's that simple

so now if we refresh we see that each

title is a link and if we click on it

we're taken to a page with only that

post so now that we have a page that's

communicating with WordPress and

outputting dynamic data let's worry

about adding a proper header and footer

to the layout so in our index dot PHP

file

we'll simply add a line that says get

header and towards the bottom we'll

include a line that says get footer yes

it is that easy so now if we refresh we

can see that there's some sort of header

and footer elements the header consists

of our site name and our tagline and

then a horizontal rule and the footer

has a bit of text as well but you might

be thinking how can we customize this we

didn't write the code for this header

and footer text so it's very easy in our

theme folder you can just create a new

file named headerphp and also another

file named footerphp so now that we

created these empty header and footer

PHP files if we refresh our page we can

see that there's no longer a header and

footer

because these files are completely empty

so now let's add a bit of code to these

so we can have full control over our

header and footer so we'll start with

headerphp now header is not the most

exciting file but it's probably one of

the most important files this is where

you include code that all web pages need

so for example a doctype and your

opening HTML tag now a quick note here

if we're opening the HTML tag in our

header that means we'll probably want to

go to our footer dot PHP file to close

this HTML tag so in footer we'll close

HTML now back to header we also want to

include a head section now we'll get to

that in just a moment but we also want

to open the body element now again if

we're opening our body element and

header we need to close it similar so in

footer we'll go ahead and close the body

element now let's hop back over to

headerphp there's a few more boring but

completely necessary tasks that we need

to take care of so in the head section

we need to define what character set we

want to use now instead of including a

value here we're just going to let

WordPress do the work for us using this

function okay

and we also let's include a line to make

our site responsive so we'll say

viewport content equals the width of the

current device and let's include a very

simple title so this is not optimal for

search engine optimization we'll learn

how to optimize the title in future

lessons but for today let's just very

simply output the name of the site so

we'll say blog info name drop out of PHP

again close the title and then finally

before we close out our head section we

want to use a wordpress function named

WP head and what

this will do is later on if we add

different plugins to the site or all

sorts of different things WordPress gets

to salve the final word so before we

close out head this way WordPress can

add any other code that it wants to

automatically add after the code that we

manually added okay and then there's

just a few more quick boring tasks that

we need to complete so on the HTML tag

we can go ahead and specify which

language is being used so language

attributes and then on this body tag

WordPress has a really neat function

named body class and we'll get into why

this is useful later but basically it's

going to allow us to target different

pages with our CSS very easily so for

now oops all we need is to open and

close PHP and then use a class named

body

excuse me use a function named body

class so now that this heavy lifting is

done we can add the code which will

define what we actually see visually at

the top of our page so for example the

name of the website or the phrase or

motto of the website so we can include a

section name site header and we'll just

include the proper code so we'll say in

this heading one element

let's output the name of the website so

that's the blog info function and then

we can pass it a parameter of name that

will output the name of our site and

then we can include a heading level 5 or

whatever element you would like and then

output the motto or phrase or tagline

for the site so again we'll use the blog

info function and we'll pass it a

parameter of description oops

okay and now if we refresh the page we

can see that our title and description

are in place now let's go ahead and make

our title a link so that it takes us to

the home page of our site so we will

wrap this text in a hyperlink and then

to output the URL for a home our home

site dynamically we will use the

WordPress function named

home URL it's that simple so now if we

refresh you can see that if we go to

example post to only view that post we

can click the header to go back to the

home page now just a quick note if you

want it to actually change the phrasing

of your site name or of your tagline or

your description you don't do that

within the PHP files of your theme you

do that in the WordPress dashboard so

for example you would go to settings and

then you can see that this field

controls the title of your site and this

field controls the tagline so the key

here is that you don't want anything to

be hard-coded into your theme if

possible you want most data to live

within the WordPress dashboard or in

other words in the WordPress database

moving on so let's go ahead and finish

our footer dot PHP file because header

is complete for the moment now we want

to use a function named WP footer if you

remember we used a function named WP

head and our head PHP again we're going

to use something very similar in

footerphp this way if we add plugins or

widgets in the future they get the last

say over any code that we insert

manually so right before the body tag

WordPress will automatically get the

chance to insert any code that it needs

to so now that that's taken care of

let's go ahead and add a bit of custom

text in our footer so we can create a

element with a class of site footer and

include inside it will include a bit of

text that simply outputs the name of our

site and then the year so blog info name

and then we'll include the copyright

symbol and the year

okay so we're using the PHP function

name date and then we're passing in a

parameter of Capital y and that will

output the year so now if we refresh our

page we can see the name of our site

copyright the year so now we have a

custom header a custom footer and we

have the main content of our blog posts

let's go ahead and add a bit of styling

because currently the site looks quite

default and ugly so maybe let's change

the fonts maybe add a bit of layout and

spacing so we'll hop over to our style

dot CSS file and we'll just write a bit

of basic CSS so we'll save

font-family:arial sans-serif font size

14 pixels color how about a dark gray

okay so if we refresh we see that

literally nothing changes and that's

because we need to make sure that this

style dot CSS file is actually being

included when visitors view our page now

as with most things in web development

there are many different ways to achieve

the same thing so we could add a link to

our style sheet in the header file in

this head section now there I'm not

going to say there's a right or wrong

way of including your style sheet but

I'll show you my favorite way to do it

it does not involve the head section

directly so actually what we're going to

do is create a new file in our theme

folder named functionsphp now whether

or not you include your CSS file this

way you are going to need a functions

dot PHP file regardless so this is a

good place to start now we're going to

use PHP to write a function that imports

our style sheet so PHP and then we're

creating a function we can name anything

we would like I will name it learning

WordPress resources when I say resources

I mean any CSS or JavaScript files that

we will need for our theme at the moment

we just need the one default style dot

CSS so we'll use the WP in queue style

function and we're just gonna pass along

the URL of our stylesheet there's a

really neat function in WordPress named

get stylesheet URI so we use that to our

advantage so our function is complete

now we just need to

add this function so that it actually

runs so add action oops and then we're

just gonna pass in the name of the

function we just created which is

learning WordPress resources now this

may seem like a long-winded way to

simply call in a CSS file but trust me

as your theme grows more complicated and

you're importing more files you will be

very glad that you did it this way so

now if we refresh we can see that the

font changes because our stylesheet is

being included properly so now we can

hop back to our style dot CSS file and

continue to improve the appearance of

our layout so let's go ahead and give

the text a little bit more line height

in between each line let's try this

value also let's change the color of the

links

here's a nice blue value so if we

refresh we can see that there's a bit

more spacing in between each line the

links are now using blue let's go ahead

and give the site a max width so we'll

create a comment that says general

layout container max width let's go with

either 9 20 or 960 well Center it

horizontally give it a bit of padding

for smaller screens okay now if we

refresh nothing will happen because we

need to add this container element to

our HTML so there's a corresponding

element so we'll hop over to our header

dot PHP and right after the body tag we

can simply create a div with a class of

container and we can indent this a bit

just to stay organized and then in our

footer file at the very end right before

WP footer will add the closing div for

container and we can indent this just to

stay organized so now if we refresh we

can see there max width is taking effect

now let's give ourselves another task

let's add subtle borders underneath the

header in between each post and then

above the footer so in style CSS

we can create another section I'll call

this header and will target the site

header and just give it a border bottom

how about two pixels solid and medium

gray value and then we'll also target

the footer so that's site footer and

we'll give it a border top same style

let's give it a bit of extra space above

the footer as well so margin top 30

pixels okay so if we refresh you can see

that we have borders below and above our

header and footer now let's add a line

in between each blog post so to do that

we're going to want to head over to

index dot PHP and remember we wrote our

code so that anything in between this

line and this line gets repeated for

each post so we'll wrap this content in

an article

so we'll say article and we'll give it a

class of post and then we can indent

these lines just to stay organized so

then we can use our CSS to target this

post element so now we'll say article

post border bottom about two pixels but

instead of solid we'll go dotted and how

about a lighter color if we refresh you

can see that that's now in place let's

run a little bit of extra code so that

the last blog post doesn't get the

border only all of the ones besides the

last post so we can simply write article

post last of type border bottom none and

there you have it now I think this

represents a good stopping point for

this lesson let's review what we've

learned so far we've learned how to

create a wordpress theme you simply

create a folder in the themes folder of

your WordPress install and then inside

that folder you create these different

files that correspond with different

parts of your site so indexphp controls

sort of the HTML that gets output header

and footer obviously control the header

and footer functions is where we're

going to include all sorts of neat code

for now it's where we are including our

stylesheet more will come in this file

very soon and style dot CSS that's where

we give our theme a name and an author

and a version and then obviously all of

our styles to control the appearance of

the website now in the next few lessons

we'll learn that there's much more than

just indexphp which controls the HTML

so for example if we wanted to create a

wordpress page well instead of index dot

PHP we could create a file named page

PHP and that would control the HTML for

pages and also we can create a file

named single dot PHP and that will

control the way that individual post

pages are displayed so we'll learn that

there's much more than just indexphp

there's a whole slew of files that you

can include in your theme to really get

fine-grained control now in our next

lesson specifically we will learn how to

insert the navigation menu right towards

the bottom of our header so we can hop

back and forth between the home page and

maybe an about page so on and so forth

so thank you very much for watching this

first video in this video series of how

to create a wordpress theme I hope you

feel like you learned something and stay

tuned for more wordpress tutorials

thanks bye

Related Videos

Be the first to comment “WordPress Theme Tutorial (Half 1)”

Your email address will not be published.

There are no comments yet.