WordPress Web page Templates (Theme Growth)

by birtanpublished on July 3, 2020

hello everyone welcome to another

WordPress tutorial in an earlier lesson

we learned how to use page PHP to

control the output of our WordPress

pages well in this lesson we're going to

take things one step further so what if

we want to use different layouts for

different pages now most of the time all

of your pages will look fairly similar

and the only thing that will be

different is the actual content in the

main body part of the page but there

will be times when you do want to use

different layouts or different output

schemes or different HTML so in this

video we're going to learn how to use

conditional logic and page templates to

do just that so let's get started let's

give ourselves a hypothetical task let's

say that when we're on the portfolio

page we want to bet a custom text to

display after this tagline so right

about here and we don't want that text

to display on any other pages only on

the portfolio page now perhaps this

isn't the most intelligent design choice

or maybe this doesn't make sense in a

real-world scenario but I think it'll be

a good proof of concept so the idea is

that we already have a header file that

is used on all pages so how can we make

a change in this one headerphp file

that only shows on one actual page we're

going to use something called

conditional logic the code will look

like this will drop into PHP and we're

going to use an if statement so we're

saying if a condition is met and we want

to do something so now anything we place

between this line and this line will run

only if a condition is met so here in

between these brackets is where we

define what condition we're checking for

so we'll say if we're currently on a

certain page now how can we signify the

portfolio page with code it's quite

simple if we're viewing the portfolio

page we can see that in the URL bar it

ends with ID equals 14 so it's really as

simple as adding a 14 and then this is

page function will take care of the rest

so now any code we include here excuse

me not necessarily code just text so we

can say thank you for

or viewing our work actually let's move

this to sit within this heading level 5

element and if we refresh we can see

that this extra bit of text displays but

if we're on any other page it doesn't a

quick note if your particular WordPress

website does not show page ID at the end

of URLs that's okay in fact it's

desirable so let me show you an

alternative way to figure out the ID

simply go into your WordPress dashboard

click on pages click on whatever page

you're looking for or trying to figure

out the idea of and then once you click

on it then in the admin the URL will say

post equals and a number now if you

don't like using ID numbers at all

you don't have to you can also use slug

names in your conditional logic in our

code so let me go into settings and

adjust my permalinks so that our URLs

actually use names so I'll change it to

month and name so now if we go back to

our website and we click on portfolio

again you can see that the URL does not

have a page ID it's simply portfolio so

that means portfolio is the slug the

slug name for this page so an

alternative way of adjusting or using

our conditional logic would be to get

rid of the 14 the ID include quotes and

say portfolio so if we refresh we can

see that the exact same behavior is

still in place now I'll be the first to

admit that this exact example isn't very

exciting or terribly useful to include

extra text in the header but it's a

proof of concept the point is that you

now have conditional logic in your

toolbox now anywhere in any of your

theme files you can use conditional

logic to display different menus or

different content or different anything

on any page so that closes the first

chapter for this lesson conditional

logic now let's move on to something

different what if we actually wanted a

different template file to power this

portfolio page so currently page PHP

this is powering all pages but what if

we had changes that we only wanted to

show on this page

and they weren't subtle enough to just

use conditional logic what if we

actually wanted an entirely different

template

well WordPress makes that incredibly

easy to do we simply create a new file

in the theme folder and name it page –

and then we can include either the slug

name of the page that we're targeting or

the ID number of the page so we could

either include 14 or we could spell out

the slug and say portfolio that's it now

if we copy and paste code from page PHP

into this newly created file we can

customize this any way we would like so

for example what if on the portfolio

page we do not want to display the title

just delete that line refresh you can

see that it's gone but if we go to any

other page the title is still present

well that wasn't the most exciting

change

let's give us something a bit more

interesting what if we wanted the title

to sit on the left side and we wanted

this content to sit on the right side so

sort of a two column layout you can do

whatever you would like so we could say

a column container give it a class of

clearfix say title column text column so

we'll move the content into this text

column will output the title and title

column so we'll say H to use the PHP

excuse me the WordPress function name

the title so you can see that it's back

in but now we have this unique HTML

structure to play with so we can just

add a bit of CSS and we'll have a two

column layout so let's head over to our

style sheet and add a comment to stay

organized to column title layout so the

title column width 30% float it to the

left the text column take up the rest of

the width and we'll float it to the

right so if we refresh you can see that

we have a two column layout now I'm not

going to claim that I love the way this

looks visually but we set it up very

quickly and it's just to illustrate the

point that you can very easily create

different layouts for different pages

ice

creating a new file on your theme folder

named page – and then either the slug or

the ID so now we've learned how to

assign very specific theme files to very

specific pages based on their name or ID

however what if we wanted to create a

template that could be used by multiple

pages so for example you can see we have

links down here in the footer frequently

asked question Terms & Conditions

privacy policy what if we wanted just

these three pages to all share a common

layout but none of the other pages

WordPress makes it very simple so we'll

head over to the code we'll create a new

file you can name it anything we would

like I will call it special template now

let's copy and paste the code from our

standard page PHP into special template

and we just want to include a comment up

near the top of the file that says

template name special layout or you can

name it anything you would like and then

close the comment this comment is

essentially registering the template

with WordPress so WordPress is aware

that it exists so for example if we head

over to the dashboard click on pages and

find one of the pages that is linked to

from the footer privacy policy war we

can see that in the bottom right corner

under page attributes there's a template

field and we can click it and select

special layout the file we just created

now obviously if we click update and

refresh nothing will change because

remember we literally just copied and

pasted the code from page standard page

PHP so let's go ahead and make some

quick customizations let's imagine that

we want some sort of info box or

disclaimer to sit right about here over

on the right side so in our code we'll

go between the header and the content

create a new section info box let's

create a heading level 4 that says

disclaimer title and then just include a

bit of dummy text okay so now let's add

some corresponding CSS so that this

markup will sit right about here

oops create a new comment infobox styles

okay so let's add the code we'll give it

a width of about 30% float it to the

right obviously

let's give it a bit of margin so it

doesn't sit right up against the regular

text okay

let's also give it a bit of padding and

then a really light background color

let's also go ahead and adjust some of

the text that sits inside the info box

so remember we created a heading level 4

I don't really want there to be too much

space below the header so margin bottom

only 5 or 6 pixels and then let's make

the dummy text quite small so the

paragraph text font size maybe 85% so if

we refresh you can see that there's now

this nice little info box and if we

wanted this info box to also display on

the terms and conditions and frequently

asked questions' pages all we would need

to do is head over to the dashboard find

those two pages and adjust the template

so frequently asked questions template

special layout then we can do the same

thing for terms and conditions

okay so if we refresh there it is and if

we go to terms and conditions there it

is so this is useful because if you

imagine you have maybe 10 or 20 pages

and you want to include a uniform text

box if you ever down the road make

changes to this text now you don't have

to go to 20 different pages and update

it it's just in this one easy to update

template file so you can just change it

in one spot and that brings this third

and final chapter of the lesson to a

close let's review what we learned today

number one we can use conditional logic

and if statement and then if that

condition is met so if we're on a

certain page we can include unique code

number two we learned how to create new

theme files that match the slug name or

the ID number of a page and WordPress

will automatically make the connection

to only use it for that page and number

three we learned how to create actual

page templates that can be chosen from

the WordPress admin screen so we've

learned three different ways to send

unique code to different pages so that

brings this particular lesson to a close

thank you very much for watching 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 Web page Templates (Theme Growth)”

Your email address will not be published.

There are no comments yet.