Transcripts
1. Welcome to the tutorial: Hello guys. Welcome
to this tutorial. My name is Raimundo and I'm going to be your instructor
in this tutorial. Well, I've been a web developer
over the last ten years. And well, over the
last ten years, I've been working with different technologies
like JavaScript, HTML, CSS, React JS, no JS, and also Wordpress,
for instance. I have plenty of experience
regarding web development. One of my favorite one of my favorite topics is obviously
WordPress development. Well, in this tutorial, you are going to create your
very first wordpress plugin. We are going to cover
several topics, all of them very interesting. For instance, you're going
to understand how to configure a basic
wordpress plugin. You are going to see how
to use custom pose types. You are going to understand what custom pose types are used for. You are going to
create or configure the user interface so that you can enter or introduce
data into the Wpress database. You are going to be able
to understand how to add dependencies or frameworks
to the Wpress plugging. You are going to see how
to create a template, a Wordpress template or HTML template so that you can display data
to the web browser. And also you are going to
understand other things. As you can see, this tutorial covers an array of very
interesting topics. So I suggest you take this
tutorial because it is a very, very interesting tutorial
and the duration of this tutorial is only 1.5 hours. Essentially, you
are going to cover all of these topics
in a few minutes. Well, I hope you enroll
in this tutorial. And see you very soon. Bye.
2. Lesson 1 - Creating the root folder of the project: Okay, guys, thanks for
watching this video. Well, in this lesson, I'm going to show you how to create the root folder
of your project. In other words, I'm
going to create the root folder for
the WordPress plugin. The first step that I have to take is heading over
to the terminal, and then I have to navigate to the WordPress
installation folder. I'm going to use the command City and then I have to specify the pad to the folder which contains the WordPress
installation files. Then I have to navigate the
plugin to the plugins folder. And then I'm going to
create I'm going to create new I'm going to create a new folder or the
root folder of the project. So I have to use the command to make dear and then the name of the root folder is going
to be Cars plugin. And then I have to move inside
the newly created folder. Like this, I have to
city and then I have to specify the name of
the root folder. And then I have to
create a new file. This file is going to be the
main file of the plugin. And the main file of
the plugin has a name, and the name must be equal to the name
of the root folder. So I'm going to
type in Touch and then cars plugin dot PHP. This file is the main file of the plugin or the entry
point of the plugin. Then as you can
see, the main file of the plugin has been created. And well, that's it
for this lesson. Now you know how to create the root folder of the project, as well as the entry point for the source code or the entry point for
the WordPress plugin. That's it for this lesson and
see you in the next lesson.
3. Lesson 2 - Creating the Header comment: Hello guys. Welcome to another
lesson of this tutorial. Well, in this lesson,
I am going to create the header
comment of the plugin. The header comment
for the plugin is a comment where I have to provide metadata
about the plugin. And this comment is necessary
because this is the comment which indicates WordPress that the current program is a plugin. Okay? So in order to create the header
comment of the plugin, remember that Bhador comment
is the place where we are going to provide metadata
about the plugin. Okay? Okay, so now I
have to head over to the entry point of the plugin. In other words, I have to open the cars plugin dot PHB file. Remember that this file
was created earlier, and right now I am inside the
cars plugin dot PHB file. So I'm going to enter the
Bhador comment, as I said, first, I have to add a new comment section
at the top of the file, and then I have to
type in a plugin name. And in this case, the name of the plugin is going
to be cars plugin. I have to provide a description. I have to provide a
description for this plugin. This description appears
in the plug in screen. So the description is
going to be this plugin displays data about cars
with special layout. And then I have to specify, I have to provide the
outdoor of this plugin. In this case, I'm going to place my name as the value
for the outdoor field. And then well, well, this is all you need in order to create a header comment
for the plug in. You also have other
fields available, but those fields are described in the
Wordpress documentation. But in general, in general, if you want to create
a header comment, then these are the
fields that you need to provide so that the header
comment is up and running. Okay? So these are
the minimum fields or the minimum pieces of
information you have to provide in order to
create a header comment. Well, that's it for this lesson and see you in the next lesson.
4. Lesson 3 - Activate plugin: Hello, guys. Welcome to another
lesson of this tutorial. Well, in this tutorial,
in this lesson, sorry, I'm going to activate the
plugin we are creating. Well, in order to
activate the plugin, I have to head over to
the WordPress dashboard. As you can see right now, I am inside the
WordPress dashboard. Now I have to head over
to the plugins screen. As you can see, this
is the plugin screen, and I have to look for the
plugin I am working with. Okay? So as you can see, here appears the cars plugin
listed on the screen. And as you can see, this is the plugin we've just created. As you can see, here appears a description of the
plugin that says, these plugin displays data about cars with special layout. So in order to
activate this plugin, I have to press
the activate link or I have to press
the activate link. So I press the activate link. And as you can see, the page is loaded and a confirmation
message appears at the top, at the top of the screen that
says, plug in activated. And well, that's it
for this lesson. Now you know how now you know
how to activate a plugin.
5. Lesson 4 - Adding a new file to the project: Hello, guys. Welcome to another
lesson of this tutorial. Well, in this lesson, I am going to create
a new sub directory, as well as a new PHP
file for the project. I have to head over to the
root folder of the project. And as I just said, I'm going to create
a new subdirectory. The name of the new sub
directory is going to be back end and then inside the
newly created subdirectory, I'm going to add a new PHP file. The name of the new PHP
file is going to be cars post type dot PHB. That is going to be the name, the name for the new PHP file. Well well and then I'm going to include the newly created
PHP file into the project. So I'm going to call the
function required ones, and then I'm going to use the constant WordPress
plug in dear. This constant contains the
path to the plugins folder. And then I'm going to specify the pad to the newly
created PHP file. I have to type in the
name of the root folder. In this case, the name of the root folder
is cars plugging. Then I have to specify the
name of the subdirectory. In this case, is back end. And then I have to specify
the name of the PHP file. In this case, cars
post type. Dot PHP. Well, as you can see, I just added a new PHP file
to the project, and then I included
the contents of the file into the project. Okay? So I add I
created a new PHP file, and then I include
the contents of the new PHP file into the project by calling the
function required once. And well, that's
it for this lesson and see you in the next lesson.
6. Lesson 5 - The init action hook: Hello, guys. Welcome to another
lesson of this tutorial. Well, in this lesson, I am inside the cars
postype dot pHB file. Well, essentially, we are going to add this code
SNIP to the file. So as you can see, I'm going to add this code SNIP and as I introduce the code, I'm going to explain to you
what the code is doing. Okay? So first,
you have to enter. You have to call the
ad action function. The add action function is
called to implement hooks, and hooks are used to run a specific code for specific moments or specific
locations of the site. The ad action hook is
called to execute or to run a specific code
at specific moments. This function requires
two parameters. The first parameter is
the name of the hook. In this case, I'm going to
use the init action hook. The init action hook
enables me to run code when the
webpage is loading. Okay? So the init action
hook is useful to run code when the webpage
is loading, ok? Then the second parameter is
the name of the function. That we want to run. In this case, the name
of the function must be prefix to avoid collisions
with other functions. Then in this case, the name of the function is going to be register cars host type. And then I have to
declare the function. So I type in the name
of the function, register cars pose type. And well, this is the function
which is going to run. This is the function
which is going to be run for the imit action hook. In other words, this
function will be run each time a
webpage is loaded. Well, that's it for this lesson and see you
in the next lesson.
7. Lesson 6 - Register a custom post type: Hello, guys. Welcome to another
lesson of this tutorial. Well, in this lesson, I want to analyze the code SNIP which appears
on the screen right now. Well, I'm going
to explain to you this code SNIP as I
introduce the code again. So I'm going to talk to you. I want to talk to you about
the the custom pose types. First, I have to talk to you
about the custom pose types. And well, I have to say
that custom post types are the means provided
by Wordpress so that you can save information into the database with
a specific format. Okay? So if you want to save information into the database with
a specific format, then you have to create
a new custom post type. By default, Wordpress provides three different pose types. One is attachment for the image files or
pictures or even videos. Other pose type is pages for
the web pages of the site. And finally, another
default pose type is post, which is used to save the different posters
into the database. So Wordpress provides
three default Post types. But Wordpress also enables
developers to create Custom Post types so
that developers can save Custom data
into the database. In other words, Wordpress
enables developers to save data into the database
with a specific format. In this case, we are going
to use a custom post type to save data regarding cars. Okay? Because this plugin is to save to save data related
to cars into the database. So I'm going to create in order to create my
custom post type, I have to call the function
register post type. This function requires
two parameters. The first parameter is the
name of the custom pose type. In this case, the name of the custom pose type is my cars. My cars. And then I have to
specify a second parameter. The second parameter is an array of arguments
or settings. So in this case, the array of settings is represented by the
variable arcs, above the register pose
type function call, I'm going to declare the variable arcs and I'm going to set this
variable to an empty array. Okay? So as you can see, I am calling the register
pose type function. To create a new custom
pose type called My cars. This customs custom
post type will be used to save Cars data
into the database. And then the ARC's variable
contains an empty array. This array will contain all the settings for
the custom pose type. And well, that's it for this lesson and see you
in the next lesson.
8. Lesson 7 - Setting up UI labels: Guys, thanks for
watching this video. In this video, I'm
going to cover how to configure the labels
for the user interface. And well, when a custom
pose type is created, then Wordpress generates a
corresponding user interface. The user interface is used by the user to introduce
information, and then the information is
saved into the database. So essentially a user
interface is made up of different elements
like Buttons, text fields, drop down list and and strings of texts which
are known as labels. So in this video, I'm going to cover how to
configure the labels, okay? So if I scroll up, you can see that here
I have a sample code which demonstrates how
to configure the labels. So essentially, I have
to declare a constant, and then the constant, sorry, I have to declare a variable, and the variable must include must be set
to an array, okay? So I'm going to declare
the variable labels. And I'm going to set this
variable to an empty array. Then inside this array, I have to place the
different labels. For instance, Wordpress
requires a label called name. And the label name contains the plural version
of the information. The label name contains
the plural version of the name of the information which will be saved
into the database. The plural version
of the information which will be saved
into the database. In this case, the
plural version of the information
will be cars, okay? Then I have to use the label
singular underscore name. Singular underscore name. This variable is
used to indicate the singular version of the information which will
be saved into the database. In this case, the singular
version will be car. Then I have to use
the label menu name. Menu name is the menu name is the label which will be used in the menu item for this
custom post type. In other words, the menu the menu name label
will be used to display the text for the menu item corresponding to
the user interface for this custom pose type. So the menu name label will
be equal to cars, as well. Well, Wordpress provides
more labels, many labels. But in this case, I just want
to implement three of them, but there are more
labels available. Well, that's it for this lesson and see you
in the next lesson.
9. Lesson 8 - UI settings: Hello, guys. Thanks for
watching this video. Well, in this lesson, I am going to cover how to
configure the register, how to configure a
new custom pos type. Remember that in order to configure a new
custom pose type, you have to call the
function register post type. The function register post type requires several
parameters or settings, and those settings must be located inside the
arcs variable. So here I have a sample code, and this sample code contains all the settings for
the arcs variable. As you can see, the settings
are located inside an array. So I'm going to explain to you the settings as I introduce
these settings, okay? So the first setting
will be labels. Remember that in the
previous lesson, I created the labels, and those labels are saved
into the labels variable. Then I have to use
this setting public, and I'm going to set
this option to true. And I want this option to
be set to true because the cars information will be available to everyone
who visits the website. That is the reason why I set
the option public to true. Then I have the set in a
Archiv set to true as well. So I type in a Archiv. And I'm going to set
this option to true. The H Archive option
is used to generate a web page where all the cars will be
displayed as a listing. So the H Archiv option set
to true is used to generate a web page where the user can access all the
cars available, like a listing, like a
listing of cars, ok? Then I have the option
show in rest set to falls show in rest set to falls, show in rest set to fails, okay? And well, it's important
to mention that Wordpress provides RSt API. In other words, we can
consume the formation of the site by using a RSt API. If I set the option, show in rest to falls, that means the cars information
won't be available. Won't be available
in the rest API. In other words, we won't
be able to consume the cars information
by using the REST API. Okay? So this option disables the RST API for
the cars information. And then I have to use the
setting menu icon, menu icon. Menu icon. I'm going to set this
information to dash icons. Car. Well, the option menu icon is used to display an icon
for the menu item. In this case, the keyword
dash icons car is used to display a tiny car as the
icon for the menu item. And then I have to include the option supports supports and the option supports is used to specify the user
interface elements that we want to include
into the user interface. The supports option
is used to indicate the elements which
are going to be displayed within
the user interface. So in this case, the elements
will be a text field for the title rater to introduce the full description
of the guard a tooth nail a tomb nail will be used to display
a section within the user interface where the user can upload a
picture of the cache. And the custom fields option
is used to display a section within the user interface
where the user will be able to introduce technical
data related to the cache, like the manufacturer, Yes, the custom fields
option will be used to display a section within the user interface where the user can introduce technical
data related to the car. For instance, the manufacturer, the date when the
car was created, the brand of the car and
other technical data. And well, that's it for this lesson and see you
in the next lesson.
10. Lesson 9 - UI overview: Hello guys. Welcome to another
lesson of this tutorial. Well, in this lesson,
I want to show you the user interface
generated by Wordpress. Remember that in the
previous lesson, we configured a new
custom pose type, when a custom pose
type is configured, then Wordpress generates
a user interface so that the user can
enter the information. This is the resulting
user interface generated by Wordpress. Well, as you can see, here
appears the at post screen. This is the place where
the user is going to introduce the information
related to the cars. The first text
field will be used to introduce the
model of the car. The textor below will be used to introduce a full
description of the car. And below the text or appears square that
says custom fields. This is the place where
the user is going to introduce technical details
related to the cache. And then on the right side of the screen appears a rectangle
that says fturedimage. This small rectangle is the
place where the user is going to upload a
picture of the car. And if I head over
to the left side, well, on the left
side of the screen, you can see that a new menu item has been added to the dashboard. The menu item says cars, and it also contains
a tiny icon of a car. Below the, the menu item appear
two items, two sub items. One says cars, and the
other one says at post. So if I press the option cars, you can see that this
screen displays. This is the cars screen. This is the screen
where a listing of all the cars will be displayed. Of course, the listing is empty because there are no cars
saved into the database yet. But as soon as we when we start saving
data into the database, then the cars will
be listed here. Well, that's it for this lesson and see you
in the next lesson.
11. Lesson 10 - Sample publication: Hello, guys. Welcome to another
lesson of this tutorial. Well, in this lesson, I want to show you a
sample publication for the custom post type, which was created earlier. Well, as I said, this is
a sample publication. Right now, I am inside the edit post screen
as you can see, the first text field contains
the model of the car then below the text field
appears at text iter where I've introduced a full
description of the car. In this case, the
full description of the car consists of random text, but you have to introduce a full description of the
car in this text field. Okay. In my case, I used random text. But of course, you
have to introduce a information about the car, the full description of the car. Then below the text or appears the custom fields
square or section. And this is the place where technical data related to
the car will be introduced. For instance, I introduce
the body type of the car. The body type is set to Sedan. I introduced the country
of origin, which is Spain. I introduced the manufacturer, which is set to Toyota. Introduced the model, which is set to this string of text. I introduced the
production date, and also I introduced the Bin which is a numeric
identifier for the car, and also the year when the car was created
or manufactured. And also on the right
side of the screen, you can see that here appears the feature
image rectangle. Remember that this is the
place where the user can upload a picture of the car. In this case, this is
the picture of the car. So as you can see, this is the way how you
can introduce data related to the cars by
using this user interface. Well, that's it for
this lesson and see you in the next lesson.
12. Lesson 11 - Adding php file to the project: Hello, guys. Welcome to another
lesson of this tutorial. Well, in this lesson,
I want to create a new sub directory as
well as a new PHP file. And once I've created well, after creating the file, I am going to include the contents of
the file into the project. So first, I'm going to head
over to the root folder, and as I said, I want to
create a new subdirectory. In this case, the name
of the new subdirectory is going to be Front end. And then inside the newly
created subdirectory, I want to create an
additional PHP file. The name of the PHP
file is going to be include template dot PHP. Well, and then I
have to head over to the main file of the
plugin or the entry point. And as I said, I want to include the contents of the newly
created file into the project. So in order to
include the contents, I have to call the function
require once, require once. I have to include the
function require once. Sorry, I have to call the
function require once. Then I have to use the
constant wordless plugin dear. Remember that this constant contains the pad to
the plugins folder. Then I have to type in the
name of the root directory, which is case plugin. And then I have to type in. I have to enter the name
of the subdirectory, in this case, front end. Front end. Front tend. Okay. And then I have to
specify the name of the file. In this case, the file is
include template dot PHP. And well, as you can see, I just created a
new subdirectory as well as a new PHP file, and then I included
the contents of the newly created file into the project by calling the
required one function. And well, that's it for this lesson and see you
in the next lesson.
13. Lesson 12 - The template include filter: Hello guys. Welcome to another
lesson of the Tutorial. Well, in this lesson, I want to cover I want to
cover the template include filter before I start explaining the template
include filter, I have to say that
right now I am inside the include
template dot pHB file. Remember that this file was created in the previous lesson, well, Again, I'm going to talk to you about the template include filter. Well, in our project
in this project, we have to collect
information related to cars, and then we have to display the information related
to cars to the visitor. In order to display
the information related to cars to the visitor, we have to generate a webpage. And in order to
generate such webpage, we have to create a template. A template is simply a file
which contains HTML markup. We are going to use such
template to display the cards information
to the user or to the visitor. Okay. And well, in order to configure the template or in order
to add the template, we have to use the template underscore
include filter, okay? And in order to add the filter, we have to call the
function at filter. And then the first parameter
is the name of the filter. In this case, the name of the
filter is template include. Then we have to specify
the name of the function which is going to contain all the logic to
configure the template. In this case, the
function will be at custom post type template. That is the name of the
function where we are going to place all the logic necessary to configure
the template. Then we have to
declare the function. Okay. As you can see
right now on the screen. So, in essence, in a few words, the template include
filter will be used to include a template
into the project, and the template is the place
is the file which contains the HTML markup to generate the web page where the cars
data will be displayed. Okay? And, well, that's it for this lesson and
see you in the next lesson.
14. Lesson 13 - Creating a template file: Hello, guys. Thanks for
watching this video. Well, in this lesson, I want to create a new
file for my project. Well, I have to head over to
the front end subdirectory. And inside the front
end subdirectory, I'm going to add a new PHP file. I select the front
end subdirectory, and then I'm going
to add a new file. The name of the file
is Carstemplate. Cars Template. Dot
PHB. Now I hit Enter. And as you can see, I've just created a new file
for my project. And well, this is the
file which is going to have all the HTML markup
for the web page. Where the data related to
the cars will be displayed. This is the file where all the HTML markup
will be located, and this file will
be used to generate the web page where the cars information
will be displayed. We that's it for this lesson and see you in the next lesson.
15. Lesson 14 - Minimum template HTML markup: Hello, guys. Welcome to another
lesson of this tutorial. And well, in this lesson, I'm going to add some HTML markup to the cars template
dot PHP file. Okay. So I'm going to add some basic
HTML markup to this file. And, um, well, as you can see, I am adding some markup to this file to the cars
template dot PHP file. The first tag, remember that
must be the doctype tag. And then the second tag
must be the HTML tag, the HTML tag like this. And then inside the HTML tag, I have to place the
attribute language, and I'm going to
set the language of this page to English. And then I have to add
the head of the document. The head section
of this document. And then I have to add the
body section of this document, remember that inside
the head section, I have to create some meta
tags inside the head section. The first one is a meta
tack, discharged meta tag. And the value of this
metatag will be UTF eight. Okay. And then I have to add the
viewport meta tag as well. So I have to specify
the attribute name. The name of this
name the value for the name attribute will
be viewport, viewport. And the content for the
viewport meta tag will be what equals device, wheat comma initial
scale equals one. Okay? And then I have to
add the title tag inside the head section
of the HTML page. The title tag contains the title which appears
in the browser tab. The title is going to
be a single car page, then inside the body section, I'm going to add a header
one tag that says, uh a single car. Single car page. Well, this is just a
very basic This is just a sample HTML
code so that you can have an idea on the HTML markup that you have
to place within this file. Okay? This is the basic HTML markup that you have
to place within this file, within the file cars
template dot PHB. Well, that's it for this lesson and see you in the next lesson.
16. Lesson 15 - Template include filter logic: Hello, guys. Thanks for
watching this video. In this lesson, I am going to continue working with the
template include filter. Remember that in a
previous lesson, I explained that the
template include filter is used to configure a new
template for the project. And I also said that a
template is required to display the card's
data to the web browser. So in this case, I want to
configure the template. And well, as you can see here, I have the sample code. And first, I have to I have to specify the
template parameters. The template parameters
represents or contains the pad, the pad to the template file. And then I have to first, I have to I have to return the template,
the template pad. It's important to say that
anytime we use a filter, we have to return a value. Okay? So anytime
we use a filter, we have to return a value. In this case, we are going to return the template
pad by default, okay? And then I have to I
have to figure out a way to find the web page, which displays the
cars information. I have to figure out a way to find the webpage which displays the cars
data to the browser. In order to find a
specific webpage, I have to use the
If block like this. And then I have to call
the function I singular. The function is singular is used to find a specific webpage. And we are going to locate. We are going to locate
the web page by using the custom post
type identifier. Okay? So the singular function is used to locate a web page, a specific webpage,
and we have to pass in the name of the
custom post type. In this case, the name of the
custom post type is M cars. By using the If block alone
with the singular function, we are locating the webpage, which displays data related
to the MCRs custom post type. Once the webpage is located, then the If block will be run. And the If block as you can
see here in the sample code, inside the If block, we have to we have to
declare a function. Sorry, we have to
declare a variable, and the variable must
contain the pad to the template that we want to use to generate
the web page, okay? So I have to specify the
pad to the template. So I have to declare the
variable template pad. I'm going to use the constant
war press plugin deer. Remember that this constant contains the path to
the plugins folder. Then I have to specify the
name of the root folder. In this case, cars plugin. Then I have to specify
the sub directory, in this case, front
tent, from TNT. Then I have to specify
the name of the template. In this case, cars
template dot PHP. Okay. So as you can see, I am specifying am I am specifying the path
to the template file, which will be used to
generate the web page. Then I have to as you can
see here in the sample code, I have to uh I have to use the function file exists to determine whether the
template is available or not. Okay? So I'm going to type in I file exists, I file exists, and then I have to
specify the path to the and then I have
to specify the well, as I said, I have to call
the function file exists. This function verifies whether the template is
available or not, but I have to pass in
the pad to the template, and the pad to the
template is located is saved into the pad into the template
pad variable, okay? So in general, this
code is used to determine whether the
template is available or not. Once the template is the
template file is available, then we are going to return the template pad as a
result of this function. Okay? So as you can see, this is the way how
we can configure a new template file
for the project. Remember that this template
will be used to generate the web page where the cars information
will be displayed. That's it for this lesson and
see you in the next lesson.
17. Lesson 16 - Testing Template file : Hello, guys. Thanks for
watching this video. Well, in this lesson, I want to show you
the template files or the template file
we created in action. I want to show you the
template file in action. Remember that the template
files are used to generate the HTML page or the web page where the cars information
will be displayed. Okay? So right now I am
inside the dashboard, and I have to head over
to the car's menu item. And as you can see, this
is the car's screen. And then as you can see, I have one publication for the custom pose type
we have created. So I'm going to press the link. I'm going to press the
link that says preview. As you can see,
this is the result. So as you can see, this is
the template file in action, which means the template
file is working. As you can see,
this is the header that says single card template. And well, as you can see the
template file is working, and that's it for this lesson and see you in the next lesson.
18. Lesson 17 - Template head explanation: Hello, guys. Thanks for
watching this video. In this video, I'm going
to show you how to create a complete
template for the project. In the previous lessons, we created only a
sample template. Because I only wanted to
show you how templates work. So the previous template
we created earlier was only a sample template just to showcase how templates
work in WordPress. But right now I want to
create a complete template, with all the necessary PHP code. So right now I am in the WordPress developer
resources page or site. And right here, I
have a sample page, a sample code. For a template. So I'm going to grab
this sample code, and I have to paste the code inside the cars
template dot pHB file. So as you can see, now the
template has a complete now this file contains a
complete template code. But as you can see, the
code is quite complex, so I want to make it
as simple as possible. I'm going to remove
a great deal. Well, I'm going to
remove some code to make this template as
clear as possible. So as you can see, right now, I only have the head
section of the template, and I want to explain to you this section
of the template. Okay. So essentially,
this is the head section, as I said, of the template. And in order to get the value
for the charset meta tag, I have to call the
function block info with the parameter
charset. Okay? Then in order to get the title of the
web page dynamically, dynamically, I have to call
the function Wordpress title. This is very useful
because by doing this, I am able to get the title
of the web page dynamically. Otherwise, I should enter the
title of the page manually. But by calling this function, I can get the title of
the page dynamically. Then then I have a
link, a link tag. And this link tag,
as you can see, is contains a call to the
function get style sheet. RI or get style
sheet, URI or Ui. This function is called to get the default
Wordpress style sheet. Okay? So the UI function is used to get the default
Wordpress style sheet. Okay? And then I have below the link tag appears a call to the function
Wordpress head. And this function,
the Wordpress head the Wordpress head function
is used to display. All the link tags
or script tags, because we can also add
script tag to the template. Okay? In order to
retrieve the script tag, we have to call the
function Wordpress head. So essentially, the
Wordpress head function retrieves the script tag as well as the link tag for
this web page or template. Well, that's it for
this lesson and see you in the next lesson.
19. Leson 18 - Template body explanation: Hello, guys. Thanks for
watching this video. In this video, I
want to continue working with the template file. Well, in the previous lesson, we discussed how to
add some PHP markup. Sorry, how to add
some PHP code to the head section of the template or the head
section of the HDML file. In this lesson, I
want to continue adding more PHP code to
the template so that the template becomes
dynamic and can render the content of any car, published to the website. Okay? In other words, I want to add some PHP code
to a template too so that the template is able to display
data related to the cars. Okay, so right now I am
in the in the repository. And here I created here I have the sample code that
I'm going to explain, and I'm going to grab this code, and then I'm going to
explain to you this code. So as you can see, I go back to the template, and here I'm going
to paste the code, the PHP, the PHP code, okay? As you can see, well, I'm going to delete a portion
of the code to make it to make the code to make
the code clear to you. So in sense, I just
add a PHP code SNIP. And as you can
see, this PHP code this PHP code contains
an IF block, okay? And this I block is calling
the Half Posters function. They have posters the
half posts function is called to determine whether there are publications
available or not. In this case, the
Half posters function will be called to
determine whether there is a publication related
to cars available or not. In case there is no
aplication available, then the ls block will be run. And as you can see, the s block prints a header
one tag that says, No post is found. Okay? So, in essence, this
is just an I block to determine whether there is content available
to display or not. And then, okay, I have to head over to
the sample code again, and I'm going to
grab this Wil loop. Okay. And then I'm going to paste the wild loop right here. Okay. And then the Wi
loop will be used. The Wiloop will be used to print the content of the publication to
the web page, okay? The wild loop is calling the post the function
called the underscore post. This function is essential
because it configures all the publication data
so that we can access the information and display and display it to
the browser. Okay? So the underscore post
function is necessary always to configure the access to the publication data, okay? Then I'm going to wrap
some additional cove. Okay. This code, I'm
going to grab this code again and I'm going to paste the code underneath
the previous code. And as you can see here, I am calling the function
called the title. Obviously, this function is to display the title
of the publication. The title will be embedded
within header three tags. Then we have to display
the cars picture. In order to display
the car's picture, I have to call the function
the post tomb nail. Then I print well, I call the function then
the function echo is called to print line break
or some empty space. Then the function the content is called to print the
description of the car. Again, then some
white space is at it. And finally, we are calling
the function get post meta. The function get post
meta is implemented to retrieve the technical
data related to the car. In other words, the
function getPosmeta is implemented or used to
retrieve the custom fields. Okay? The first parameter is
the idea of the publication. The second parameter
is the name of the custom field that we want to retrieve
from the database. And the third parameter
is a Boolean true, okay? And well, a at the bottom, at the very bottom
of the PHP code, you can see that I called
the function WP footer. Okay? I called the
function WP footer. This function is necessary
to print the script tags. At the bottom of the file. Because remember
that we can also add script tags at the
bottom of an HDML file. So in order to print the script tag at the
bottom of the file, I have to call the
function WWPFooter. And well, that's it for this lesson and see you
in the next lesson.
20. Lesson 19 - Template in action: Hello, guys. Thanks for
watching this video. In this video, I
want to show you the template file in action. Remember that in the
previous lesson, we added some PHP code to the template so
that the template is dynamic and can display the publications related
to the custom pose type. But in this case, I want to show you the template in action. I have to head over to
the car's menu item. And as you can see, here I
have a sample publication. So I'm going to press the
link that says preview. And now as you can see, this is the resulting web page generated by the template file we created
in the previous lesson. At the top appears
the model of the car, then appears a
picture of the car. Below the picture of the car appears the full
description of the car. In this case, the full
description of the car is just a paragraph of random text. And underneath or
below the paragraph of text appears
the manufacturer. In this case, the manufacturer
of the car is Toyota. Which proves that we have access to the custom
fields information. Okay? And well, this is the
template file in action, and that's it for this lesson and see you
in the next lesson.
21. Lesson 20 - Adding deps file: Hello, guys. Thanks for
watching this video. In this video, I'm going
to create new I'm going to create a new PHP file
for the project. So I have to head over to
the front end subdirectory. And within the front
end subdirectory, I'm going to create the
file deeps dot PHP. Then I have to head over to
the main file of the project, and I'm going to include
the newly created PHP file. So I have to call the
function require once. Then I have to use the constant
Cor press plugin there. And then I have to specify the pad to the
newly created file. First, I have to enter the name of the root
folder, in this case, cars plugin then the name
of the subdirectory, in this case, front end. And finally, I have
to add the name of the file Debs or dips dot pHB. Dips stands for dependencies. Dips stands for dependencies. Well, as you can see, I just added a new file to the project
called dips dot PHP, and then I included the
contents of the file within the project by calling
the function required ones. Well, that's it for this lesson and see you
in the next lesson.
22. Lesson 21 - The wp_enqueue_scripts action hook: Hello, guys. Welcome to another
lesson of this tutorial. And well, in this lesson, I want to implement
a new action hook. In this lesson, I'm
in this lesson, I'm going to implement the action hook called
Wordpress and QI scripts. This action hook is used when you want to add
dependencies to your project. In this case, I'm going to
add bootstrap to the project. So in order to add a
dependency to the project, I have to implement the Wordpress and Qi
script action hook. Right now, as you
can see, I am in the Git repository in the
repository for my project, and I'm going to grab
this code right here. I'm going to copy this code, and then I'm going to
head over to the project. Specifically, I'm going to
open the deps dot pHB file, and here I'm going
to paste the code. And then, as you
can see, this is the Wordpresen QE
script action hook. As you can see, in order
to use this action hook, you have to call the
function at action. Then you have to specify
the first parameter, which is the name
of the action hook. In this case, we
present Q scripts. And the second parameter
is the name of the function which runs for
this specific action hook. As I said, this action hook is for adding dependencies
to the project, dependencies like JavaScript
files or CSS style sheets. Well, that's it for this lesson and see you
in the next lesson.
23. Lesson 22 - The wp_enqueue_style function: Hello, guys. Thanks for
watching this video. Well, in this video, I want to continue adding dependencies
to the project. As I said in the
previous lesson, I am going to add
bootstrap to the project. Bootstrap is a CSS framework, which can be used to style the website or apply
styles to the website. So as you can see right now, I am in the repository
for the project. And I'm going to wrap this
first line of code here. And then, well, I'm
going to delete. I'm going to delete
this code because I want to explain to you
all this code step. I want to explain to you this
code step by step, okay? So first, you have to
add If block, okay? So as you can see right now, I am in the dips dot pHB file. And first, you have
to add an I block. As you can see, the I block
is calling is calling the function is singular
with the parameter, my cars. The If block, along with
the singular function, are used to determine whether the current web page displays information related
to the cards or not. Okay? This If block is
used to determine whether the current webpage displays data related to the
custom pose type or not. In case the webpage displays data related to
the custom pose type, then this If block will be run. Okay, then I have to head
over to the repository, and I'm going to grab
this code right here. I go back to the
deep stop PHP file and I'm going to paste
this portion of code. As you can see,
this is a call to the function WP and Q style. This function is implemented to include style sheet
into the project. And it requires
several parameters. The first parameter is a random identifier
for the dependency. The second parameter is the
URL address of the CSS file. In this case, this
is the URL address the bootstrap for the
bootstraps style sheet. In case you might be wondering where I took the
URL address from. And well, the URL address was taken from the
bootstrap website. As you can see right now, I am inside the bootstraps website. And specifically, I
am getting getting started in the getting started section that
says kickstart. And in this section, you
can find a sample code. And this is the place
where you can find the URL address for
the style sheet. Okay? So you can grab the URL address for
the style sheet. From this, you can take the URL address from
this web page, okay? And then you have to paste the URL address as the second
parameter for the function. Then the third parameter is
an array of dependencies. In this case, we are
not using dependencies. The next parameter is the
version of the style sheet. In this case, the
version is set to null. Because we are
developing the plugin. And when we are
developing a plugin, we don't need to set
d version number. And the last parameter says. The parameter O means that the style sheet will be
applied to all devices. That is smartphones, tablets, and white screens
or larger screens. Okay? Well, that's it for this lesson and see
you in the next lesson.
24. Lesson 23 - The wp_enqueue_script function: Hello, guys. Thanks for
watching this video. In this video, I want to continue adding dependencies
to the project. Well, in the last lesson, I show you how to add CSS
style sheets to the project. But in this case, I want to show you how to add JavaScript
files to the project. As you might recall,
as you might recall, in the previous lesson, I added the bootstraps CSS style sheet. But in this case, I want to add the bootstraps
JavaScript file or well, yes, I want to add the
bootstraps JavaScript file. So right now I am
in the repository, and I'm going to grab this
piece of code right here. I'm going to copy this code, and then I'm going to head over to the deep Stop PHP file. And I'm going to paste
the coat like this. Now as you can see, right now, I am call Well, as you can see, this is a call to the Wordpress
and QI script function, and this function requires
several parameters. The first parameter
is the label or the identifier for
the JavaScript file. This identifier can
be anything you like. The second parameter is the URL address for
the JavaScript file. If I go back to the
bootstraps website, you can see that in
the kickstart section, appears a code Snip. And this code snipped contains the URL address for the
bootstraps JavaScript file. Okay? So from here, you can take the URL address for the JavaScript file
from this web page. Okay? You have to head over to the bootstrap documentation in the getting started
section, okay? And once you take
the URL address for the JavaScript file, then you can use it as the second parameter
for the function. Then the third parameter is
an array of dependencies. In this case, we are
not using dependencies. The fourth parameter is the version number for
the JavaScript file. Since we are
developing the plugin, we don't need to set
the version number. Okay? So the value for this
parameter will be null, and then we have an array which is used to
specify or indicate that the JavaScript
file must be at it at the bottom of
the web page, okay? And well, that's it for this lesson and see you
in the next lesson.
25. Lesson 24 - Basic grid with Bootstrap: Hello, guys. Welcome to another
lesson of this tutorial. And well, in this lesson, I want to continue adding
HTML markup to the template. And well, in the
previous lessons, we created a very
basic template. But then and then we added
bootstrap to the project. So in this lesson, I want to use markup, HTML markup, as bootstrap, as well as the bootstrap
classes to create a grid which we are going to
use to arrange the content. Okay. So as I said, in a previous lesson, we
created a basic template. Then we add bootstrap
to the project. And now I'm going to
use some HTML markup, as well as some bootstrap
classes to generate a wreath to arrange the
content of the web page. So right now I am
in the repository. And as you can see, this is the sample code that
we are going to use. So, um I'm going to I'm going to grab this
portion of code right here. I'm going to copy
this portion of code. And then I'm going to head over. I have to head over to the
car's template dot PHP file, and I'm going to paste the
code snipped like this. Now as you can see the
content seems well, the HTML markup seems a
bit confusing, obviously. So I'm going to delete some
of this markup to make this markup more simple and
make it more understandable. Okay? So as you can see, I've just removed some of the markup as you
can see right now, I am inside the Wil loop. Then I have a call
to the function depost then I have
some HTML tags. The first tag is a if
with the class container, as well as some
additional classes to add some space, vertically. And also to center
the content, okay. So as I said, we want to create a grid, okay? A grid where we can
place the content. And the grid is going to
have two different sections. Okay? So the first if element contains the
glass container. Then within the if element, I've placed an
additional diff element with the class row, and then inside the div element with the class row
with the class row, I added two additional div
elements with the class call. And the first section
says, first section. While the second section of
the grid says second section. Now I save the changes, and then I head over
to the website. I refresh the template. And as you can see,
now the web page is divided or split into into
two different sections. One says first section
or first section, and the other one
says second section, which means the bootstrap
grid is working. Well, that's it for this lesson and see you in the next lesson.
26. Lesson 25 - Displaying a picture and some metadata: Hello, guys. Thanks for
watching this video. In this video, I want to
continue adding markup. I want to continue adding
HTML markup to the template. Well, in the previous lesson, we created a grid by using
the bootstraps classes. In this case, I want to continue
using bootstraps classes to style the website
to style the web page. So as you can see, right now, I am in
the repository, and I'm going to grab this
HTML markup that I have here. I'm going to copy
this HTML markup, and then I'm going to head
over to the template, and I'm going to delete the
text that says first section, and then I'm going to paste the HTML markup inside this
first section of the grid. In essence, the HTML markup displays a
picture of the car, and below the picture of the car appears the
model of the car, okay? So first, I addit an addive
element with the class card. The class card is used to
display a container, okay? And inside the DIF element
with the class card, I add an image tag, as you can see, the
source attribute for the image tag contains a PHP script or PHP
snip code SNIP. As you can see, I am
calling the function, the function get the post
tomb nail URL is called. And this function, the function
get the postnail URL is used to get the URL address
of the picture of the car. Okay. And then we use the URL address as the value
for the source attribute. Then we have a div element
with the class card body. And inside, we have a header five tag with
the class card title. This is the place where
we want to this is the HTML element where
we want to place the the model of the car. Okay? We are going to get
the model of the car by calling the
function the title, get the title, so that we can
get the model of the car. Then we save the changes, and then we head over to the to the to the side to the
web page and refresh. And as you can see, right now, we have the as you can see, the picture of the
car is displayed, and below the picture of the car appears the
model of the car. And well, that's it for this lesson and see you
in the next lesson.
27. Lesson 26 - Modifications made to template: Hello, guys, welcome another
lesson of this tutorial. And well, in this lesson, I want to continue improving the first
section of the grid. In the last lesson, I created a grid with
two different sections. And well, I made some modifications
to the first section. So in this video, I want to continue making modifications to
the first section. And well, as you can see, I've just as you can see, this is the first
section of the with, and I've just added a paragraph element with
the glass card title. And within the
paragraph element, I added another
paragraph element with the text technical data. And then below the paragraph, I added a listing. This listing will be used to display all the technical
details related to the car. So the first list item contains the text type and also
contains a PHP code SNIP. And this PHP code SNIP echoes the result of the
function get post meta. The function depose
meta will be used to get the technical details of
the car from the database. This function requires
three parameters. The first parameter is the
idea of the publication. The second parameter is the identifier of
the custom field. In this case, the identifier
of the custom field is body type and the third
parameter is a boolean true. Well, that's it for this video for this lesson and see you in the next lesson.
28. Lesson 27 - Template improvements: Hello, guys. Welcome to another
lesson of this tutorial. In this lesson, I want to continue improving the template. And well, last in
the previous lesson, I was making modifications
to the template. So in this case, I'm going to add some list items
to the listing. And well, I'm going to add
another list item that says country of origin.
So I have to call. Then I have to call the
function G post meta. Remember that this
is the function necessary to get the
data from the database. In other words, to get
the technical details. This this function
requires three parameters. The first one is the post ID. The second is the identifier
of the custom field. In this case is
country of origin. And the third and the third parameter
is the Boolean true. Then I have to
repeat these steps. I have to add another list item. In this case, the list item contains the text, manufacturer. As you can see, I am calling I am calling the get
post meta function. The only difference is that the second parameter
says manufacturer, okay? Then I have to add another
list item that says model. Again, I am calling the
function get pose meta and the second parameter in this
case is equal to model. Then I have to add another list item that
says production date. Again, I call the
function getPos meta. But in this case,
the second parameter is going to be production date. Then I have to add another
list item that says Bin again, I have to call the get
Pose meta function, and the second
parameter equals Bin. And then finally, I have to
add another list item that says exact G, and in this case, the second parameter
equals g. Well, that's it for this lesson and
see you in the next lesson.
29. Lesson 28 - Final result: Hello, guys. Welcome to another
lesson of this tutorial. And well, in this lesson, I want to continue making
improvements to the template. And well, specifically,
I want to make some modifications to the
second section of the grid. Right now I am selecting the
second section of the grid. And the section of
the grid contains a text at the top that
says general description. And as you can see, I am
using bootstrap classes to format the text
general description. And then I've added a small PHP code SNIP that is calling the
function, the content. The content function is used to display the full description of the car to the web browser. And then after all of
these modifications, after all of these modifications
made to the template, I can head over to the browser, and this is the layout. This is the resulting layout. As you can see, here appears
the picture of the car, below appears the model, then a listing of
technical details. And finally, we have a section where the full description
of the car is displayed. And well, that's it
for this lesson. And now, as you can see,
the template is working. The layout is working. And well, that's it for
this lesson and see you in the next lesson.
30. Conclusion: Hello, guys. Well,
as you can see, we've just completed
the tutorial. And as you can see, we've learned a lot of topics regarding
Wordpress development. This is just the
starting point for a web developers, for
Wordpress developers. Because there are plenty of topics to cover regarding
Wordpress development. The ecosystem or
WordPress is very vast. This is just the starting point. But I think these are the basis for
wordpress development. I'm going to recap some of the topics we've been
covering in this tutorial. For instance, at the beginning, we created a root
folder for the project. Then we edit the header
comment or the header comment, which provides metadata, which describes
the Worps plugin. Then we saw how we
understood how to include external files or how to include additional
files into the project. By using the function
required on we also used the WP WP underscore plugin
underscore the constant. As you might recall. And then we also use a very
important hook, the init action hook. Remember that this hook runs each time a
webpage is loaded. Then we use that hook to
declare a new custom pose type, which is the means we have to save data into the database
with specific format. Then we also configure a user interface so that we can enter information
into the database. Then we also made
use of a filter so that we can introduce a
template into the project. We saw how to add some random HTML content
into the template. We also understood
that templates are the means used by Wordpress to display
data to the web browser. We also understood how to add a framework to
the project like bootstrap and we created a simple layout to
display the data. So as you can see, this
tutorial was very interesting. It gives you an overview of what web development or
WordPress development is about. I hope you have now the basic understanding
necessary to develop words Blue ins. Remember that the
Wordpress ecosystem is very vast, very large. So I suggest you head over to the documentation and read more about and read more
on this topic, which is very interesting. Well, guys, that's it for this tutorial and see you
in the next tutorial. Bye.
Raymundo CH
