WordPress Customized Editable Theme Content material (Picture & Textual content) Tutorial

by birtanpublished on July 3, 2020

it's been almost two years without any

updates but yes the series lives on my

friends in this lesson we are going to

learn how to add custom options and

content fields to our themes customize

admin screen it's hard to explain with

words so let's just jump right into a

demo of the finished product that we

will be building together alright so

down in the footer I want you to pay

attention to this new light grey box

it's a call-out that links to the about

page but let's imagine that I want it to

link to the portfolio page instead and

use different text and a different image

but let's also imagine that this is my

website but I'm not a web developer

someone else coded this site for me and

I just used the WordPress admin panel to

manage the site well all I would need to

do to make those changes happen is jump

over to the admin dashboard and under

the appearance menu click on customize

now in our previous lesson we set up

this standard color section to allow for

customizable colors and now in this

lesson you'll notice that we have a

brand new footer call-out section so if

I click on that we can begin customizing

the grey call-out box let's begin by

editing the headline to say view our

portfolio instead so in this field view

our for folio we can see that the live

preview gets updated on the fly we can

also update the paragraph text so let's

delete this and say example portfolio

text there we have it next let's swap

out this image of the elephants for an

image of a dog so within this image

field let's just click on change image

I'm going to upload an image file from

my computer's hard drive

once the image is uploaded we then click

this select button and now WordPress

will even let us crop the image and it

will keep the perfect aspect ratio of

height and width for us that looks good

I'll click crop image there we have it

and then finally let's adjust this

linked field this is where we define

what page the visitor should be taken to

when they click on this link or this

link so if we click on this field we can

choose from any of our pages in

WordPress let's change this to portfolio

and we can even test that link out

within the live preview so we can see

that that took us to the portfolio page

perfect so this looks good to me I'm

just going to click Save and publish and

we're done so if I jump back over to my

other tab that's simply viewing the

website and isn't in the admin panel if

i refresh we see our latest changes have

taken place alright so now that we've

seen an example of the finished product

let's learn how to code a theme to have

an editable area like this so behind the

scenes I just reset my theme files back

to the way they were from our previous

lesson so you and I are now on the same

page so let's code together to add back

in the custom footer call-out box let's

begin by adding static dummy HTML

content and styling it with CSS then

once that's done we can write PHP to

actually make it dynamic so let's jump

in to our text editors go ahead and open

up your WordPress theme folder and let's

begin by hopping into the footer dot PHP

file right below this opening footer

element let's drop down to a new line

and let's create a new div we could give

it a class of anything but let's call it

footer call out be sure to close that

div and within this new div let's create

another div for the image so let's give

it a class of footer call out image and

let's create another div for the text

content so div we'll give it a class of

footer call out

next and within this new text div let's

add a heading level to element and let's

just say placeholder heading and let's

also add a paragraph element with a bit

of dummy lorem ipsum content let's go

ahead and save this file and if we

refresh in the browser we can see that

that content desperately needs a bit of

CSS attention it could use a bit of

styling so at this point let's jump back

into our text editor and open up the

style dot CSS file and let's scroll down

to the very bottom of the file and let's

create a new comment just to stay

organized and say footer call-out

section let's begin by selecting the

overall div it had a class of footer

call-out let's go ahead and give it a

background color of gray so background

color let's use the hexadecimal value of

ddd let's see how that looks in the

browser I think we could use a bit of

extra spacing here so let's give

ourselves a bit of padding say padding

20 pixels and let's also use margin to

push up on the top so that there's a

vertical gap between this div and the

content above it so let's say margin 30

pixels on the top and we don't need any

on the other three directions that looks

better next let's set up the two column

layout so we want to use a selector that

targets the two column divs so remember

the first one had a class of footer call

out image so let's float that to the

left and give it a width of 30% let's

select the other column it had a class

of footer call out text let's float it

to the right and give it a width of 67%

and if both of these children divs are

floated we need to make sure that our

parent div clears the floats so back in

our footer PHP with our HTML on the main

footer call out div let's give it a

secondary class of clear fix let's save

this and

also our CSS file and if we check out

the browser we see a two column layout

so the image will take up this space

once we add an image and our text is

here looks good

let's fine-tune these font sizes just a

bit so let's create a new rule and

target footer call out text h2 so let's

say that the heading should have a font

size of 17 r m and let's also make sure

that its bottom margin isn't too large

so let's say margin we don't need any on

the top or the right but on the bottom

let's just say 035 Ram and we don't

need any on the left that looks better

let's increase the size of the paragraph

text a bit so let's create a new rule

that targets footer call out text any

