learning Become a WordPress Developer: Unlocking Power with Code > WordPress learning

WordPress

Learn how to use WordPress.

learning | Become a WordPress Developer: Unlocking Power with Code

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
learning님의 WordPress learning강의 청각장애인을 위한 자막
15777710279828.jpg

 



hello everyone this is the first three
hours of my 26 hour premium WordPress
course I hope this helps you get started
learning and experimenting with
WordPress have fun and I'll see you
around if you want to unlock the full
power of WordPress by learning about
code you've come to the right course
because I've spent the last 12 years
living and breathing WordPress PHP and
JavaScript and now I'm here to teach you
everything I know
here's a quick summary of what we are
going to learn we are going to create a
completely custom interactive site for a
fictional university in order to do that
we need to learn how to install
WordPress on our personal computer so
that we have a private playground of
WordPress to practice with the very
basics of the PHP language which is what
powers WordPress how to code a brand new
theme how to create custom post types so
beyond just blog posts and pages we will
set up post types like professors and
campuses and events and programs or
majors how to create relationships
between different pieces of content so
for example we can associate a professor
with the matching programs or majors
that they teach how to create an
interactive map powered by our campus
posts how to create a JavaScript powered
live search feature we will allow open
registration so anyone can visit our
site and sign up for a basic account we
will leverage the WordPress REST API to
create a my notes feature as well as
another feature that lets users like or
Hart a professor in real time on the fly
and much much more now I would love to
have you come along on this journey with
me and if you're ready to launch your
career as a wordpress developer I will
see you on the inside
hello everyone and welcome to the course
in this video I want to give you a
bird's eye view so you know what to
expect big picture the goal of this
course is for you to learn how to code
completely custom websites with
WordPress we are going to build the site
together for a fictional University and
along the way we will slowly but surely
become a wordpress developer first I
will have you install WordPress on your
personal computer so that you have a
private playground copy of WordPress
that you can practice and experiment
with next we will take our first look at
the PHP programming language this is
what powers the core of WordPress but
don't worry you don't need any prior
experience with PHP after that we will
learn how to code and create a brand new
theme after that we will learn how to
create custom post types there is an
entire world of WordPress beyond just
posts and pages for example let me show
you the admin dashboard for our finished
product in this course in my sidebar we
see posts and pages just like in a
normal WordPress installation but I've
also got campuses and events programs
professors notes
likes and each of these post types has
its own unique set of fields instead of
just a generic title and body field so
for example if I click on professors and
then if I click to edit my professor
named dr. barks-a-lot yes we do have the
generic title and body field but we also
have page banner subtitle and page
banner background image which if we view
this post on the front end those fields
control this background image that is
unique to just this professor page here
we see the page banner subtitle just for
this one professor and also if we scroll
down a bit we see this related programs
field
so in this left-hand column you can
choose from the
different programs or majors that are
available at this school and you move
them over here to say which one this
particular professor teaches and then
this relationship between professor and
program gets reflected on our front end
so on this professor page if I scroll
down we see subjects taught biology this
allows us to create relationships
between different pieces of content and
this opens up all sorts of possibilities
so for example if I click on campuses up
in the header we've got this interactive
Google map with pins on it and each pin
is a campus post so for example we've
got our downtown West Campus and if I
click on that it takes me to that detail
screen for just this one campus and if I
scroll down we can see programs
available at this campus math so long
story short custom post types and custom
fields allow us to programmatically
relate different content together in
really compelling ways ok after that
section of the course we will move on to
learn about JavaScript our first big
JavaScript project in this course is to
power our live search results so for
example I can either press the s key on
my keyboard s for search or just click
this search icon up in the top right and
that opens up this full screen
transparent overlay and my cursor is
automatically placed in this search
field so I can just start typing for
whatever I'm searching for and on the
fly in real time we get our search
results and not only that but they are
organized by the content type so I
searched for biology here we have any
related blog posts or pages programs
professors related campuses and even any
upcoming events that have to do with
biology now there's really two main
aspects to the JavaScript here part one
is the JavaScript to power the actual
user interface
right opening and closing the overlay
and responding to click events things
like that and then the other aspect of
the JavaScript is actually communicating
with the WordPress server on the fly in
real time right because when someone
searches for something we need to send
that search string to the server and
then on the other hand we also need to
receive this incoming data from the
server and all of this needs to happen
in real time so this is a great exercise
to learn all about JavaScript I think
you're gonna love this portion of the
course just a bit of a spoiler the
WordPress REST API is what makes all of
this possible and very elegant to set up
ok then in the next section of the
course we will learn about user roles
and permissions so if you want to have
multiple people help maintain the
website you do not need to give everyone
administrator access so for example if
you wanted to invite a friend or a
co-worker and the only thing you wanted
them to be able to do is manage the
event post type you could set that up or
if you wanted someone to be a campus
manager you could restrict them to only
be able to change those type of posts or
you can mix and match different
permissions maybe someone should be able
to post into the blog and manage
programs but that's it the possibilities
are endless and learning about roles and
permissions will really open up new
collaboration doors moving on in the
next section of the course we will allow
open registration so for example if I
log out I'm currently signed in with my
admin account but I can click logout and
then if I visit the website again you
can see that if a stranger visits the
website they can log in or even sign up
so with open registration any random
visitor can sign up for a basic account
and once someone with a basic account
signs in that gives them access to two
new features the first feature is my
notes and in this portion of the course
we really see
our teeth into the WordPress REST API we
basically create our own mini single
page application so if a student brings
their laptop into a lecture hall they
can take a note biology note number five
and take a few notes right lorem ipsum
class was amazing
click create note on the fly it gets
added here and saved into the database
they are free to create another note
math note number one did you know that
two plus two equals four it's true go
ahead and click create okay and then
from their existing notes they are free
to make edits they can click this to
change the title click Save all of this
gets saved into the database on the fly
and they can also delete one of their
notes in real time the other feature
that basic logged-in users get has to do
with liking a professor so maybe if I
navigate to the doctor barks-a-lot
professor page you'll notice this little
heart box currently it says 1 to
indicate that one other person has liked
doctor barks-a-lot and notice the heart
is hollow but if I click on it the heart
fills in to indicate that I personally
have liked this professor and you can
see their light count went up by one and
thanks to JavaScript and the rest api
all of this happens on the fly so if I
immediately decide that actually I don't
like this professor you can just click
it again to toggle or remove your like
and all of this data is getting saved
into the WordPress database after this
section of the course I show you how to
push or deploy your website live up onto
the web so that the entire world can
view it and if you don't have a web
hosting account to practice with that's
okay this course gives you access to a
free three-month educational hosting
plan and it really is free in the truest
sense of the word
you do not even need to enter a credit
card or any form of payment so there's
no way they can automatically bill you
at the end of the three months okay so
that way everyone has access to a web
host so you can practice deploying a
site live and it's not mandatory but if
you're familiar with the git version
control system you are really going to
love the automatic get deployment setup
that I can show you and finally we end
the course with a few extra credit
challenges so there's the bird's eye
view of the course I'm really excited to
get things rolling my goal for this
course is to give you lots and lots of
small victories each time we finish a
small little feature or section and
things work the way we want them to I
want you to relish that small victory
because each time we write code and
accomplish something with it we are
moving closer to our career goals and
that's something to feel good about so
let's get some momentum rolling let's
get things started and most importantly
let's become a wordpress developer hello
everyone in this lesson we will answer
the question where do we begin so
whenever I'm helping someone learn
WordPress development I always say that
the first step our first priority should
be setting up a dev environment for
ourselves so that we can work locally
now don't worry I do not expect you to
know what that means
in order to explain what that means
let's ask ourselves two new questions
what in the world is a dev environment
and what does working locally mean let's
start with a dev environment the best
way to explain what it is is to begin
with its opposite the opposite of a dev
environment is your real website that
the entire world can see so in the past
you might have purchased a domain name
like your own dot-com org and you might
have also purchased a web hosting plan
and used WordPress to create a website
in the industry we refer to that real
website that the entire world can see we
refer to that as your live environment
or your production environment
on the other hand a dev or development
environment is a separate copy of your
website that is usually configured so
that only the owner or developers of the
website can see it so a dev environment
is a private safe sandbox or playground
to experiment in and no one from the
general public can see your
work-in-progress website ok so that's a
dev environment now let's answer our
other question which is what does
working locally mean so local is the
opposite of the cloud local refers to
your personal physical computer so for
example right now I want you to picture
two things number one your personal
computer and number two a server that
lives a thousand miles away from you now
the files that make up a website usually
live on a server that a web host company
maintains the web host company leaves
that server computer on 24 hours a day
seven days a week so that people can
access your website around the clock and
that means that WordPress and our web
sites usually live on a server not on
our personal computers however it is
possible to install WordPress on our
personal computers and that will allow
us to create WordPress websites even
when we don't have an internet
connection now granted these won't be
real websites because no one else can
view them it would be like saving a word
processing file to the desktop of your
computer you're the only person in the
world who can view that word processing
file because it lives on your physical
computer ok but long story short that
process of working from your computer
instead of connecting remotely to a
server somewhere that process is called
working locally now if we put these two
things together if we work locally
within a dev environment it creates the
perfect conditions
for coding custom websites because if we
make a typo while coding it won't be a
big deal because no one will see the
error messages except for us all so we
won't need to constantly upload new
files to a server because anytime we
save a file on our computer our local
private websites are just immediately
instantly updated and then only when
we're finished coding our website only
then do we push our files up to a real
public web server for the whole world to
see ok so if we want to work locally we
need to install WordPress on our
personal computers but that's a bit
trickier than it may sound so here's a
metaphor or an analogy for you if we had
a tree that we wanted to plant we can't
just throw that tree anywhere right we
can't just throw the tree on cement and
expect it to live and grow a tree needs
a particular environment it needs an
environment with soil water and sunlight
well it's the same thing with WordPress
we can't just plant WordPress anywhere
on our computer WordPress needs an
environment with the following three
things number 1 PHP number 2 Apache or
nginx and number 3 my sequel or Maria dB
now don't worry I do not expect you to
know what any of those things are but
for now just know that our personal
computers need to have these things in
order for WordPress to run now most
computers do not come pre-installed with
these things so we need to go out and
get them but luckily these three things
are completely free and there are lots
of different tools out there that will
automatically install all three of them
for us right so all of the tools listed
on the screen right now they are free
and they all do the same thing they give
us the metaphorical soil water and
sunlight that WordPress needs in order
to run on our computer so we don't need
all of these tools we just need one of
them now if you've dabbled with
WordPress development in the past you
might already have one
these tools installed on your computer
if that's the case you can keep using it
you do not need to install another one
but if you're brand new I don't want you
to feel overwhelmed with all of these
choices so right now
why don't we install local by flywheel
together step-by-step this is my
favorite tool of the bunch and it's
super easy to use so in a new tab in
your web browser search for local by
flywheel as of this recording the
official URL is local dot get flywheel
com
okay then go ahead and click the big
free download button and proceed to
download the software you might have to
enter your first name or an email
address or basic info but the software
is completely free you will not have to
pay even a penny the download file is a
decent size so it might take a while to
download you might need to go grab a
coffee while you wait but once the
download completes jump into your
computers downloads folder and go ahead
and begin installing the program the
installation process should look
something like this and this could take
up to several minutes so be patient when
it completes it should then give you
this option to create a new site go
ahead and click that we need to give
this new site a name just to follow
along with the course why don't you name
it fictional university personally I've
already created a site with that exact
name so just for this demo I will say
amazing College
let's click continue we can go ahead and
use the preferred default options so
continue again and here you get to
choose your username and password just
choose something that you can remember
and also enter your email address then
go ahead and click add site I'm not
interested in setting up a default
password right now so I just click not
now and this might take a few minutes to
complete but when it does we now have
our own local dev environment copy of
WordPress up and running on our personal
computer so you can just click this view
site button if that's not available yet
you might just need to start your
website up in the top right corner but
once it's up and running just click view
site and here we have a brand new
completely fresh copy of WordPress up in
the address bar you can see that it gave
us our own fake local dev domain it
basically told our computer that if we
visit this domain instead of looking out
onto the Internet just look within our
own personal computer and this means
that you are the only one in the world
that can view your website if you shared
this domain with a friend or family
member they would not be able to see
your website yet cool so you've got your
own private playground copy of WordPress
that you can experiment with if you want
to log in as the admin of the site up in
the address bar at the end of this
domain just add slash WP dash admin
press enter enter the username and
password you chose just a moment or two
ago cool and here's your typical
WordPress admin dashboard now let's
pretend you've been working and
experimenting for a while and you're
done for the day to shut things down
just jump back to the local by flywheel
application we can click stop site up in
the top right corner ok and then you're
free to close the program now let's
imagine it's the next day and you're
ready to start working on your WordPress
site again just open up local by
flywheel
it could take several minutes to load
but once it does just click on your
website that you've created here okay
and then in the top right corner we just
need to click start site cool so now
it's running again so now back in your
browser you're free to use your website
again you might need to refresh and
remember that if you forget this URL you
can always just click view site right
here okay now there's only one more
super important thing that I need to
tell you right now before we move on I
want to show you where on your computer
your new website files actually live so
right here where you see your website
listed if you right click on that if
you're on a Mac you can choose reveal in
finder if you're on Windows it will say
show in folder or something similar
basically we're looking for the folder
or directory where the website lives so
click on that option and that will show
you the folder for the current website
that you're working on if you're
wondering where this lives it's inside
your user accounts home directory if
you're on a Mac within your home folder
you will now see a brand new folder
named local sites right and that
contains our projects if you're on
Windows you will have a new folder named
local sites within the base of your main
user folder so it would be sitting
alongside your downloads folder okay now
before we bring this lesson to a close I
want to show you where the actual
wordpress files themselves live so
within local sites within our project
folder dig into app and then public and
here we are we are going to be spending
a lot of time in this folder in this
course these are the system files that
actually power WordPress perhaps the
most important folder is named WP -
content if you look inside it we see
another folder named themes and inside
there is a folder for each theme
that you have installed now in this
course we are going to be creating our
own brand-new theme so very shortly we
will be setting up a new folder here and
that's where we are going to do a lot of
our work now at this point give yourself
a pat on the back because you've
completed the first step towards
becoming a wordpress developer you now
have a local dev environment but
remember that not everyone in this
course is using this same local by
flywheel setup so before we bring this
lesson to a close I just want to stress
one thing to you and that is that even
if in future lessons
my screen doesn't look exactly like your
screen that's ok and even if I'm working
in a slightly different folder like
personally in my case my websites live
on my desktop right in this lower case
local sites folder that's not important
so just know that throughout the entire
course when you hear me say that I want
you to jump to your project folder or
your WordPress folder or your theme
folder just know that you are in the
right spot for you I just want you to
open up your project within your local
sites folder jump into it then jump into
app then jump into public ok this is
really the only folder that you need to
worry about throughout the entire course
I'm usually going to tell you things
like now I want you to jump into WP
content cool now that's gonna bring this
lesson to a close and now that you've
set up a local dev environment for
yourself we can really start learning
how WordPress works in our very next
lesson we are going to get our first
taste of PHP which is the language that
powers the heart and soul of WordPress
this is going to be a lot of fun so
let's keep things rolling and I will see
you then
hello everyone in this lesson we will
get our first taste of PHP which is the
language that WordPress is written in
now working with a programming language
might sound intimidating at first but
that's why we're going to walk through
this together step by step at a nice
pace
so without further ado let's get started
okay in our previous lesson we set up a
local dev environment copy of WordPress
for ourselves and now the question
becomes how and where can we get our
first taste of the PHP language well in
our previous lesson we also learned how
to find the files and folders that power
this site so for example if you're using
local by flywheel you can just right
click on your site right here and choose
reveal and finder or if you're on
Windows it should say show in folder or
open Explorer or something similar to
that go ahead and click into that folder
then click into app then click into
public and these are the WordPress
system files that power your site now
before you and I worry about doing
anything useful like maybe creating our
own brand new theme before we get to
that let's first start simple for now
let's just create an experiment file in
this folder where we can try a few
simple tests and dip our feet into the
PHP waters now it's important to point
out that you cannot use a word
processing program to create a new PHP
file or make edits to an existing PHP
file instead you need a dedicated text
editor program now most computers do not
come with a text editor program out of
the box but luckily three of the best
text editors in the world are free to
download and use so if you don't already
have a text
program on your computer I recommend you
download one of the following three the
first is sublime text this is the text
editor that I will be using throughout
this course so if you want to use the
same program as me this would be the
choice for you however there are tons of
different text editor programs out there
and at the end of the day it doesn't
really matter which one you choose they
will all work perfectly for editing PHP
code ok so aside from sublime text
another great option for a text editor
program is visual studio code and
another great free option is the atom
text editor and again you do not need to
download all three of these any one of
them will do the trick so just pause the
lesson right now and go ahead and
download and install one of these three
text editors okay and at this point in
the lesson I will assume anyone watching
now has a text editor ready to use so go
ahead and open up your text editor
program and if you don't already see an
empty screen where you can begin typing
just click on file new or if you're on
Windows you can usually just press ctrl
N or if you're on Mac you can press
command n to get a new file okay so in
this blank canvas
why don't we type out this is a test
okay then let's go ahead and save this
as a PHP file into our WordPress system
folder so click file save or ctrl S or
command S and we need to save this file
into a very specific location we want to
save it into that folder where all of
the WordPress system files live so
within your user account home folder
click into local sites then click on the
name of your site then app and then
public ok and this is that same
directory that we've already seen twice
now with the different WordPress files
and folders so let's save our new file
into this folder in the name of
new file only matters in the sense that
we don't want to overwrite any of the
existing wordpress files so why don't we
name our new file experiment and this is
the important part dot PHP so save it as
experiment dot PHP cool so now in that
same folder with all of the wordpress
files if i scroll down to the bottom
there is our brand-new little experiment
PHP now let's try to view this in the
web browser so back in your browser if
you visit your local dev environment
copy of WordPress write your URL might
be a bit different if you're using
flywheel remember you can always use the
view site button but at the end of this
URL add-on make sure there's a forward
slash and add-on experiment dot PHP
press enter and you can see we are
viewing that brand new file that we just
created now I want to point out that
this is not how you add new pages or
URLs to a wordpress website so you would
never do this in the real world on a
live public web site we are only doing
this for educational and testing
purposes at the end of this lesson we
are actually going to delete our
experiment PHP file however for the time
being this is a great place to try and
write our first bit of PHP code so why
don't we jump back into our text editor
and let's delete the this is a test
message and instead let's write a tiny
bit of HTML so we can then see how PHP
fits into the equation so just as a test
let's create a heading level one HTML
element and say this page is all about
Brad and then maybe right below that I
want a less important headline that
reads all about Brad ok let's save this
and refresh the page
all right so nothing too exciting here
this is just a bit of HTML a heading
level 1 and a heading level 2 but
remember we are not editing in HTML file
we are editing a PHP file so if this is
just HTML
what does PHP look like and what can it
do well check this out maybe on a new
line above this code type this out with
me less than symbol question mark PHP
and then a space and then a question
mark and then greater than symbol so
what does this code mean well this first
chunk that I have highlighted right now
this begins PHP mode and this chunk ends
PHP mode okay so in between those where
my cursor is right now that means we are
in PHP mode now when we are not in PHP
mode like down here right because this
closes PHP mode this code down here is
just regular old HTML but up here while
we are in PHP mode we can write magical
beautiful PHP code so check this out
type this out with me echo echo is how
you output things to the page while
you're in PHP mode so echo and then
let's write 2+2 then let's save this and
refresh in the browser and there we see
for now you might be underwhelmed you
might be wondering what is so exciting
about two plus two equals four well it's
exciting because we could never do that
in regular old HTML HTML doesn't have a
brain you just type out exactly what you
want and that's exactly what you get PHP
on the other hand has a brain it is a
legitimate programming language we can
give it equations we can tell it to talk
to databases we can have it resize
images or send out automatic emails we
can make PHP do just about anything for
us and what's cool is that the general
public that's visiting our website they
don't see our PHP code they only see the
final
product so for example here in the web
browser if we view the source of this
page it's a view page source so here we
can see the HTML code but notice we
don't see 2 + 2 we just see for this is
because PHP is a server-side language
and that means that all of our PHP code
runs on the server and then only the
result of that code not the code itself
gets sent to the visitors of our website
so in other words the server is what's
calculating - plus - not people's web
browsers let's jump back into our text
editor because practice makes perfect
I want to show you that we can jump in
and out of PHP mode as many times as we
need to so for example maybe after this
heading level 1 but before this heading
level 2 so maybe in between those two
lines I want to drop in to PHP mode and
maybe echo out the results of 5 times 5
okay and that'll be sure to close out or
end PHP mode okay and if I save this and
refresh cool so in between the two
headlines we see 25 so back to the code
you can see that in a PHP file we can
seamlessly jump back and forth between
PHP HTML PHP HTML alright now before we
end this lesson I want to have you type
out one more PHP example alright so on
this page you can see that my name is
included twice here and here now imagine
I legally changed my name in the future
I would have to update my name in both
places
now just updating it in two spots isn't
too bad but imagine if the page listed
my name a hundred times or 300 times
updating it in all of those places would
be very time-consuming so it would be
nice instead of having to hard code my
name if we could just include a
placeholder for my name right so for
example if instead of Brad right here it
just said blank and instead of Brad
right here it said blank and then we
could somehow programmatically replace
all of the blanks
my name well there's no way to do that
with regular old HTML but we can do it
with PHP so check this out up here on
this top line right after 2+2 while we
are still in PHP mode let's add a
semicolon the semicolon tells PHP that
we are done with this task and that we
want to move on to a new task so we
could begin typing right here where my
cursor is but just to stay organized I'm
going to drop down to a new line okay
and right now I'm still in PHP mode and
what I'm going to do right now is create
a variable that stores my name so type
this out with me dollar symbol my name
equals quote Brad and then just to be
safe why don't we add a semicolon at the
very end of the line to tell PHP that we
are done with this task now let's go
over this code that we just wrote so the
dollar symbol is how you create a
variable in PHP and then this text that
comes right after the dollar symbol this
doesn't matter what you type I just made
this up there's nothing magical about my
name instead we could have typed unicorn
or pizza right it really doesn't matter
what we type here just as long as it's
something we can remember so this line
of code basically creates a sticky note
in PHP 'z memory with my name written on
one side and then on the back of that
sticky note it says Brad now what's cool
is we can reference this throughout the
rest of our page so now instead of
literally typing out blank here we can
just use PHP to reference this my name
variable so let's delete this first
blank so this page is all about and then
we want to output whatever the value of
my name is so place our cursor here and
then we want to enter into PHP mode okay
and remember echo is how we output
something onto the page when we are in
PHP mode and then we just type out the
variable name so dollar sign my
okay and then let's be sure to close out
of PHP mode cool so on this line we
start out with HTML then we enter into
PHP mode to get that variable value then
we close out of PHP so then we're back
into HTML mode so we can close out the
headline let's go ahead and do the same
thing for this line so let's delete
blank and then instead of typing this
out again let's just copy and paste it
so select this PHP section copy it paste
it right here
okay now if I save this and refresh we
don't see any difference because my name
still equals Brad but now if we change
this variable to equal John Doe and save
cool it gets updated in both locations
now again it's not very impressive
because it's in only two locations but
imagine if your page was way more
complex and that name was referenced
hundreds of times you get the idea and
that's actually going to bring this
example to a close now I do want to
point out that what we just did in this
lesson has absolutely nothing to do with
WordPress this experiment dot PHP file
that we just created is not in any way
connected to the core of WordPress
however WordPress is written in the PHP
language and at this point in the course
you are now familiar with the basics of
PHP right you know how to enter PHP mode
you know how to close PHP mode you know
how to create variables using the dollar
sign and you know how to output content
to the page using echo and with just
that little bit of PHP knowledge in your
tool belt you are now ready to start
writing WordPress code or in other words
you're ready to use PHP to tell
WordPress what to do and this is where
things get fun
so in our very next lesson we are going
to use PHP code to create our own brand
new custom WordPress theme but really
quick Before we jump into that
lesson I want to talk about our
experiment PHP file if everything in
this lesson made sense I encourage you
to actually go ahead and delete our
experiment PHP file you don't need to
delete it you can keep it for reference
if you'd like to I just want to make
sure that you're aware that it's not
normal to have random extra files
sitting in the core root folder of
wordpress like this we only did this for
educational testing reasons so i would
strongly encourage you to delete this
file but it's not going to hurt anything
so if you want to keep it there for
reference that's okay anyways i'm
looking forward to creating a theme with
you in the next lesson so let's keep
things rolling and I will see you then
hello everyone in this lesson we will
begin creating our very own wordpress
theme without further ado let's jump
right into the action okay so in your
web browser go ahead and visit the home
page of your local dev environment copy
of wordpress your local domain might be
different than the one you see on my
screen right now that's not important
but let's go ahead and visit the admin
dashboard of our website you can always
visit the dashboard by going up to your
address bar and at the end of your
domain visiting slash WP dash admin go
ahead and login okay and if we were not
developers one of the first things you
do on a typical WordPress website is
look for a theme that you like right so
you might head over to the appearance
tab and switch to one of the other
themes that WordPress comes with out of
the box or most of the time you don't
want to be limited to just these themes
that WordPress ships with so instead you
might click add new here and then you
could search through the thousands of
free themes or your third main option is
to use this upload theme button in case
you purchased a premium theme from a
party marketplace okay but in this
course we are not going to do any of
that because we are not going to use an
existing theme we are going to create a
brand new theme now I know at first that
might sound scary creating a theme from
scratch but it's not scary because I'm
here to guide you through it step by
step and believe it or not it's very
simple to begin creating a new theme so
for example if I click on the main
appearance tab again here we see all of
our currently installed themes and if we
want to create a brand new theme that
will show up on this screen all we need
to do is create a new folder in a very
specific location so let me show you
what I mean let's go on a little bit of
a trip let's look for the WordPress
themes folder the first step to finding
it is just navigating to that WordPress
system folder we've already looked at
two or three times so navigating to that
folder is a bit different depending on
whether you're using local by flywheel
or MAMP orbit Nami or xampp or vagrant
and VirtualBox but let me walk you
through the local bi flywheel example so
right-click on your site click reveal
and finder click into your folder and
then app and then public okay now
everyone in the course regardless of
what you're using for your local dev
environment software everyone is going
to have these same core WordPress files
now at the moment we are looking for the
themes folder which is located in the
wp-content folder so click in to WP
content and here we see a folder named
themes let's look inside that folder and
here we see one folder for each of our
currently installed themes right so this
2017 folder corresponds with the 2017
theme so if we want to create a new
theme all we need to do is create a
brand new folder in this themes
directory so new folder and we can name
it anything we'd like why don't we call
it fictional
University theme just something along
these lines doesn't have to be exact
okay now all we need to do is create two
new files within this new folder and
then we will have a real theme that will
show up on this screen and that we can
activate so let's go ahead right now and
create the two files that we need what I
like to do is open this entire folder in
our text editor on Mac I can just drag
this folder into my dock onto my text
editor program or once you're in your
text editor program you can just use
file open and there should be an option
to just open an entire folder instead of
a file now you don't need to do it this
way I just find it convenient because
now in my text editor here we have the
sidebar of the folder and I can just
right click on it and choose new file so
I have this completely empty screen but
now if I try to save this my text editor
automatically knows that I want to save
it within that new theme folder that we
just created so what do we want to name
this file well let's call it index dot
PHP okay and what do we want to write
within the file for now let's just add a
bit of placeholder text that reads this
is our amazing custom theme save again
all right so I said we needed to create
two files so we created one of the two
let's create the second file so I will
right click on my fictional University
theme in the side bar and click new file
or you could just use your text editors
file new file option let's save this
okay and what do we want to name the
second file let's call it style dot CSS
now normally a CSS file only has one
responsibility and that's to tell the
webpage what it should look like so you
don't have to type this out because I'm
just going to delete it in five seconds
from now but normally in a CSS file you
would say that like the color of all the
text should be orange right you style
the content on
Paige well we will do stuff like that as
well but in WordPress
this style dot CSS file has another
responsibility WordPress needs us to use
this file to give it a bit of
information about our theme and the way
that we give WordPress that info is up
at the very top of the file here we
begin a CSS comment so slash and then an
asterisk that's how you begin a CSS
comment and then on another line to
close out the comment its asterisk and a
slash ok now between those two lines we
can write whatever we want so first and
foremost WordPress wants to know what
the name of our theme is so let's say
theme name colon and we don't need the
semicolon at the end here and now we can
make up whatever name we want so let's
say fictional university you might think
that we already named the theme when we
created the folder name but in folder
names you usually want to use dashes
instead of spaces so this is our chance
to use capital letters and have spaces
in the name you get the idea now if we
save this file and I want to point out
that it needs to be named style dot CSS
it can't be main dot CSS or screen dot
CSS the name here is very important
WordPress is on the lookout for this
specific file name in our theme folder
okay but with this comment in place and
we save the file if we jump back over to
our admin dashboard and refresh the main
appearance themes screen here we see our
brand new theme and if we hover over it
we see theme details and if we click on
that we can see it looks a bit odd right
it says fictional University and then
version and there's no version number
and also it says by anonymous instead of
our name so to fix those two things back
on our text editor on a new line still
within our comment we can say author
don't need the semicolon but author
colon and then
you can just type in your name here and
then on a new line we can also say
version and then we can just make up a
version number
maybe 1.0 okay so if we save this again
and then refresh our theme screen and
click on it again cool so now we see
fictional university version 1.0 by Brad
now all we are really missing is a
screenshot or photograph or a preview
image of our theme right you'll notice
that all of the other themes have a
preview image here so to add a preview
image to our new theme all we need to do
is go within our theme folder right I
named that folder fictional University
theme and we just need to move an image
file to live within this folder and the
file should be named screenshot dot PNG
now I conveniently have a PNG file
sitting on my desktop here you can find
this same image file in the resources
for this lesson but I'm just going to
move this file into my folder and then
I'm going to rename the file to screen
shot PNG ok because WordPress is on the
lookout for this exact file name and you
can use your own image here instead of
this one ideally you want the photo to
be 1200 pixels wide by 900 pixels tall
all right but with this in place if we
refresh this admin screen again cool so
now this looks like a legitimate theme
it's got a preview photo if we click it
it's got the essential information and
now we can just go ahead and activate
the theme so you can click activate down
here at the bottom or if you close this
out from this screen when you hover over
a theme there's also an activate button
right here okay so let's go ahead and
activate the theme and now if we use
this link up here to view the front end
of our website cool so remember this is
what we typed out in our themes index
dot PHP file so if we go back to our
text editor and jump back into the
themes index dot PHP file maybe I want
to add the word completely here this is
our completely amazing custom theme
save it refresh our website awesome so
now that we have our brand-new theme and
we activated it and we can see it on the
front end of our website here we really
don't have any need for all of these
other default themes like 2017 2016
right our new theme is all we are ever
going to need and since we don't want to
ever accidentally activate one of these
other themes why don't we just go and
delete them right now
so back to the folder structure here's
our theme folder that contains index.php
style and our screenshot if we go up a
level okay so now I'm looking in the
WordPress themes folder we can go ahead
and delete the folders for those other
themes 2015 16 and 17 so just select
them and delete them cool so now if i
refresh this admin screen perfect we
just have one theme and it's the one
that we created
now before we bring this lesson to a
close I want to address a CSS concern
that you might have so if you're the
type of person who experiments with
lessons along the way you might have
already tried to do the following so
back in our style dot CSS file
underneath our comment lines you might
have tried to write a bit of normal CSS
so maybe you would target the entire
page and say color orange but you'll
notice that if I save that and refresh
the website nothing happens we would
expect this text to become orange but
that's not happening so don't worry I
don't expect the CSS to be loading yet I
will show you how to correctly load the
CSS on the front end of your website
very soon okay now having said that
looking forward to our very next lesson
we will learn how to do something
actually useful here instead of just as
boring placeholder sentence we are going
to look at the heart and soul of
WordPress and PHP which is functions if
you have no idea what a function is
that's okay that's actually good because
in the next lesson we are going to start
with the very basics it should be a lot
of fun
let's keep it rolling and I will see you
then
hello everyone in this lesson we will
answer the question what is a function
instead of trying to explain with words
what a function is let me show you
visually what a function is so let's
jump into our text editor and open up
the index dot PHP file that lives in our
theme folder let's try to write some new
code here together so delete this sample
line of text and then let's drop in or
enter into PHP mode so remember from our
first taste of PHP lesson to enter PHP
mode it's less than symbol question mark
PHP and then maybe down on this line
let's close out of PHP mode so question
mark greater than symbol and then in
between those two lines so where my
cursor is now we are free to write PHP
code so remember from a lesson or two
ago we tried echoing out a math problem
right we could say echo two plus two so
if I go ahead and save this and then
refresh my website fictional University
dev here we see the answer write two
plus two equals four okay so that should
jog our memory of working with PHP now
let's have our first look at a function
so let's delete this line and let's
create our very own first function we
don't even know what a function is yet
but let's create one so write out the
word function and then a space and then
we can make up a name for our function
why don't we call it my first function
right the name doesn't really matter
it's up to us to choose a name and then
right after that we don't even need a
space let's just open up a pair of
parentheses and then after the opening
close parentheses let's add a pair of
curly brackets these are the same curly
brackets that you use in CSS so you just
hold down the shift key and then press
the key to the right of your P key okay
and in between the two curly brackets I
like to drop down to a new line just to
stay organized okay and in between the
curly brackets let's write out our echo
to
- again now if I save this and refresh
the browser we do not see the number
four we don't see anything it's just a
completely blank page and that's because
this code here that we wrote is a
function definition so really all we did
here with this code is we took the task
of adding two plus two and we gave it a
name my first function so a function
definition like we have here doesn't
actually do anything it's just a
description of an action or a task in
order to actually run this function
right and actually evaluate two plus two
what we can do is below this function
definition so maybe on a new line like
right here
we just type out the name of the
function so my first function and then
include parentheses and let's include a
semicolon at the end of that line and
now if we save and refresh we do see
four so this is how you define a
function it's like the recipe for the
action that you want to take and then
this is how you actually run or call or
use the function now what's cool is you
can use the function again and again and
again you can recycle that recipe so we
could say it again my first function
save it
refresh it and now we see a second for
this is a little bit confusing because
it looks like 44 but really it's just
the number four and then there's no
spacing and then the number four again
so let's try something a little bit
clearer up in our function instead of
echo two plus two let's delete that and
instead let's say echo out a string of
text so give me double quotes and then
let's create an HTML paragraph tag right
so the opening and closing tag and in
between them let's say hello this is my
first function and let's be sure to add
a semicolon at the very end of this line
to let PHP know that we are done with
this action okay and now if we save this
and refresh cool we see it twice because
we are calling the function twice down
here so you only have to define a
function once and then you can use it
and
use it as many times as you want so if I
copy this and paste it again so there's
three of them obviously we see it three
times okay so now that we've learned how
to create a function and then run or
call the function let's go ahead and
delete all of this and try something a
little bit more advanced so first let's
give ourselves a goal let's imagine that
we want to create these two paragraphs
hi my name is John and my favorite color
is blue and hi my name is Jane and my
favorite color is green
now when I say that we want to create
these two paragraphs I don't mean just
type them out like we see here instead
what I mean is because these two lines
are so similar to each other and the
only unique parts are the names and the
colors why don't we try to create a
single function that can generate both
of these paragraphs so let me delete
these and try this out with me up here
and our PHP area let's create a new
function so to do that we just spell out
the word function and then a space and
now we make up a name for the function
why don't we call it greet okay and then
right after that we don't even need a
space open up a pair of parenthesis and
then after the parenthesis let's open up
a pair of curly brackets and then in
between the opening and closing curly
brackets let's drop down to a new line
and then let's echo or output a bit of
text so we want to wrap our text in
double quotes okay so in between those
quotes let's just begin an HTML
paragraph tag then let's close it out
and in between those we will say hi my
name is blank and my favorite color is
blank and then at the very end of this
line let's be sure to end it with a
semicolon
okay and now right below our function
definition here so down here let's just
call or run the function once for John
and once for Jane so greet parenthesis
semicolon that will run it once and then
let's just run it a second time so if I
save this and refresh in the browser
cool we see the two paragraphs so now
all we
to do is find a way to pass information
about John from this function call into
the function itself right because we
don't want it to say blank and blank so
check this out
when we call the function for the first
time in between the parentheses let's
say John and let's do the same thing for
Jane so in between these parentheses
let's say Jane okay now back up in our
function definition within these
parentheses let's add a dollar symbol
and let's say name remember from an
earlier lesson that the dollar symbol is
how you create a variable in PHP this
isn't a special word I just made it up
we could have said unicorn or Itza okay
the name doesn't matter but for now
let's just call it name because that
makes sense right John and Jane are
names so what this is going to do is
it's going to create a variable of sorts
that we can use within the meat and
potatoes of this function so we can use
this dollar symbol name variable
wherever we see fit so all we need to do
now is just remove this blank right we
don't want that and let's replace it
with dollar symbol name okay now before
I explain what's going on here and give
you the technical names of what we're
doing let's just go ahead and save this
and test it out so if i refresh in the
browser cool hi my name is John and my
favorite color is blank hi my name is
Jane and my favorite color is blank so
let's review what's going on here and
let's build up our vocabulary so when we
call the function down here twice this
little bit of data named John and this
little bit of data named Jane those are
called arguments and within a single
function call like this you can include
multiple arguments so check this out
right after the John and quote let's add
a comma and say blue right because blue
was his favorite color let's do the same
thing for Jane
so after this first argument of her name
let's add a comma and include another
argument her favorite color was Green
okay so if we are calling a function and
giving it two arguments we better make
sure that up in our function definition
we are ready for
two parameters think of a parameter as a
hollowed-out variable or a little
container that can receive the incoming
arguments so we already have a parameter
to receive the incoming name so right
after that let's add a comma and then
let's just say dollar sign color again
the parameter name doesn't really matter
you can make it up you can use whatever
name you want okay but what's important
is that now we can use dollar symbol
color within the body of this function
so let's go ahead and delete this second
blank here and let's replace it with
dollar symbol color let's save this and
refresh cool so we see my favorite color
is blue and my favorite color is green
okay so that's how you can create your
own function and use parameters to
receive the incoming arguments so that
your function can be flexible okay now
let's change gears and bring this full
circle let's tie it back to WordPress so
the beauty of WordPress is that it comes
bundled with tons of its own pre-built
functions that we can leverage right so
WordPress has already created and
defined lots of functions and then we
just get to come along and run or call
or use those functions so for example
down here once we are out of PHP mode
right so this line closes PHP mode so
down here in regular old HTML mode let's
imagine that we want to create a large
HTML headline and we want the contents
of this headline to be our websites
overall name or title
well WordPress has a function that will
give us our website's name so check this
out in between the h1 tags let's drop
into PHP mode okay and then let's exit
PHP mode okay but in the middle of those
two let's run or call a wordpress
function named blog info okay so this is
a function that has already been created
and defined by WordPress and what this
function can do is give us all kinds of
information
about our website and within these
parentheses we just provide an argument
to tell WordPress what little bit of
info in particular we are looking for so
single quotes and let's say name we want
the name or title of our website and
let's add a semicolon right after that
just to tell PHP that we are done with
this task okay and if we save this and
refresh cool we see the name of our
website now in case you're wondering
where this is coming from let's hop over
in a new tab into the admin dashboard of
our WordPress website and towards the
bottom of this left-hand sidebar hover
over settings and then choose general
okay so see this first field named site
title that's the name of our website so
if we change this from fictional
University to amazing University and
then scroll down and click Save now if
we refresh the front-end of our website
we see that name change reflected cool
so this function blog info we didn't
create or define this function WordPress
creates it for us and then we just get
to leverage it now the cool part is that
we don't need to understand how
WordPress goes and talks to the database
to dynamically find the name of our
website WordPress abstracts away all of
those technical database details so we
don't have to worry about it all we have
to do is run this convenient function
okay and that's really the heart and
soul of 95% of custom WordPress
development it's just a matter of
knowing the wordpress functions that are
at our disposal and then running them in
the right place at the right time let's
try one more example before we close out
this lesson so let's imagine that below
this headline we want to include a
paragraph that includes our website's
slogan or tagline or description in case
you're wondering what I'm talking about
back in the admin dashboard on this
general settings screen we see that the
second field is named tagline so by
default WordPress sets this to just
another WordPress website but we could
change this to
the best university in the world okay
and then scroll down and save that okay
and then back in our code if we want to
dynamically output that tagline in
between the paragraph tag let's just
drop into PHP mode and close out but in
the middle let's call that blog info
function again and then we can give it
an argument to tell it which piece of
information in particular we want it to
return and we will say description let's
add a semicolon here and then let's save
this and refresh cool there's our slogan
or tagline and now if in the future we
ever changed the tagline from the
WordPress admin area so if I change this
to we are pretty good and then save it
our front-end web site will
automatically always display that value
okay so now at this point we are at
least a little bit familiar with what a
function is and now there's only one
more topic we need to go over before we
can start doing powerful actually useful
WordPress II things and that topic is
arrays so what in the world is an array
well that's exactly what we are going to
cover in our next lesson I'll give you a
hint
right now though understanding arrays is
what's going to let us start displaying
actual dynamic WordPress content on the
front end of our website
things like posts and pages it's going
to be a lot of fun let's keep things
rolling and I will see you in the next
lesson hello everyone in this lesson we
will answer the question what is an
array so for starters even outside the
context of programming we might hear a
car dealership say that a car is
available in a wide array of colors okay
so let's think of an array as a
collection now with that in mind let's
jump right into the code so here I am in
the index.php file that lives in our
theme folder and why don't we
head and delete all of this test code
from our previous lesson and let's try
something new so if we think back to
that first taste of PHP lesson you'll
remember that we learned how to create a
variable so let's try that again so I
will go into PHP mode down here I will
close out of PHP mode and then to create
a variable you just use the dollar sign
and maybe I want to create a variable
that stores my name so equals bread this
variable name isn't special I just made
it up it could be unicorn or pizza okay
but the idea here is that I'm setting
this variable to have a value of Brad
and now I can use that variable anywhere
else on the page so maybe down here once
I am back in HTML mode I could create a
paragraph that says hi
my name is and then maybe drop into PHP
mode so I can echo out that my name
variable okay and then close out the
sentence with a period and then close
out the HTML paragraph tag okay so if I
save that and test it hi my name is Brad
so this is an example of a very simple
variable that only contains one single
little bit of data right just one single
name however what if we want it to store
multiple names within a single variable
so that's where arrays come into the
picture so check this out let's start
over again
so let's go into PHP mode and let's
imagine that I want to create a variable
named names right plural now the name of
the variable doesn't matter so this
could be pizzas doesn't matter I just
chose names to try to indicate that I
want to store multiple values right
plural so what does our variable equal
well we can say array okay and now
within these parentheses right after the
word array we can store as many names as
we want so check this out I could say
Brad comma John comma Jane comma me
house a lot you get the idea I can store
as many names as I will
so in PHP an array is a special type of
data an array is a collection of
multiple values okay and let's imagine
that down here in HTML mode
I want to access one of these names so
maybe I have an HTML paragraph tag and I
want to say hi my name is blank
right so I would drop into PHP to access
our variable so if I want to echo out
something that lives in the names
variable okay and then to look inside
the array or look inside the collection
right here we can use square brackets on
your keyboard this is directly right of
the P key okay now let's say for example
that I want to access the first value in
this array so Brad I would just include
a zero within the

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu