learning WordPress Theme Tutorial (Part 1) > WordPress learning

 

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 index.php
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 index.php 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 index.php 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 header.php and also another
file named footer.php 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
header.php 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
header.php 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
footer.php 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 functions.php 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 index.php 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 index.php 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 index.php
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