paragraph elements let's say font size

09 Ram that's a bit easier to read now

that's enough HTML and CSS for now let's

change gears and begin writing the PHP

to make this content pull dynamically

from WordPress data to do that let's

jump back into our text editor and hop

in to our functions PHP file let's

scroll down to the very bottom and just

to stay organized let's add a comment

that says add footer call out section to

admin parents customize screen the first

thing we want to do is create a new

function we can name the function

anything we'd like but it's a good idea

to prefix the function name with our

theme name so that way the function

doesn't conflict with any wordpress or

plugin functions so my theme name is

learning wordpress so I'll begin with L

WP for short and then I'll include an

underscore and say footer call-out open

up a pair of parentheses and then a pair

of curly brackets and before we even

write anything within the body of this

function let's first drop down to a new

line and tell WordPress a

exactly when we want it to run this new

function so on our new line let's say

add action this takes two arguments the

first is the word press action that we

want to hook on to and the second

argument is the name of the function

that we want to run at that particular

moment so for the first argument we want

to tack on to the customize register

action hook that's a built in WordPress

native name and then the second argument

is simply the function that we just

created so we just type out the name of

the function alright now we are ready to

begin actually writing our function so

let's ask ourselves what's the first

thing that we want to do here well we

want to add a new section to the

customize screen so for example in the

WordPress admin dashboard if we go back

to appearance customize we can see that

there are currently five sections and we

want to add another one for the footer

call out so back in our code everything

that we do is going to be tied to a

WordPress native object named WP

underscore customize this is an object

that the WordPress system ships with by

default and it contains a method that we

can leverage named add section we want

to pass this two arguments the first is

the short name or variable name for the

new section we want to create and the

second argument is an array with a few

additional options

so first let's provide a variable name

for the new section I will name it L WP

footer call out section alright and then

let's add a comma and the second

argument is an array so let's open up an

array and in between the arrays

parentheses let's drop down to a new

line just to stay organized and within

this array the only property we need to

set is the title property this is the

name of the section that will visually

display in the admin panel so let's just

call it footer call out and that's all

we need to create a section

but we don't want the section to be

empty we want there to be a field for

the headline another field for the

paragraph text another field for the

image so on and so forth now in terms of

our code for each field that we want to

create we'll need two things a setting

and a control think of those two things

as a pair the setting is where data will

be stored in our database for a field

and the control is the textbox that

users actually see in the admin panel

and type text into so for example let's

begin by creating a setting and control

pair for this headline so in our code

let's drop down to a new line let's

begin with the WP customize object once

again and this time we want to leverage

a method that it contains named add

setting we will also want to pass this

method two arguments the first argument

is the variable name that we want to

create for this setting let's just call

it el WP footer call out headline and

the second argument is an array with a

few additional options within the

parentheses for the array let's drop

down to a new line to stay organized and

within this array we can provide a few

properties so if we want we can provide

a default value so when the user first

sees this field and the customize screen

we can set things up so the field

already has a value so we could say

example headline text

alright that's all we need for the

headline setting now let's create the

headline control so again we want to

begin with the WP customize object and

this time we want to leverage a method

that it has named ad control the code

for creating a control is a bit

different so in this case we want to

create a new instance or a new object

that is based on the WP customize

control class so open up a pair of

parentheses and this constructor

function takes three arguments the first

argument is simply the WP customize

object the second

is the variable name that we want to

give this control so I will name it L WP

footer call-out headline control and the

third argument is an array with a few

additional options so let's create an

array open up a new pair of parentheses

in between that new pair of parentheses

let's drop down to a new line to stay

organized and within the array the first

property that we want to create is named

label so this is the text that will

label the headline field so we want it

to say headline the next property we

want to set is named section obviously

we want this control to live within the

section that we just created a few

minutes ago so we will reference that

section variable name so down here we

just type in lwp

footer call out section let me scroll

down a bit so we can see what we're

doing and then we want to add a comma

and add a third property named settings

and this is where we tell WordPress

that the value that the user enters into

this field or this control should be

saved into this setting in the database

so for the setting property we just set

it to equal L WP footer call out

headline because that's the name of the

setting that we created just a moment

ago alright now before we save this file

and test what we have so far if we are

going to use the WP customize object we

need to make sure that we can actually

access it from within our function to be

able to access it all we need to do is

pass it as a parameter within our main

functions parentheses so here we just

include dollar sign WP customize alright

now let's save this file and jump back

in to our admin dashboard and revisit

the appearance customize screen so here

we see that we successfully added the

new footer call out section and if we

click on it there's the headline field

