learning WordPress Custom Editable Theme Content (Image & Text) Tutorial > WordPress learning

 

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 1.7 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 0.35 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
0.9 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
footer.php 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 functions.php 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 node.js 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