and it even has the default value that

we set now currently if I change this to

the field we see that in the live

preview the headline text did not update

and that's because we never updated our

footerphp file our HTML to tell it to

pull from the database so our next step

is to simply jump in to footer dot PHP

here is that headline element and let's

hollow out its value so let's delete

this and instead drop into PHP and we

can use the WordPress function named get

theme mod and then we just supply the

variable name of the setting that we

want so remember we named it L WP footer

call out headline now this get theme mod

function will successfully retrieve that

value but we don't just want to store

the value in memory we want to actually

echo it out onto the page so let's save

this and if we refresh in the admin

panel now if we go into footer call out

and attempt to change this testing one

two three the live preview actually

updates perfect so that takes care of

the headline now let's work on the

paragraph so back in our text editor

let's jump back into functions PHP so we

created a setting and control pair for

the headline now we want to create a

setting and control pair for the

paragraph now we can save ourselves a

ton of typing by just copying and

pasting this pair that we just wrote and

then simply modifying a few things here

and there so let's copy the setting in

control that we just setup copy it to

our clipboard and then let's drop down a

few lines and then just paste it in

again

alright so within the new copy of the

setting that we just pasted let's change

the variable name from headline to text

it's not really necessary but we can

change the default value to example

paragraph text

alright let's adjust the control so we

want to change the variable name so

instead of being called headline control

we can just call it text control let's

change the label to just be

texts we can leave the section value as

is because we want it to live in the

same section but let's be sure to update

the settings value so let's change this

from headline to text and let's actually

add a comma here because we want to

include another property named type now

by default a control will be a single

line text field but for this paragraph

text we want a multi-line text area so

we can just set the type to text area

let's save this file but before we test

things out in the admin panel let's

first jump into footer dot PHP and

update our HTML so let's remove this

entire paragraph element that is static

and instead let's drop into PHP and echo

out the results of the git theme mod

function and we want to retrieve the

setting that is named lwp footer call

out text let's go ahead and save this

file and then jump back in to our admin

so now if we jump into footer call-out

we see our paragraph field testing the

paragraph field so in the live preview

we see that that is successfully updated

but that text looks especially small and

that's because it currently isn't being

wrapped in P or paragraph tags so to fix

that we can just jump back to our HTML

and we can wrap this within a built in

WordPress function that will parse plain

text and return it as HTML that uses

paragraph tags so let's wrap this and a

function named WP auto P be sure to

include an extra closing parenthesis

here and then let's save this file and

refresh in the admin panel we can see

that text is now a bit larger because

it's successfully using paragraph tags

so if we go back into that field you can

add a bit of extra text and then even if

we drop down to a new line it will be

converted to HTML without any problems

all right so that takes care of the

heading and the paragraph next let's

create a

linked field that will let the admin

choose which page visitors should be

taken to if they click on this text or

the image so back in our text editor

let's jump into functionsphp to avoid

as much typing as possible let's just

copy this last setting and control pair

copy it to our clipboard drop-down paste

it in again let's change this setting

from text to link in this case we

actually don't need to provide a default

value so let's delete that and if that's

the case we actually don't even need to

provide this array argument so we can

delete that all right let's adjust this

control for our link field so let's

change the variable name from text

control to link control change the label

to link section can stay the same let's

be sure to change settings so it saves

to the right place in the database

change this from text to link and

perhaps most importantly let's change

the type to drop-down pages if we use

this exact type name WordPress will take

care of everything else

so let's save this file and then jump

back into footer dot PHP and let's turn

our headline element into a link so

within the h2 let's open up an a tag

with an href attribute for now we can

leave a blank and then right before the

closing h2 tag let's add a closing a tag

now let's go ahead and fill out the HR F

value so let's drop into PHP and then we

want to echo out the value of get theme

mod and the setting name was lwp

footer call out link let's go ahead and

save this file and then refresh our

admin panel to test it out so if we go

back into footer call out here's the new

link field and we can choose between any

of our WordPress page entries just to

test things out let's set it to the

contact us page and let's click on this

link just to test it out we see no

content found so it looks like something

isn't working

quite right if we hover over this link

if you look in the bottom left corner of

my browser you can see the status bar

that tells us where this link is

pointing to and we can see that it's

really just returning a value of 6 and

that's because the post or page ID of

the Contact Us page is the number 6 so

all we need to do to convert that ID

number into a usable link is go back

into our code and wrap this get the mod

function in another function named get

permalink be sure to include the extra

closing parenthesis here let's go ahead

and save this file and refresh in the

admin and now if we click on the link it

successfully takes us to the page that

we specified the Contact Us page next

let's work on adding a field so users

can upload an image so back in the text

editor let's jump into the functions PHP

file let's copy and paste the last

setting in control pair so we don't have

to type it all out again so copy drop

down a few lines and paste it in again

let's change this copy from link to

image let's change the control variable

name from link to image update the label

section can stay the same be sure to

update the settings from link to image

and we want this to be an image upload

field not a drop-down pages field so

let's delete this line entirely and

WordPress actually has a dedicated class

for creating image upload controls so

instead of using this generic WP

customize control class let's delete

that and replace it with WP customize

cropped image control in this class will

even let us specify an exact width and

height aspect ratio for the image so it

will force admin users to crop the image

to meet the ratio we set so for example

we can say width 750 and height 500 you

could set any width and height aspect

ratio you want

this is just an example but let's save

this file and refresh the admin panel

here we can see the new image field

let's select an image I'll upload a new

image from my computer I'll use this

photo of the beach once I select the

photo WordPress will ask me to crop it

to match the aspect ratio that looks

good now we just need to update our

footer template to actually output that

image source so back in our text editor

let's jump into footer dot PHP remember

we set up this empty div column for the

image so within that div let's create an

image element let's fill out the source

attribute to do that will drop into PHP

and we want to echo out the result of

git theme mod the name of the image

setting is lwp

footer call out image now on its own

this function will return a numerical ID

value for the image or media object that

we just uploaded but in this case for

the image source attribute we don't want

an ID number we want the actual URL to

the JPEG file so what we can do is wrap

this function within another function

named WP get attachment URL be sure to

add the extra closing parenthesis here

let's save this file and refresh the

admin panel and there's the image and

finally before we bring this lesson to a

close what if the admin user decides

that they don't want to display this

footer box at all so to address that

let's create one final field that asks

the user do you want to display this

section and then they can choose between

values of yes or no so to set that up

back in our text editor let's jump into

functions PHP and let's scroll up to the

top of the section that we've been

working on in this lesson so here's the

comment that we added to stay organized

and here is our main overall function

just below that here's our first pair of

a setting and a control let's go ahead

and copy and paste this setting and

control pair and then let's add a few

new lines above that pair

and paste our clipboard in let's update

the setting name from headline to let's

just call it display it controls whether

the user wants to display the section or

not let's set the default value to no

next let's update the control variable

name from headline to display

let's also update the label to display

this section question mark section can

stay the same let's update settings from

headline to display and most importantly

let's add another property that tells

this control what type it should be so

type equals a select element a drop down

and then we want to add another property

that lists the available choices so

let's create an array of choices the

first option is no which will have a

value of no and the second option is

obviously yes so that's the label and it

has a value of yes let's go ahead and

save this file and then jump in to our

footer dot PHP and we only want to

display this footer call-out content if

the user answers yes to that display

field question so let's just wrap this

entire bit of content in a PHP if

statement so drop into PHP only if the

value of get theme mod remember the

field name was lwp footer call-out

display so only if the value of that

equals yes do we want to display any of

this markup so let's add an opening

curly bracket here and then this is

where the content ends so on this line

let's drop into PHP again

and close out that curly bracket and

that will do the trick so let's save

this and refresh in the admin panel here

is the new field so by default it's set

to no and we no longer see the footer

box but as soon as we set this to yes we

see that the footer box is displayed

once again perfect

and that's actually

going to bring this lesson to a close in

our next lesson we'll learn how to

create and about the author box for

single blog post and page screens should

be a lot of fun to set up and I'll see

you then

I also want to let you know that just

last week I published a new video course

the purpose of the course is to bridge

the gap between a basic understanding of

HTML and CSS and the skill set that

employers are looking for when hiring

web developers I've pasted the tempo of

the course so that just about anyone can

follow along the only prerequisite is

basic HTML and CSS knowledge and here's

what we are going to learn get in github

so we can collaborate with other

developers nodejs tools like NPM and

gulp you may already have a strong

understanding of CSS but we are going to

take it to another level mobile first

performance so our sites will load super

quickly javascript will cover es6 basics

and how to use tools like babel and web

pack we'll learn about the basics of

object-oriented programming with

JavaScript and we'll also cover the

popular module pattern finally we'll

talk about jobs how to get more

interviews how to interview well and how

to continue progressing in your career

if this sounds like something you're

interested in there's a link to the

course in the description if not as

always stay tuned for more wordpress and

web development tutorials

Related Videos

Be the first to comment “WordPress Customized Editable Theme Content material (Picture & Textual content) Tutorial”

Your email address will not be published.

There are no comments yet.