IntroductionWelcome| 00:04 | Hi! I am Morten Rand-Hendriksen and
this is WordPress: Building Child Themes.
| | 00:09 | In this course, I'll show you how to build child
themes based on existing themes in WordPress.
| | 00:15 | I'll start by showing you how to use free
tools available on the web for all platforms
| | 00:20 | to set up a solid web development environment.
| | 00:24 | We'll change the look and feel of the site
using custom styles in the child theme stylesheet.
| | 00:29 | I'll show you how to hook into and augment the
behavior of functions that ship with the parent theme.
| | 00:36 | We'll add new functionality to the site by
taking existing code and changing it to fit
| | 00:40 | our needs, and finally we'll put it altogether
to create a new and improved user experience
| | 00:47 | on the front page.
| | 00:49 | I've stocked this course full of tips, tricks,
and code examples to make it easy for you
| | 00:54 | to create child themes based on existing
WordPress themes and adding new functionality and new
| | 00:59 | style to your own site.
| | 01:02 | So let's get cracking with
WordPress: Building Child Themes.
| | Collapse this transcript |
| Using the exercise files| 00:00 | All lynda.com members will have access to the code
snippets that we'll use throughout this course.
| | 00:05 | We'll be accessing this file throughout the
course to quickly add bits of code to our site.
| | 00:11 | If you look at the Exercise Files folder
you'll see we have a codesnippets file and also a
| | 00:16 | list of folders for each of the
chapters, if you're a premium member.
| | 00:20 | The codesnippets file contains code snippets for all
the chapters in which I'm typing in a lot of code.
| | 00:25 | I don't always use this codesnippets file,
but if you see me typing in a lot of code
| | 00:31 | chances are there is a code snippet
that you can grab and use instead.
| | 00:34 | I've marked each code snippet with the number
of the chapter and the number of the movie
| | 00:38 | so they're easy to find, and in cases where
we need to insert code snippets in different
| | 00:43 | files I've also marked that in the file.
| | 00:46 | So for example, in this case you need to
insert a code snippet in functions.php, so that's
| | 00:51 | denoted in the codesnippets file.
| | 00:54 | If you're a premium member, you also
have access to these jump-in files.
| | 00:58 | What we've done is made snapshots of each of
the movies at the starting point; meaning
| | 01:04 | if you want to jump into say Chapter 5 movie,
number 6 and you haven't done the previous
| | 01:09 | movies, you can open the folder for this movie,
and then open a second folder, navigate to
| | 01:15 | WordPress on your computer, go to wp-content >
themes, and then simply grab the child theme
| | 01:22 | from your lesson files and drag them into
the themes folder, and overwrite the existing
| | 01:27 | folder that's already there.
| | 01:29 | That way you'll be at the same
point I am when I start each movie.
| | Collapse this transcript |
| What you need to know before watching this course| 00:00 | I know you're eager to get started, but
before we jump in let me just briefly explain how
| | 00:05 | this course is going to work, and what I
expect from you before we start the course.
| | 00:10 | Throughout the course, I'll be working with an
example WordPress site on my local server.
| | 00:15 | The example WordPress site has
content from a fictitious design company.
| | 00:20 | I want you to use your own assets and your
own images and graphics and text, so that
| | 00:26 | when you're done with the course you don't
have to delete all the content to start over.
| | 00:30 | You should populate a WordPress site with
the standard content that you want to be on
| | 00:34 | your WordPress site, and then work with that
content, because that way you can change it
| | 00:39 | and style it the way you want so that your
WordPress site ends up looking the way you
| | 00:43 | want at the end of the course.
| | 00:46 | Because this is a more advanced WordPress
course, it's important that you understand
| | 00:49 | how WordPress works first.
| | 00:52 | If this is your first time working with WordPress,
I suggest you go and take the WordPress Essential
| | 00:57 | Training Course at the lynda.com online
training library before you take this course.
| | 01:03 | That way you'll have a clear understanding
of how WordPress works, and you'll be able
| | 01:07 | to move through the course more quickly.
| | 01:09 | It's also a benefit if you familiarize yourself
with the Twenty Twelve theme before we get started.
| | 01:15 | The Twenty Twelve theme is the parent theme
we'll be using throughout this course and
| | 01:20 | it's important that you understand how that
theme works first so that you're able to make
| | 01:24 | the changes you need and you understand what
I am doing as I am moving through the course.
| | 01:29 |
| | Collapse this transcript |
| Getting the right tools for theme creation| 00:00 | No matter what kind of work you do, getting the
right tools for the job can mean the difference
| | 00:04 | between getting things done right and
making huge problems for yourself.
| | 00:09 | Fortunately, when it comes to web development,
there are excellent, easy to use, free tools
| | 00:14 | available for all platforms.
| | 00:17 | To follow this course you need a browser
with web developers tools built in, you need a
| | 00:22 | text/code editor so you can edit your code,
and you also need to install WordPress locally
| | 00:28 | on your computer.
| | 00:29 | If you want to match my work environment,
I'll show you the tools I am going to be using.
| | 00:34 | For the browser, I am going to
be using Chrome from Google.
| | 00:37 | I use Chrome because it already has all the
web developer tools built-in, and I don't have
| | 00:42 | to worry about installing any extra
features to make it work the way I want it to.
| | 00:46 | But most other modern browsers also have
either extensions that will install web developer
| | 00:51 | tools or they also have web developer
tools built-in, so it's a preference thing.
| | 00:56 | I'll be using Notepad++ as my code editor.
| | 00:59 | Notepad++ is a simple code editor
for PCs and it's very easy to use.
| | 01:05 | However, if you're on a Mac, you need
to install a Mac specific application.
| | 01:10 | One option is TextWrangler from Bare Bones.
| | 01:13 | It's free and it works pretty
much the same way as Notepad++.
| | 01:17 | But there are many other options
available that you can choose from.
| | 01:20 | You also need to install WordPress on your
computer and there are several different ways
| | 01:24 | you can do that depending on what
kind of computer you're using.
| | 01:28 | If you're on a Windows computer, the simplest way
of installing WordPress locally is to use BitNami.
| | 01:33 | BitNami is a one click install that allows you
to install WordPress directly on your computer.
| | 01:38 | To get to the WordPress solution, you simply
go to BitNami, you select Downloads, and you
| | 01:44 | find WordPress, and from here you
can pick the installation you want.
| | 01:49 | If you're a more advanced user and you want
more control over your server, you can install
| | 01:54 | either the WAMP server for Windows or
the MAMP Server for Mac.
| | 01:59 | They're the exact same application and all
they do is they set up an Apache, MySQL, PHP
| | 02:06 | server on your computer so you can run the
full web server that you can experiment with.
| | 02:11 | If you install either the WAMP server or the MAMP server,
you then afterwards have to install WordPress
| | 02:17 | under these servers so that WordPress works.
| | 02:20 | The reason why you want to install WordPress
locally on your computer is so that when you
| | 02:24 | make changes you don't have to upload those
change to the server to see if they work.
| | 02:29 | You can simply change them on your computer and
reload your page and it automatically updates for you.
| | 02:34 | It also means that you can
bring your projects with you.
| | 02:37 | If you're on a laptop and you don't have Internet,
you'll still be able to work on your themes,
| | 02:41 | because they're on your
computer, not on the Internet.
| | 02:44 | With the right tool set up, you're ready to
start developing rock solid WordPress child themes.
| | 02:50 |
| | Collapse this transcript |
|
|
1. Creating a Child Theme from ScratchWhat is a WordPress child theme and when should you use it?| 00:00 | In this course, we'll be building child themes,
so it's important to answer that question
| | 00:04 | right off the bat. What is a child theme?
If you think about your WordPress site, what
| | 00:10 | decides how the WordPress
site looks is your theme.
| | 00:14 | Your theme decides what it looks like and
how it behaves, and if you want to change
| | 00:17 | the look or behavior of your
site, you change your theme.
| | 00:21 | A child theme is a theme that you attach on
top of an existing theme, and the child theme
| | 00:26 | augments the behavior or look or
functionality of the original theme.
| | 00:31 | I like to think of it like one of these
modeling kits. You get a kit, you can use it the way
| | 00:36 | it is; right now it's a boat, but in some
cases you may want to change it, and you can
| | 00:41 | take the kit and change it into
something else, like a helicopter.
| | 00:45 | All I am doing is simply taking the pieces from
the boat and reorganizing them into something else.
| | 00:51 | It looks different, but
it's all the same stuff.
| | 00:53 | And I know this looks like a really silly
comparison, but it's a valid one, because
| | 00:59 | any theme you install is a set of functions
and styles and features that are put together
| | 01:04 | in a certain way, and you can take any of
these features and remove them or move them
| | 01:08 | around or reconfigure
them into something else.
| | 01:12 | So what you're doing with a child theme is
rather than taking features from scratch and
| | 01:16 | building something entirely new, you're taking
an existing model and just changing the pieces
| | 01:21 | you don't want, or adding new
features where you want them.
| | 01:25 | And that brings us to that important question,
when do you use a child theme? The simple
| | 01:30 | answer is you want to use a child theme
anytime you have an existing theme you like and you
| | 01:34 | just want to make changes to it, or if
you're going to build something new but you have
| | 01:39 | a theme that looks almost
or close to what you want.
| | 01:42 | The reason why you want to build a child
theme instead of a parent theme is simple;
| | 01:47 | the parent theme is a complex
machine that works really well.
| | 01:51 | If you want to make a new theme, you then
have to build that entire complex machine again.
| | 01:55 | But if you build the child theme, you're
borrowing all the complex features from the original
| | 01:59 | theme and you're just adding on or
changing what you want to change.
| | 02:03 | And if someone ever decides to upgrade the
parent theme, you can upgrade it and get all
| | 02:08 | the new features in the
upgrade without breaking anything.
| | 02:12 | If on the other hand you took the original
theme and you modified it, and upgrade comes
| | 02:16 | along and you do the upgrade,
you lose all your modifications.
| | 02:20 | So by splitting your modifications into a
child theme, you protect your own modifications
| | 02:25 | while using the original theme
and getting all the upgrades.
| | 02:28 | It's a simple choice; if you want to use a
theme and you want to make any change, even
| | 02:33 | if it's a really small one,
always use a child theme.
| | 02:36 | Now let's get started.
| | Collapse this transcript |
| Picking a parent theme| 00:00 | Picking a theme is one of the joys and one of
the frustrations of working with WordPress.
| | 00:05 | There are thousands and thousands of themes
available and you can usually find something
| | 00:09 | that gets pretty close to what you
want if you just look hard enough.
| | 00:13 | Looking for a parent theme for your child
theme is no different, but when you're looking
| | 00:18 | for a parent theme, there are some
extra considerations to keep in mind.
| | 00:22 | If you're looking at free themes and premium
themes side-by-side, you'll see there are
| | 00:26 | some significant differences that are really
important, especially if you're relying on
| | 00:31 | a parent theme to build your child theme.
| | 00:34 | Because they're free you can't expect
free themes to be regularly upgraded.
| | 00:38 | That's simply because no one is getting paid
to keep the themes up-to-date, so chances
| | 00:43 | are if you pick a free theme that's not
developed by a core developer who is really invested
| | 00:48 | in keeping the theme up-to-date, you may see
the theme lagging behind for a while and then
| | 00:52 | all of a sudden there is a major update
that happens where everything gets changed.
| | 00:57 | Premium themes on the other hand, because
you're paying for them, you can expect them
| | 01:00 | to be upgraded on a regular basis.
| | 01:03 | However, if you're buying a premium theme,
you need to make sure that the theme foundry
| | 01:07 | is committing to keeping the theme up-to-date,
because they don't always do, and they sometimes
| | 01:11 | deprecate themes.
| | 01:13 | In free themes you'll also find that in some
cases there is nonstandard code inside the theme.
| | 01:19 | By that I mean, the theme may not be built
out exactly the way it should and there might
| | 01:24 | be small errors within the theme.
| | 01:26 | This is getting better in the WordPress Theme
Directory, because they're cracking down on
| | 01:30 | badly written themes, but if you're going
out on the web in general and finding random
| | 01:35 | themes, you may find themes that
have a lot of errors in them.
| | 01:39 | With premium themes, because you're paying
for them, you can expect them to be standards
| | 01:43 | compliant and you can
expect them to be error-free.
| | 01:45 | However, there's a caveat to that.
| | 01:48 | In premium themes you'll often find proprietary
code, meaning instead of using core WordPress
| | 01:54 | functionality, the developer may have created
new functionality specifically for that theme
| | 01:59 | or for that foundry, so that those functions
only work as long as you use their themes,
| | 02:05 | and if you ever move away from their
themes, you'll lose some of your content.
| | 02:10 | Free themes are generally sparse on features,
meaning you get core functionality from WordPress
| | 02:15 | and not much else.
| | 02:17 | In premium themes, you generally get a lot
of extra stuff. That's why they're premium
| | 02:21 | themes, but like I said, a lot of
that stuff will be proprietary.
| | 02:24 | So you have to keep in mind that a lot of
those fancy features may not carry over if
| | 02:29 | at some point in the future you decide to
move away from that premium theme or that
| | 02:34 | premium theme foundry.
| | 02:35 | Free themes in general cannot be expected to
be future proof, meaning you can't expect
| | 02:40 | them to be updated and you can't expect them
to start including new features that come
| | 02:45 | out with WordPress, at least not immediately.
That is unless you install a theme that comes
| | 02:51 | directly from WordPress itself.
| | 02:52 | So one of the default themes for instance
will always be up-to-date and will always
| | 02:56 | have all the new features built in.
| | 02:59 | On the other hand, premium themes may have
extra caveats that you're not aware of.
| | 03:04 | For example, I've seen theme foundries that
actually charge you extra if you want to make
| | 03:09 | a child theme based on one of their premium
themes. So that's something you have to look
| | 03:13 | up before you buy a theme
from a premium theme foundry.
| | 03:17 | Although there are thousands of free and
premium WordPress themes out there to choose from,
| | 03:22 | chances are you're actually better off just
using one of the default themes that comes
| | 03:26 | with WordPress when you're
creating a child theme.
| | 03:29 | The reason for that is the default themes
have all the latest features, they're all
| | 03:33 | built properly, they're future proof, and
they're always easy to work with, because
| | 03:38 | they have great documentation.
| | 03:41 | In this course, we'll be working with the Twenty
Twelve theme, which was released in the fall of 2012.
| | 03:46 | This theme is simple to use, it has all the
core features we need, and it's written in
| | 03:51 | such a way that it's easy to
understand and easy to build child themes from.
| | 03:55 |
| | Collapse this transcript |
| Making sure you have the Twenty Twelve parent theme| 00:00 | Before we get started, you have to make sure
you have the Twenty Twelve theme installed
| | 00:05 | in your WordPress installation.
| | 00:06 | Yes, Twenty Twelve is a default theme in
WordPress, but if you're running in old installation
| | 00:11 | or you've uninstalled a theme for some reason,
or for some other reason you don't have Twenty
| | 00:16 | Twelve installed, you need to
install it before we can continue.
| | 00:20 | Twenty Twelve is available through the Themes
directory. You can see the page for it here,
| | 00:25 | and you can see a preview of the theme if
you want and you can read support requests
| | 00:29 | for it and you can see the rating.
| | 00:31 | If you want to find out if you have Twenty
Twelve installed in your WordPress installation,
| | 00:35 | you need to go to your WordPress site, this
is the one I have running on my computer, and
| | 00:40 | I am already logged in, so I'll go into the
Dashboard and I'll go down to Appearance and
| | 00:45 | Themes, and from here I can see what
themes I already have installed.
| | 00:50 | As you can see, I have the Twenty Eleven theme,
which is active, and I also have the Twenty Ten theme.
| | 00:56 | If you have the Twenty Twelve theme as well,
you'll see it either down here under Available
| | 01:00 | Themes or you'll see it activated at the top
here, but I don't, so I need to install it.
| | 01:06 | The easiest way to install a new theme is
to simply go to Install Themes, search for
| | 01:11 | the Theme Name, find it in the Theme Directory
here, see it's right here, and click Install Now.
| | 01:19 | This will pull the theme directly from the
WordPress theme directory into my WordPress
| | 01:23 | installation and install it.
| | 01:26 | Now all that's left is for me to activate
the new theme, you can see that Twenty Twelve
| | 01:30 | is now my active theme on my site, and if I
go to the front page, you can now see Twenty
| | 01:35 | Twelve the way it looks out of the box.
| | 01:38 | As the name suggests, a child theme requires
a parent theme and that parent theme has to
| | 01:42 | be installed for the child theme to work.
| | 01:45 | Now that you have the Twenty Twelve theme
installed in WordPress, it's time to get started.
| | Collapse this transcript |
| Creating and activating a basic child theme| 00:00 | The first step in building a WordPress child theme
is to create the core of the child theme itself.
| | 00:06 | To make a child theme from any parent theme,
all you need to do is create a new folder
| | 00:10 | under the themes folder, give that folder the
name of the child theme, add a style.css file
| | 00:16 | to that child theme folder, and add some core code
information at the very top of that stylesheet.
| | 00:23 | This will help WordPress identify this child
theme as a child theme and add it in under
| | 00:27 | this admin panel under Appearance and Themes, so
you can activate it. So let's see how that's done.
| | 00:34 | On my computer, I installed WordPress under
Library--so I can find it right here, and
| | 00:39 | here you see all the files
that constitute WordPress.
| | 00:43 | The themes are found
under wp-content and themes.
| | 00:48 | The first step in creating a child theme is
to create a new folder. So I'll create a new
| | 00:52 | folder and call it childoftwentytwelve. You
can call it whatever you want. This is just
| | 00:59 | the name I'm giving this child theme.
| | 01:01 | The next step is to create a style sheet
that goes inside my new child themes folder.
| | 01:06 | For that, I'm going to use my code editor,
so I'll go to Notepad++ and I'll just save
| | 01:12 | this open file, so I'll go to Save As and
navigate to my childoftwentytwelve folder,
| | 01:20 | and here I create a new file called style.css,
I'll make sure it's stylesheet file, here
| | 01:27 | Cascade Style Sheets.
| | 01:29 | And now I need to add the necessary code to
help WordPress recognize this as a child theme
| | 01:35 | and associate it with the parent theme.
| | 01:37 | That code is wrapped inside a comment, so
I'll start with the comment and I'll just
| | 01:41 | end the comment so I don't forget later, and
now I need to add the parameters necessary
| | 01:46 | to identify this as a child theme. It starts
with theme name, Child of Twenty Twelve and
| | 01:54 | again, this name can be anything you want. I
just like to call it Child of Twenty Twelve.
| | 01:59 | You can call it bob if that's what you want.
| | 02:03 | From here, I can add a theme URI if I want
to, by saying theme URI, and then add a URL
| | 02:10 | that points directly to where the theme lives,
but I am not going to do that right now. Instead
| | 02:14 | I am going to add a description, then I'll
say Cool child theme based on Twenty Twelve.
| | 02:25 | Here you should add a proper description that
actually explains what this theme does and
| | 02:29 | what kind of feature it includes.
| | 02:31 | Then you should add the author information,
so I'll put in my own name, and you should
| | 02:37 | add a version number so that you can see
what version you're currently working with,
| | 02:41 | and other people can see it as well.
| | 02:43 | I like to have the numbering structure 0.0.1,
but you can choose any number structure you
| | 02:48 | want. This is just so that you can see what
version you're working with, and then finally
| | 02:53 | and most importantly, you have to
associate this child theme with the parent theme.
| | 02:58 | The way you do that is you type in Template
and then you type in the name of the folder
| | 03:04 | that contains the parent theme.
| | 03:06 | If I go back to my themes folder, you'll see the
Twenty Twelve theme. It's called twentytwelve
| | 03:11 | with no spaces. So if I type in twentytwelve
here the child theme will now associate with
| | 03:18 | the parent theme.
| | 03:20 | I save the style.css file and because I'm
working inside my local installation of WordPress
| | 03:25 | I don't have to do anything else. I don't
have to upload this folder to a server to
| | 03:30 | activate it. It'll automatically pop up.
| | 03:32 | So now, when I go back to WordPress, and as
you can see right now, we have Twenty Twelve,
| | 03:38 | Twenty Eleven and Twenty Ten, but when I
reload the Themes page we now have the child theme
| | 03:44 | here as well, Child of Twenty Twelve right
here, and if I click on it, I can activate it
| | 03:51 | and now you see that we've activated our new
Child of Twenty Twelve theme. You can see
| | 03:55 | the description here, you see what version it is,
and you see that here is the author information,
| | 04:02 | and if I go to the front page
you see the theme is now active.
| | 04:06 | Now you'll also notice this looks terrible
and that's because my child theme currently
| | 04:10 | has no stylesheet, so what you're seeing is
only the content on the page with no style.
| | 04:16 | That's the next step to add
style back into the child theme.
| | Collapse this transcript |
| Importing parent theme styles| 00:00 | When you make a child theme, you start off
with a theme that displays all the content
| | 00:04 | without any style.
| | 00:06 | That's because your child theme
stylesheet is currently empty.
| | 00:10 | If you're going to build a new layout with
completely custom styles this is great because
| | 00:14 | you can start from scratch, but in most cases,
you want to import the existing styles from
| | 00:19 | the parent theme and then
work based on those styles.
| | 00:22 | There are two ways of doing this and they're
used in two very different scenarios, so I'll
| | 00:27 | explain both of them and then
I'll show you my recommendation.
| | 00:30 | The two methods are overwriting versus overriding,
and though they sound almost the same, they're
| | 00:36 | very different when you actually do them.
| | 00:38 | What I mean when I say overwriting is this;
| | 00:42 | you go to the parent theme, you copy out all
the code from the stylesheet, and you paste
| | 00:47 | all that code into your
child theme stylesheet.
| | 00:49 | That way you have full micromanaging control
over every little piece of style code in your
| | 00:55 | theme, and you never have a situation where one
piece of code overrides another piece of code.
| | 01:00 | It means that you can ignore anything that's
happening in the parent theme, and you can
| | 01:04 | write your own style code,
and everything will be fine.
| | 01:07 | That means no surprises, but it also means
that if an update comes out for the parent
| | 01:12 | theme, and that update includes new content,
that new content will not be styled and you'll
| | 01:18 | have to write styles for it.
| | 01:21 | Overriding on the other hand works completely
differently. Rather than copying the styles
| | 01:25 | from the parent stylesheet over into the child
stylesheet, you simply reference the parent
| | 01:31 | styles, and then you just add the styles you want
to change in your child theme styles.css file.
| | 01:38 | This means you have control over everything
you want to control, and you leave everything
| | 01:42 | else to the parent theme.
| | 01:44 | It also means that any future styles that are
included in an update will also be included
| | 01:48 | in your child theme, and it means that in very
rare cases some of those future styles may
| | 01:54 | mess with what you've already created.
| | 01:57 | But the most important thing about overriding
is that you will always get all the updates
| | 02:01 | and it's a lot less work.
| | 02:03 | So I recommend, unless you're changing everything,
you should always use the overriding method.
| | 02:09 | So let's see how that's done.
| | 02:12 | If I go into my child theme stylesheet through
WordPress > wp-content > themes and childoftwentytwelve,
| | 02:20 | I'll open it in my code editor, and here I am going
to import the styles from the original stylesheet.
| | 02:26 | That's done with one line of code at import.
This is the function, and then I say URL because
| | 02:32 | I need to point to the original stylesheet.
I wrap it in a parenthesis and then I have
| | 02:38 | to point to the original stylesheet.
| | 02:41 | If I look in my themes folder, you'll see
the original stylesheet is found under Twenty
| | 02:45 | Twelve and it's down here
and it's called style.css.
| | 02:51 | So what I need to do is navigate out of childoftwentytwelve
into twentytwelve and then point at the file.
| | 02:57 | So I'll go dot dot, this navigates me one folder
back so I am in the themes folder, /twentytwelve
| | 03:06 | which is the parent theme folder, /style.css,
and the parenthesis and now I'm going save
| | 03:15 | the stylesheet, go back into
the browser, reload the page.
| | 03:20 | And now you see because I am importing all
the styles we now see the page that looks
| | 03:25 | exactly like the Twenty Twelve theme, and
if I go in to the source code, go Ctrl+U in
| | 03:31 | Chrome, you can see down here we have the
stylesheet and a link to the stylesheet.
| | 03:38 | And if I click on this link which points to
the stylesheet under childoftwentytwelve,
| | 03:42 | you'll see that that in turn links
directly to the 2012 stylesheet.
| | 03:49 | Understanding this technique of importing
the styles from the parent stylesheet into
| | 03:54 | the child theme stylesheet without actually
copying it, and then overriding those existing
| | 03:59 | styles is very important when you work with
the child themes, because then you only have
| | 04:04 | to focus on changing the things that you want
to change on the website and you can leave
| | 04:08 | everything else alone.
| | 04:10 | This is the whole point of child themes. You
make simple changes in a simple way without
| | 04:15 | having to become a theme
developer in the process.
| | Collapse this transcript |
|
|
2. Modifying and Adding StylesUsing the developer tools| 00:00 | When you look at a website in a browser, what you're
actually seeing is that browser's interpretation
| | 00:06 | of the code behind the website.
| | 00:08 | In my browser right now I have my website
running the Twenty Twelve theme, but what
| | 00:12 | this actually looks like is this.
| | 00:15 | What you're seeing here is the true content of
that website, is lots of code and lots of text.
| | 00:21 | So what happens is, the browser grabs all that
content, combines it in cascading style sheet
| | 00:26 | code and makes it look nice for humans.
| | 00:29 | When you work with child themes, or any other
theme for that matter, one of the first things
| | 00:34 | people want to do when they install a WordPress
site and start working with the theme is make
| | 00:39 | changes to the stylesheet, and this is where
an important tool in this browser comes in.
| | 00:44 | Working with style sheets can be really hard
because the style code is not directly associated
| | 00:49 | with the main code of the page. You
don't see the styles in the markup.
| | 00:54 | So when you're working with stylesheets, in
the past, you had to write the style code,
| | 00:58 | save it upload it to the browser, and then
see what happened in the browser. But now
| | 01:03 | that process has become much simpler because
most modern browsers have web developer tools
| | 01:07 | built-in to make it easy for you to connect to HTML
and the CSS together, and also experiment with it.
| | 01:15 | In Chrome, the web developer tools can be
accessed in several different ways. You can
| | 01:19 | go up to the menu here on the far right corner,
and select Tools > Developer tools. You
| | 01:26 | can also just hit Ctrl+Shift+I in your browser,
this will also open the web developer tools,
| | 01:32 | or if you want to target a specific element,
let's say I want to make changes to this link
| | 01:37 | here, all I have to do is right-click on it,
select Inspect element and the web developer
| | 01:41 | tools will open directly to that element.
| | 01:44 | The web developer tools are actually advanced
applications that let you interact with the
| | 01:48 | live code on the web and make changes to it and
experiment with it to find out how it works.
| | 01:54 | For example, if we want to make changes to
this link that I just highlighted, I can go
| | 01:59 | select it in my code here
in the Web Developer tools.
| | 02:02 | On the left side, I have the HTML output. On the right
side, I have the corresponding CSS that impacts it.
| | 02:09 | So here I can see that this link is affected
by this a:hover state, so if I want to make
| | 02:15 | changes to that a:hover state, so that the
link looks different, I can go in and edit
| | 02:19 | it right here. I'll simply double-click on
the color code and then I can change to color
| | 02:24 | code to something else, I'll say cb4e18,
and now you see it went from blue to red.
| | 02:31 | If I don't like what I just did, I can simply
turn it off, or I can reload the page and it
| | 02:38 | resets back to the way it was.
| | 02:40 | So here you are experimenting with live code
instead of actually making a permanent change,
| | 02:46 | which means you can go in and edit code to
see what happens and if you don't like it,
| | 02:50 | you just revert back, and if you do like it you
save it. You can do the same thing with HTML.
| | 02:55 | If I want to see what this line looks like
if it's much longer, I can simply go in here
| | 02:59 | to the HTML double-click on the line and then
just keep writing, and you see I'm filling
| | 03:05 | in extra HTML that only
lives inside my browser.
| | 03:09 | I'm not making changes to the website itself.
| | 03:12 | I'm just making changes to the instance of
this website that lives on my computer and
| | 03:16 | when I reload the page, that change goes away.
| | 03:20 | So basically the browser and the web
developer tools gives me an environment where I can
| | 03:25 | experiment with my code and figure out how
things fit together and how they work, and
| | 03:29 | then once I have a code I want and it looks
the way I want it to, I can copy it out and
| | 03:34 | save it and make it permanent.
| | 03:37 | Using the built-in tools and browsers like
Chrome can help you easily view, dissect and
| | 03:41 | make changes to both the web markup or HTML
and the style code or CSS of any website.
| | 03:48 | This makes a short process of targeting
specific elements and changing how they appear.
| | Collapse this transcript |
| Modifying existing styles| 00:00 | One of the first things people want to do
when they activate a new WordPress theme is
| | 00:04 | make changes to the look and feel
of the theme to make it their own.
| | 00:08 | This usually means making
changes to the theme styles.
| | 00:11 | Child themes were introduced to make this
process non-destructive, meaning you don't
| | 00:15 | have to mess with the core or parents theme
styles to get what you want. That way you won't
| | 00:21 | inadvertently break the parent theme and your
changes won't be overwritten in the future
| | 00:25 | when the parent theme updates.
| | 00:28 | Let's take a look at how you go about making
changes to the styles on your website using
| | 00:32 | your child theme.
| | 00:34 | If you look closely at the images in the
Twenty Twelve theme, you'll notice that they have
| | 00:39 | a slight drop shadow behind them and that the
box that contains them has rounded corners.
| | 00:45 | You see the shadow here behind this white
image and if we scroll down, you see that
| | 00:49 | this solid image has rounded corners.
| | 00:52 | If you want to change that, you have to make
changes to the style sheet and those styles
| | 00:56 | are in the parent theme.
| | 00:58 | So what we're going to do is to use our child
theme styles to override the parent theme styles.
| | 01:03 | This is because of how CSS works.
| | 01:06 | CSS or cascading style sheets work on
the simple principle of a cascade.
| | 01:11 | The first styles that are listed have less
importance than the last ones, meaning the
| | 01:15 | ones that are the furthest down in
the stylesheet matter the most.
| | 01:19 | In the case of a child theme, the parent
theme is called first and then the child theme.
| | 01:24 | So any style that's in the child theme
stylesheet has more importance than the ones that are
| | 01:29 | in the parent stylesheet.
| | 01:31 | If I use the developer tools here I can right-
click on the image, click Inspect element and here
| | 01:36 | I can see the styles that affect the image.
You see the first style is this image align
| | 01:41 | right, but this style only affects alignments.
| | 01:44 | If I scroll down you see that the second style
here, the one that affects entry content image
| | 01:49 | and other images has two variables; border-radius, and box
-shadow, and obviously, these are impacting the image.
| | 01:57 | If I want to see if this is a style I want
to change, all I have to do is turn one of
| | 02:01 | those styles off, so I'll turn off box-
shadow, and now you see the box-shadow disappears.
| | 02:06 | That also makes it harder to see the rounded
corners though, because there's a white background
| | 02:09 | and this image has a white background as well,
so I'll scroll down and find another image,
| | 02:15 | and here you see it still has a rounded corner,
and I can now change that rounded corner radius
| | 02:20 | either by going in and saying, let's say 10
pixels, to get a much more rounded corner, or
| | 02:26 | I can go out and knock it away
altogether and get a square corner.
| | 02:30 | Now that I know that I
want to change the style,
| | 02:32 | the next step is a copy to style itself, or copy the
whole style and then go to my stylesheet in my child theme.
| | 02:39 | So I'll navigate to my child theme, and open
style.css in my text editor, and here I'm simply
| | 02:45 | going to paste in the original
style the way it was written.
| | 02:48 | So here we have the style copied straight
out of the browser. You see I made a change
| | 02:53 | to it, I made border radius 10 pixels, but
since I want to get rid of the border radius,
| | 02:57 | I am going to set it to 0 instead, and then
I'm also going to change box-shadow from these
| | 03:03 | values to none, just to clean up a bit of
code here so it's looks nice. And now when I save
| | 03:09 | the stylesheet in the child theme, I can go
back to my browser, reload the page, and you
| | 03:15 | see that my changes are taking effect, and
now I have square corners and no drop shadow.
| | 03:21 | But this isn't style that I changed in the
parent stylesheet. I changed it in the child
| | 03:24 | theme stylesheet, meaning I can now go back to
the child theme stylesheet and simply comment
| | 03:29 | out my new style, save it, reload the page and the
old styles from the parent stylesheet kick back in.
| | 03:37 | So now you see the power of
a child theme style sheets.
| | 03:40 | Instead of having to go and muck around with
the actual styles and risk breaking something,
| | 03:45 | you're simply adding on new styles and
seeing what they do. And this doesn't just apply
| | 03:49 | to styles you want to change, you can also
go into your child theme and just add new styles at will.
| | 03:54 | So if you have new content then you need to
change the way that appears, you can simply
| | 03:59 | add new styles here and they'll be appended
to the original styles from the parent theme.
| | 04:03 | That way you're building on top of the parent
theme instead of building everything from scratch.
| | 04:08 | By modifying or overriding styles with your
child theme, you can make quick and easy changes
| | 04:14 | to your theme without having to touch the
theme itself, and if you don't like what you
| | 04:18 | did you just go back in and take out that new
style code and you are back where you started.
| | 04:24 |
| | Collapse this transcript |
| Adding space between paragraphs| 00:00 | Child themes aren't just used for making large
changes that are very impactful on the whole site.
| | 00:06 | They're also used to make small adjustments to
existing styles within a page to make things
| | 00:11 | look a certain way.
| | 00:12 | A very common question raised when people
start using WordPress is how they can get
| | 00:17 | more space between paragraphs
and make that space consistent.
| | 00:21 | This question actually stems from misunderstanding of
how space is created in a document; a misunderstanding
| | 00:26 | caused by how we use word
processing applications.
| | 00:30 | If you think about it, if you were in a word
processing application like Microsoft Word,
| | 00:34 | and you wanted to make more space between
two paragraphs, you'd probably just go in
| | 00:38 | and hit Return a bunch of times to add more
space, but did you ever think about what happens
| | 00:43 | when you do that.
| | 00:44 | If you click on this weird backwards P thing
in Microsoft Word, you can see the code behind
| | 00:50 | this page and you see that every time you hit the
Return button you're actually adding this paragraph.
| | 00:57 | This technique works well when you work in
word processing application, because generally
| | 01:01 | the documents you write there are going to
get print it out on paper, so any empty space
| | 01:06 | is just empty space.
| | 01:07 | However, if you do the same thing on the web
what you're doing is adding code into your
| | 01:11 | documents that contains nothing; you're just
saying empty space, empty space, empty space.
| | 01:17 | That's not good for the web.
| | 01:18 | Instead what you should do is change the
margins around each paragraph to change the height.
| | 01:24 | So if I want to change the space underneath
each of the paragraphs what I need to do is
| | 01:29 | make a small change to the style that affects the
paragraphs. So I'll right-click on a paragraph,
| | 01:35 | it's down here, and you see that this
paragraph has a bottom margin of 1.714, et cetera.
| | 01:43 | What I need to do is make a change to this to
make the margin bigger, so I'll again going
| | 01:47 | in and copy out the style just like I did
before, go into my stylesheet, paste in the
| | 01:52 | style as it is and now I'm only going to make
changes to the bottom margin of each of the
| | 01:58 | paragraphs. You see here
it's actually listed twice.
| | 02:01 | The first line sets the
pixel values for the margin.
| | 02:04 | The second line sets a
rem value for the margin.
| | 02:08 | The reason why you have both is because not
all browsers support the rem value, and for
| | 02:13 | those browsers, the pixel
value will kick in instead.
| | 02:16 | What I want to do is I want to change the
bottom margin to twice of what it is now,
| | 02:22 | so I'm going to go in here and change 24 to 48,
because that's double of 24, and then I'm
| | 02:27 | going to change this long number here
to the double, which is 3.428571428.
| | 02:34 | I'm not making any changes to the line height,
and because I'm not making any changes, I don't
| | 02:39 | need to repeat myself, so I'm
simply going to take that out.
| | 02:42 | What happens when I take it out? Well, the
original style in the parent stylesheet will
| | 02:47 | just kick instead, so we'll still get the
same style and I don't have to repeat it.
| | 02:52 | When I save the stylesheet, go back to my
browser, you'll see this is before, space here, I'll
| | 02:57 | reload the page and now you
see the space is bigger.
| | 03:00 | If we go into the stylesheet again, I'll right-
click, Inspect element, and here you see our styles.
| | 03:06 | We now have 48 pixels or 3.42, and if I scroll
down you'll see here are the original styles
| | 03:14 | with the original style struck out, and you'll see
what happens when I simply ignore a style here.
| | 03:19 | So you remember I deleted the last style,
because I said that wasn't going to change
| | 03:23 | it, well it kicks in down here in the original
style. So that way I'm only including stuff
| | 03:28 | I am changing in my child theme and
leaving the rest up to the parent theme.
| | 03:32 | Modifying or adding styles isn't just about
adding lines and making large changes to the
| | 03:37 | layout. It's also about
creating better presentation styles.
| | 03:41 | Making changes to paragraph line heights and
padding and margin around elements, like titles
| | 03:45 | and paragraphs, is a great example of how you
can use a child theme to make subtle changes
| | 03:51 | to your parent theme and make the site look
better, and like you saw, if you have a style
| | 03:56 | that defines a lot of content and you're
only changing one element of that content, then
| | 04:00 | only change that one element. Don't do
anything with the rest and the parent theme will do
| | 04:05 | all the rest for you.
| | Collapse this transcript |
| Changing font family styles| 00:00 | A website is a
representation of individuality.
| | 00:04 | Whether it be your own
or that of your company.
| | 00:06 | One of the many factors that play into
putting forward a consistent presence on the
| | 00:11 | web is the use of fonts.
| | 00:13 | In the past, web fonts were fairly restricted.
| | 00:16 | But today thanks to modern browser technology, you
have far greater options where fonts are concerned.
| | 00:23 | The Twenty Twelve theme ships with a
custom font hosted by Google Web fonts.
| | 00:27 | Later in the course, we will look at how you
can swap out this Google font for different
| | 00:32 | Google web font, but for now, let's take a
look at how you can change the style sheet
| | 00:37 | in your child theme to use a standard
font instead of the one that ships.
| | 00:42 | Looking at the Twenty Twelve theme, you can see it
uses a Sans Serif font, and if we go behind
| | 00:47 | the scenes to look at the style-sheets.
| | 00:49 | So I'll go in here and go Inspect elements,
to any elements, and go to Computed Style,
| | 00:54 | you'll see down here under font family, the
font that's being used is called Open Sans.
| | 00:59 | It also as a fallback to
Helvetica, Arial, and Sans Serif.
| | 01:04 | This is what's called the font family.
| | 01:06 | What happens here is the browser will try to
use Open Sans, if Open Sans doesn't work,
| | 01:11 | it'll use Helvetica.
| | 01:12 | If Helvetica doesn't work, it'll use Arial and if
Arial doesn't work it'll use any Sans Serif font.
| | 01:19 | What we want to do is make it change to this font
family in such a way that we can use different fonts.
| | 01:25 | To find the original style that kicks in here,
instead of using the technique I showed you
| | 01:29 | earlier, I'm simply going to go into the
Computed Styles and click on this link that points
| | 01:34 | to the original style in the style-sheet.
It's right here.
| | 01:38 | You see body.custom-font-enabled and then you
have the font family: Open Sans, Helvetica,
| | 01:43 | Arial, Sans Serif.
| | 01:45 | Directly above it, you'll notice that the
body style also has a font family defined.
| | 01:50 | This is because Twenty Twelve comes with two options,
you can use a custom style, custom font enabled,
| | 01:56 | or you can disable the custom font using code
and then the original styles will kick in.
| | 02:03 | Right now, we're going to make a change
to the body.custom-font-enabled style.
| | 02:07 | So I'll copy that's style out, go in to my
child theme, and because this is a body style
| | 02:12 | it should be high up in the hierarchy.
| | 02:14 | So I'm going to paste that in
directly under the import call.
| | 02:17 | So here we have the original style the way it
was, but now I want to change to font family
| | 02:22 | over completely to
another standard font family.
| | 02:25 | So I'm going to swap out all this code
with Georgia, Times New Roman, Times, Serif.
| | 02:37 | When I save the style-sheet now, and reload
the web page in my browser, you will see that
| | 02:41 | all the fonts on the entire page have been changed to
Georgia because that's now the main font family.
| | 02:47 | Now it's important to note that this doesn't
necessarily work the exact same way on all themes.
| | 02:52 | Many themes have very specific fonts assigned
to different elements, and you may find that
| | 02:56 | there's several different
places where the font is defined.
| | 03:00 | In which case, you have to go in and find
all the places where the font is defined in
| | 03:03 | the original style-sheet and then overwrite
it piece by piece, but in a well-written theme
| | 03:08 | the font is defined once at the very top and
you can simply overwrite it the way we did
| | 03:12 | just know, by just
typing in a new font family.
| | 03:16 | Changing the font family of a website can
make a huge difference in how the website
| | 03:20 | appears in what message it
communicates to the visitor.
| | 03:23 | Choosing the right font family for your site
is important, and no matter what people say,
| | 03:28 | there is no such thing as
a right or wrong font.
| | 03:32 | The font that fits with your message and
communicates it well is the right font for your website.
| | 03:38 |
| | Collapse this transcript |
|
|
3. Modifying and Adding TemplatesUnderstanding the WordPress template hierarchy| 00:00 | Before we dive deeper into the world of WordPress
themes, it's important that you have an understanding
| | 00:05 | of how WordPress operates and how the
different pages of your website are created.
| | 00:10 | WordPress is a web application
that interacts with a database.
| | 00:13 | That means the constant you enter when you
create a new post or a new page doesn't live
| | 00:17 | in the website itself.
| | 00:19 | The content lives in a database and it's only
displayed using templates when the visitor
| | 00:24 | asks for that content.
| | 00:26 | A theme is a collection of templates
WordPress uses to display the database content.
| | 00:32 | Because of the structure, the database contains
to content and the theme decides how that content
| | 00:37 | is going to be displayed on the website.
| | 00:39 | When you change your theme, you're changing the
way the content is displayed without changing
| | 00:43 | the content in the process.
| | 00:45 | Now when I say template, it's a bit of
misnomer because a theme in WordPress doesn't work
| | 00:50 | with one file per type of content.
| | 00:53 | Instead, any page you see when you access
a WordPress site, you are actually seeing
| | 00:58 | multiple different template files
combined together to create one page.
| | 01:03 | For instance, if you were to look at an
index page, like the front of a blog, you would
| | 01:07 | usually see a header created by the header.php
template, you would see the content created
| | 01:13 | by index.php, you would see a sidebar created by
sidebar.php and the footer created by footer.php.
| | 01:20 | But if you were to look at a single page, we
would still see the same header, the same
| | 01:24 | sidebar and the same footer but the
content would be created by a single.php instead.
| | 01:29 | So how do you know which of these
template files kick-in at what point?
| | 01:34 | That's where the WordPress
template hierarchy comes in.
| | 01:37 | At any one time, when there's a person asking
for specific content from the database, by
| | 01:42 | clicking a link inside your site, the database
and the browser interact to figure out what
| | 01:47 | type of content this is and then use the
appropriate template file to display that content.
| | 01:52 | The database in the browser basically goes through
the schematic to figure out which template to use.
| | 01:57 | Let's say you're accessing an archive page,
the category archive, you go in here, it says
| | 02:03 | what is the page, it's an Archive
Page and it's Category Archive.
| | 02:07 | Okay, in that case, we're going to use the
category.php template, right here, or if we
| | 02:13 | are more specific about our call, we can also use the
category ID template or even the category slug template.
| | 02:19 | If none of these files exit, we fall back to
archive.php and then everything gets displayed.
| | 02:25 | The same goes if you're looking at a single
post. You ask, what kind of page is it? It's
| | 02:30 | a Singular Page, it's a Single Post Page and
this is a Blog Post which means we'll use
| | 02:36 | single post.php, and if single post.php doesn't
exist, we're going to use single.php instead
| | 02:42 | and if none of these template files
exit, we fall back to index.php.
| | 02:47 | So when you're editing template files in
WordPress themes, what you have to think about is what
| | 02:51 | type of content this is and then edit the
appropriate template file for that type of content.
| | 02:57 | This may seem confusing at first but once
just start working with it you will quickly
| | 03:01 | see that there's a very clear system here
and that by knowing what template file to
| | 03:05 | edit you'll be able to control every aspect
of what comes out the other end when people access
| | 03:10 | your WordPress site.
| | Collapse this transcript |
| Modifying existing templates| 00:00 | Just like with the stylesheet, you can add
modified template files to your child theme
| | 00:05 | to change or add to the original
template in the parent theme.
| | 00:09 | But unlike the stylesheet, you don't
just add a file with your changes.
| | 00:13 | When you modify or add to an existing template file in
a child theme, you replace the original template file.
| | 00:19 | Let me give you an example
what I'm talking about.
| | 00:22 | Let's say we want to make it
change to the single post view.
| | 00:24 | First, I'm going to go to single post here
so we can see the template as it exists now.
| | 00:30 | And then I want to make it change to this
template file. I already know that it's the
| | 00:34 | single.php file I need to change.
| | 00:37 | But before I can change it, I need to
make sure have that file in my child theme.
| | 00:42 | What I'm going to do is go to my themes directory
and open the parent theme, so here twentytwelve,
| | 00:47 | and then next to it I'll open my
child theme, here is childoftwentytwelve.
| | 00:52 | Now I'm going to find the original file, so
right down here, single.php and I'll copy
| | 00:57 | it into my child theme.
| | 00:59 | Now when I access a single post on my site,
I'm looking at that post using the single.php
| | 01:05 | template found in my child theme.
| | 01:08 | How do I know that? Well, I
can check it very easily.
| | 01:10 | If I open single.php from my child theme in
my text editor, I can make a small change
| | 01:17 | to it to make sure that this is
in fact a file that's kicking in.
| | 01:21 | So I'll go in here somewhere and I'll say
php echo which means it'll type something
| | 01:27 | out 'This is a single.php template from the child
theme.' I'll close out my php delimiter and save this.
| | 01:40 | If I'm using this template which is single.php
template found inside childoftwentytwelve,
| | 01:45 | you'll see this piece of text
appear when we open a single post.
| | 01:49 | So I'll reload my single post and
now you see that text appeared here.
| | 01:53 | This is the single.php template from the child
theme, which means we are now using the template
| | 01:58 | from the child theme.
| | 02:01 | That means that just like with my stylesheet,
if I make at change and then I don't like
| | 02:05 | that change or make a mistake when I'm
editing a template file in my child theme, all I
| | 02:10 | have to do is simply go in and delete the
file from my child theme, reload the page,
| | 02:19 | and I now have a template
from the parent theme again.
| | 02:22 | So here you see again this
idea of nondestructive editing.
| | 02:25 | You make a change to a file, but you are
actually making a change to the copy of the file.
| | 02:28 | So if you make a change and it doesn't work,
you can always fall back on the original.
| | Collapse this transcript |
| Moving the header image| 00:00 | To show you how you can modify a template
file to make a change on your site, let's
| | 00:05 | take a look at a practical example.
| | 00:07 | Twenty Twelve has the ability to add a
header image at the top of the site.
| | 00:11 | To activate it, you've to go into the
Dashboard and under Appearance, you'll find Header.
| | 00:17 | Here you can upload a header image, if you
don't have one already, or if you already
| | 00:21 | have one uploaded, you can select
it down here under uploaded images.
| | 00:25 | I'm going to select this one that I
uploaded previously, and click Save Changes.
| | 00:31 | Now when I go back to the front page, you'll
see we have a header image right here, but
| | 00:36 | the header image appears underneath the
main menu and the title of the site.
| | 00:41 | I want the header image to start
at the header at the very top.
| | 00:45 | To achieve that, I have to change the header.php
file that controls the header, because that's
| | 00:50 | the file that normally controls
the header of a WordPress theme.
| | 00:54 | The first thing I'm going to do is go to my Twenty Twelve
theme, so the parent theme, and find header.php.
| | 01:00 | I'll copy header.php into my child theme.
| | 01:03 | So we're now using the child theme version
of header.php, instead of the original.
| | 01:09 | And then we can edit header.php
in the child theme.
| | 01:12 | I'll open it in my code editor and then I need
to find the code that inserts the header image.
| | 01:18 | And I know when you open a WordPress
template file for the first time, it can be rather
| | 01:23 | jarring, because it's hard to read. This is
HTML and PHP all over the place and there's
| | 01:28 | lots of comments and things going on.
| | 01:31 | But if you just take your time
and read what the page says,
| | 01:34 | it's actually quite easy to
figure out what's happening here.
| | 01:37 | If you scroll down, you'll see it says ID
masthead, so that's obviously the header.
| | 01:42 | It even says site header here in this class
and directly underneath you see a group that
| | 01:47 | has the site-title and site-description, so
that's obviously the title and description.
| | 01:51 | Then you have a nav that says site-navigation,
so that's obviously the menu, and then below
| | 01:57 | that you have a function
that calls get header image.
| | 02:01 | So this is the function
that has the header image.
| | 02:04 | So I'm going to copy out that entire
function or rather I'll cut it out.
| | 02:09 | Then I'll paste it in directly
above the title and description.
| | 02:14 | I'm going to save the edited header.php file
in my child theme, go back and reload the
| | 02:20 | page in my browser, and you'll see that now
the header image appears at the top with the
| | 02:25 | title and description
underneath and then the menu.
| | 02:28 | This is more the layout I want, but I'm not
quite done yet, because now I changed the
| | 02:33 | layout of the page by changing the markup.
| | 02:37 | And you can see that because the styling originally
assumed that this header image was on the bottom,
| | 02:42 | there's not enough space here between the
header image and the title and description.
| | 02:46 | So now I have to go on and change my stylesheets
to correspond with my new layout in the markup.
| | 02:52 | To do that, I'm going to select the header
image and go Inspect element with my browse
| | 02:57 | tools, so that I can see
what I'm working with.
| | 03:00 | And here I can see that I don't actually have a
specific class or style for the header image.
| | 03:06 | However, the header image has a class called
header-image, which means I can now add a
| | 03:11 | new style that addresses header image and
give that style a new margin at the bottom.
| | 03:18 | I'll go to my child theme, open style.css and here
I can create a new style, call it header-image.
| | 03:28 | And in this case, I want to give the
heard-image a larger margin on the bottom.
| | 03:33 | So I'll say margin-bottom and give it a 24
pixel margin, because I noticed that all these
| | 03:39 | other styles already have a 24 pixel margin.
| | 03:42 | I'll save my new child theme stylesheet,
reload my page, and you see that the header image
| | 03:49 | now has more space underneath
and the title gets bumped down.
| | 03:53 | I can take a look at the site step further
if I want to, because now I can get rid of
| | 03:58 | the title and description altogether,
because I don't need them anymore.
| | 04:01 | I can go in here to Customize, go to Site Title
& Tagline and uncheck this Display Header Text.
| | 04:09 | And now you see we only have the
header image and then the menu.
| | 04:13 | If I like what I see, click
Save & Publish, close it,
| | 04:19 | and now we have changed the look, feel and
layout of our theme using only a small change
| | 04:25 | in one template file and by adding a
small extra style in our stylesheet.
| | Collapse this transcript |
| Adding Related Posts feature to posts| 00:00 | A simple way of extending the functionality
of a WordPress site is by adding plugins.
| | 00:05 | And most plugins work
pretty much out of the box.
| | 00:08 | But there are many great plugins out there
that either require you to make changes to
| | 00:12 | your theme or that allow you to use them in more
advanced ways by including their functions into your theme.
| | 00:18 | This is a great use for child themes and done
right, it can be both simple and effective.
| | 00:23 | To give you an example of how this works,
let's add a list of related posts at the bottom
| | 00:28 | of our single post view using the Yet Another
Related Posts Plugin and a custom function.
| | 00:34 | The Yet Another Related Posts Plugin, or YARPP
as it's called, is a great plug-in that adds
| | 00:40 | a list of related posts
wherever you want it in your site.
| | 00:44 | The great thing about the plugin is it actually
reads your content and figures out what posts
| | 00:48 | relate to what other posts.
| | 00:50 | So that when people read a post on your site
at the bottom or at the top of the site, they
| | 00:55 | find lists of other related posts
they're probably going to be interested in.
| | 00:59 | That keeps them on your site longer and it
also makes for a better experience for the
| | 01:03 | people that visit your site.
| | 01:06 | First we need to add the plugin to our sites.
| | 01:08 | So I'll go to the Dashboard, go to Plugins >
Add New, and here I'll simply search for YARPP.
| | 01:17 | I find it down here, Yet Another Related Posts
Plugin, I'll install it, activate it, and then
| | 01:26 | I get a flag that says I've installed
it and then I need to go configure it.
| | 01:29 | So I'll directly to the
Related Posts settings page.
| | 01:34 | Now if you're using BitNami like I am, you
may get this warning message at the very top
| | 01:38 | here that says that things aren't working
the way they're supposed to in the database.
| | 01:43 | This is an issue that's related to
how BitNami sets up a database.
| | 01:46 | And you're very unlikely to see this on a
website that lives on a web server on the web.
| | 01:51 | So just ignore it and move on.
| | 01:56 | When you install YARPP, you're most likely
going to see that Automatically Display Related
| | 02:00 | Posts is activated by default.
| | 02:03 | If it is, and you go to a single post, scroll
down to the bottom, you'll find that it either
| | 02:12 | says no related posts or that there is a list
of related posts at the bottom of your posts.
| | 02:18 | This is one that's auto inserted, and it's
always inserted before this content at the
| | 02:23 | bottom of each post.
| | 02:24 | But what if you want to place it somewhere
else? Let's say, I want to have this list
| | 02:28 | appear beneath the meta content and in place
of the standard navigation that points you
| | 02:33 | to the previous and next post,
because I think that navigation is silly.
| | 02:38 | In that case, I need to turn off the automatic
insert and insert the function manually instead.
| | 02:44 | And I can do that, because
YARPP allows me to do it.
| | 02:47 | So I'll go back to the settings for YARPP.
| | 02:50 | Turn off Automatically Display Related Posts
and then hover my mouse over this more tag
| | 02:55 | and it tells me that I can use a function
called related_posts to display the related
| | 03:01 | posts in my template file.
| | 03:03 | To get that to work, I first have to go to
Twenty Twelve, find the template I want to edit, in
| | 03:09 | this case single.php, copy it into my child
theme, open the child theme, single.php file
| | 03:17 | in my code editor, and then find the content I
want to replace, which is right here, nav-single,
| | 03:25 | and also add in the content
I want to replace it with.
| | 03:28 | First, I'm going to remove
this content I don't want.
| | 03:32 | This is the navigation that points on the previous
and next post and I think that's kind of silly.
| | 03:36 | So I'm going to take it out and in its place I'm
going to place that function that came with YARPP.
| | 03:44 | So I'll put in PHP delimiters and
then I'll put in the function.
| | 03:53 | I'll save the template
and reload my single post.
| | 03:57 | And now you see that in place of the navigation that
was here previously, we now see no related posts.
| | 04:03 | I also see that I forgot to
deactivate the automatic insert.
| | 04:07 | So I'll go back to related posts, make sure
it's unchecked, click Save Changes, reload
| | 04:14 | my single posts and now you see
no related posts appears here.
| | 04:19 | But there is a caveat here.
| | 04:21 | The function Related Posts is associated with
the plugin, so what happens if I deactivate
| | 04:27 | the plugin? I'll go into Plugins > Installed
Plugins and deactivate Yet Another Related Posts.
| | 04:38 | And now when I reload the single post here,
you'll see something very strange happen.
| | 04:44 | The post will generate, but then it
terminate at the bottom here, before it's finished.
| | 04:48 | That's because in my template file, I'm
calling a function that no longer exists.
| | 04:54 | So here's the rule of thumb, if you ever add
a function from a plugin, you must wrap it
| | 04:59 | in a conditional statement that
tests to see if that function exists.
| | 05:04 | The function you're going to wrap in is
not surprisingly called function_exists.
| | 05:10 | So we'll simply ask, if function_exists, give
the name of the function, and then we say,
| | 05:25 | as long as the function exists due the following.
In this case, run the function and then end
| | 05:31 | the conditional statement, save the template
file and reload the page, and now the page
| | 05:39 | works even though the
function did not kick in.
| | 05:42 | And if I go back to WordPress, reactivate
Yet Another Related Posts Plugin and reload
| | 05:49 | the page again, the function reappears.
| | 05:54 | If you use plugins in your site, I guarantee
you'll come across ones that require you to
| | 05:59 | add functions or other
elements to your template files.
| | 06:02 | Using a child theme and wrapping these
plugin functions and conditional function_exists
| | 06:07 | tags ensures that you get the full use out
of your plugin, that if the plugin breaks
| | 06:12 | or gets deactivated, or
uninstalled, it doesn't break your site.
| | 06:16 | And that if something disastrous happens when
you install the new function, all you have
| | 06:20 | to do is remove the template file from your
child name and everything goes back to normal again.
| | Collapse this transcript |
| Creating custom page templates| 00:00 | WordPress has two main types of published
content, posts and pages, and though most of
| | 00:07 | the time you want a uniform appearance for
each content type, there are times when you
| | 00:11 | want certain pages to look a bit different.
| | 00:15 | In Twenty Twelve you already two custom page templates that
change to presentation of the pages they are enabled on.
| | 00:22 | You can see them when you
go into a page to edit it.
| | 00:29 | Here on the side under Page Attributes you
have a section called Template, and under here
| | 00:34 | you have the Default Template and if you drop
it down you'll also have a Front Page Template
| | 00:39 | and a Full-width Page
Template with No Sidebar.
| | 00:42 | If you activate one of these, say the Front
Page Template, and updates the page and then view
| | 00:48 | the page, you see that the page template looks
quite different. It's Full-width and if we
| | 00:56 | go to Appearance > Widgets, and add widgets
to the First Front Page Widget Area, lets
| | 01:06 | add Recent Comments, Recent Posts, and maybe Categories,
and reload this page with the
| | 01:17 | Custom Front Page Template activated, you see
we now get these widgets here at the bottom.
| | 01:24 | The Custom Front Page Template is meant to be
used on the front page. We can also activate
| | 01:29 | the full-width template.
| | 01:31 | I'll go back and edit the page, change the
template to Full-width Page, with No Sidebar
| | 01:41 | and then View Page.
| | 01:42 | And you see we know how full width but we
don't have those extra sidebar elements. Instead
| | 01:47 | we have comments at the bottom, or I can
switch back to the default and again view page,
| | 01:58 | and now we have the standard look with the
content on the left and sidebar on the right.
| | 02:03 | You can create your own page templates to
produce specific results on specific pages.
| | 02:08 | I use this technique quite often, because not
all pages should be displayed the same way.
| | 02:13 | Sometimes I want to add extra meta
information or some other information, or maybe I want
| | 02:18 | to remove something like
removing the page title.
| | 02:21 | The reasons for creating custom page templates are
endless, unfortunately they're very easy to make.
| | 02:28 | If we look at the theme folder for Twenty Twelve, you'll
notice that there's a folder under the theme
| | 02:32 | folder called page-templates, and it is inside this
page-templates folder you find the page templates
| | 02:39 | front page and full width.
| | 02:42 | You don't have to put your page templates
in a sub folder, and if you do, you have to
| | 02:46 | tell your theme that that's what you did.
| | 02:49 | The reason why they did it for Twenty Twelve was to
create a more structured and organized theme.
| | 02:55 | If we want to create a custom page template for
ourselves, we can do it in a very simple way.
| | 03:00 | I'll open my twentytwelve theme here, on the
left, and my child theme here on the right.
| | 03:08 | And then I'll go and find my page template,
it's here, and copy it over into my child theme.
| | 03:15 | And then I am going to change
the title of my page template.
| | 03:18 | So I will just give it a
different name, I'll say no-title-page.
| | 03:24 | Now I am going to open it in my code editor.
Now I have to tell WordPress that this is
| | 03:28 | a custom page template. The way I do
that is I add a comment at the top.
| | 03:32 | So I am going to remove the comment that's
already here, and I am going to add a comment,
| | 03:41 | and in here I am simply going to type Template
Name and then give it a new name, and the name
| | 03:47 | should be very descriptive so
it'll be No title page template.
| | 03:54 | All I now have to do is save this new page
template with this comment at the top, and
| | 03:59 | I can go back to WordPress, edit the page,
go to Template and you see we now have No
| | 04:06 | title page template as an option.
| | 04:09 | I'll update my page, view the page, and you see
nothing changed. That's because I haven't
| | 04:18 | actually changed my page template yet.
| | 04:20 | Now I want to make changes to content in my
page template, but when I go back to my code editor
| | 04:26 | and I look at the page template, I notice
that the contents of the page isn't actually
| | 04:31 | in the page template. You see instead, we have
this function called get_template_part, that
| | 04:36 | calls a file called content-page.
| | 04:40 | So what I need to do is get the content
from content-page and put it in first.
| | 04:46 | I'll go back to my parent theme and this time I am
simply going to find that content-page-template
| | 04:53 | open it, copy out all the content, and then
replace the call here, get_template_part with
| | 05:05 | that content I copied out.
| | 05:08 | Now all I have to do is find where the title is,
it's right here, <header class="entry-header">
| | 05:13 | and then entry-title, and I'll delete it,
save my custom page template, reload my page
| | 05:20 | and now I have a page with no title.
| | 05:23 | The custom page template is an often overlooked
tool in the WordPress theme arsenal that allows
| | 05:28 | you to create customized experiences
for your visitors in a very simple way.
| | 05:32 | The best way to get the most out of a custom
page template is to simply start experimenting.
| | 05:37 | And remember, there are no limits here. If
the information exists, you can display it.
| | Collapse this transcript |
| Using conditional statements for customized effects| 00:00 | In the previous movie we created a custom page
template and remove the title from that template.
| | 00:06 | However, the method I
showed was a rather crude one.
| | 00:10 | I copied a bunch of code, this code here, from a
different template file, the contents-page.php
| | 00:17 | file and pasted it directly
into my custom page template.
| | 00:22 | This is a quick and dirty way of doing things, but
it's not necessarily the most effective way of doing it.
| | 00:27 | Now I am going to show you a much cleaner and
just as quick way of doing the same thing.
| | 00:32 | Rather than copying and pasting the code, I
am going to use one of the many conditional
| | 00:36 | tags built into WordPress, to test to see if
were using a custom page template and then
| | 00:42 | display the content accordingly.
| | 00:45 | Conditional tags are simple if then statements
that can help you consolidate a lot of code
| | 00:50 | into a single template file, and that have
the computer figure out what to display, and
| | 00:55 | where to display it, and when to display it.
| | 00:58 | The first thing I am going to do is reset
my and no-title-page custom template file,
| | 01:02 | back to the way it was originally.
| | 01:05 | I am going to delete all this code that I
pasted and then I am going to find the original
| | 01:10 | file I copied; that would be that page
template file from the twentytwelve theme.
| | 01:16 | And I will find the original call, here
it is get_templete_part content page.
| | 01:27 | Like I explained before, what happens here is
WordPress says, hey there's a file that's
| | 01:32 | called content-page and the contents
from that file should go right here.
| | 01:38 | So when I save this custom page template and
reload my page that's using it, you'll see
| | 01:44 | the title is now back and
all the content is too.
| | 01:47 | The next thing I am going to do now is tell
the file is being that's being called the
| | 01:52 | content-page file, to display content
differently, if we're using this page template.
| | 01:58 | I am going to do that using conditional tags.
| | 02:02 | Conditional tags are small functions built
into WordPress that allow us to test for
| | 02:07 | different scenarios, and then do things based on
those tests. Basically you are saying things
| | 02:11 | like if this is the homepage then do the
following, if it's not, do something else.
| | 02:18 | In this case, we want to test for whether or
not a certain page template is going to be
| | 02:23 | used. We are going to test whether this is
a page template and there's a conditional
| | 02:27 | function just for that. It's called is_page_template
and it's used the following way.
| | 02:32 | You ask is_page_template, and then you define
what page template you're looking for.
| | 02:38 | So we are going to use this exact
function here inside the template file.
| | 02:43 | The template file in question is this one,
content-page, and since I am going to make
| | 02:47 | a change to it, I first need to
copy it into my child theme.
| | 02:51 | So I'll copy it into child theme
and then open it in my code editor.
| | 02:57 | And then I need to find the
content I want to change.
| | 03:00 | It's this right here, the <header="entry header">
that has the title in it. It's right here, the_title.
| | 03:07 | Now I am going to wrap this in a new
function that uses a conditional statement.
| | 03:12 | So I will start with php delimiter, then I
will say if is_page_template and put in the name
| | 03:22 | of the file I am looking for, no-title-page.php.
I'll end my parentheses and I am putting curly
| | 03:35 | bracket and then anything that's within the curly
bracket will then be run if this is_page_template,
| | 03:43 | and my PHP delimiter,
| | 03:44 | so that HTML can run underneath it, and then
I'll put the php delimiter back in and
| | 03:52 | end my curly bracket.
| | 03:55 | So what happens now is when content page runs,
it will go, hey, is this page template called
| | 04:01 | no-title-page.php? If it is,
then display the title.
| | 04:05 | Which of course is exactly opposite of what
we want, but I am just going to test to see
| | 04:09 | that this works first, so I'll save content
page, go back to my sites and reload the page
| | 04:15 | that has the custom page template on it.
| | 04:18 | As you can see we can still see the title.
| | 04:20 | And if I go to a different page, you'll see
that this page does not have title. It should
| | 04:27 | say about here at the top but it doesn't.
| | 04:30 | So now I want to reverse it. I'll go back to
my code and then I'll say exclamation point
| | 04:36 | is_page_template.
| | 04:38 | The exclamation point means not.
| | 04:40 | So now we are saying, if this is not this page
template then display this content. Otherwise,
| | 04:47 | meaning it is the page template,
do not display this content.
| | 04:51 | I'll save content page again, reload
the page that should have a title on it.
| | 04:56 | Now you see the title right here, About, and
then I can reload the page that should have
| | 05:02 | a title and you see
Welcomes disappears. So no title.
| | 05:06 | Using conditional tags, or even regular conditional
if then statements in your child theme, you
| | 05:12 | can turn on and off elements and functions at
will to create highly customized behavior.
| | 05:17 | I use conditional statements constantly in
my sites, because they make the themes lean
| | 05:23 | and clean, and make it easier
to manage the template files.
| | 05:27 | The rule of thumb here is this, if you want
to show or hide something on a page or post
| | 05:32 | and you're planning on making a new template,
see if you can get the computer to test for
| | 05:36 | a condition instead so you don't have
to write out the entire new template.
| | 05:41 |
| | Collapse this transcript |
| Creating custom header, footer, and sidebar templates| 00:00 | In a previous movie, I showed you the custom
front page template and how it has separate
| | 00:05 | wigitized areas, or sidebars,
than the regular page templates.
| | 00:11 | In the widgets area you can actually see it in
the back end. You have the Main Sidebar, which
| | 00:16 | is what appears on posts and regular pages,
and then you have this First Front Page Widget
| | 00:21 | Area and Second Front Page Widget Area, that
only appear under the custom page template
| | 00:27 | when that template is being used.
| | 00:29 | Thanks to the WordPress template hierarchy,
we can make custom templates to suit pretty
| | 00:34 | much any need. This includes making custom
header, sidebar, and footer templates that appear
| | 00:40 | only when we want them to.
| | 00:42 | In the Twenty Twelve theme, we already see one such
custom template, which is one that kicks in
| | 00:48 | this, First Front Page Widget Area
and Second Front Page Widget Area.
| | 00:52 | Let's take a look at that template.
| | 00:55 | If you look at the twentytwelve theme and
we will scroll down to the bottom here, you
| | 00:59 | see we have two templates; we
have sidebar and sidebar-fronts.
| | 01:03 | If you look at sidebar, you see all it does is
call the sidebar-1, which is the main sidebar.
| | 01:12 | If you look at sidebar-fronts you'll see the
same thing happens except here we are calling
| | 01:17 | sidebar-2 and sidebar-3. These correspond
with these First Front Page Widget Area and
| | 01:24 | Second Front Page Widget Areas.
But where do they come from?
| | 01:28 | Well if you look at the page template, when
we scroll all the way to the bottom, you see
| | 01:33 | here it says get_sidebar; this is a general
call, if I called the sidebar.php page. It's
| | 01:40 | the same type of call you used to call the footer.phpfile,
get_footer, and also the header.php file, get_header.
| | 01:49 | But if you go back to twentytwelve and go
into page templates, the folder, and open the front
| | 01:56 | page custom page template, you see that
instead of just calling get_sidebar, we're adding
| | 02:02 | a variable, front. This tells WordPress that
instead of calling sidebar.php it should be
| | 02:09 | calling sidebar-front.php.
| | 02:13 | So that's how the custom sidebar
kicks in, in a custom page template.
| | 02:18 | Now you have a clear idea of the naming structure
and how this works, and it's actually really simple.
| | 02:23 | If you want to create a custom header,
footer, or sidebar at any point in your site,
| | 02:29 | all you do is as you create a custom file
called header- and then give it the name that
| | 02:34 | you want to use, and then to call it, you simply
go get_header then define that same name.
| | 02:41 | The same goes for sidebar and footer as well.
| | 02:43 | This is what actually happens.
| | 02:45 | If we use the regular page.php template, we
have the function call get_header that calls
| | 02:52 | the header.php template.
| | 02:55 | However, if we decided to create custom
header file that we only wanted to appear in our
| | 03:01 | no-title-page template, we would add get_header
parentheses custom in our function, and that
| | 03:09 | would call the header-custom.php file instead.
The same exact technique applies to sidebar.php
| | 03:16 | and footer.php as well.
| | 03:18 | By utilizing the built-in functionality of
the template hierarchy, you can create custom
| | 03:22 | layouts and content displays on
pretty much any page on your site.
| | 03:27 | This allows you to add and subtract content
in areas like the header, sidebar, footer,
| | 03:32 | depending on what page, post, or index the
visitor lands on, and that can in turn be used
| | 03:38 | to give the visitor a more meaningful and
informational experience when visiting your site.
| | Collapse this transcript |
|
|
4. Customizing the Index PagesUnderstanding the different index pages and what they do| 00:00 | One of the key components of any
WordPress site is the index pages.
| | 00:04 | Simply put, an index page shows a
list of posts from the site depending on
| | 00:09 | what you're asking for.
| | 00:11 | The most well-known of the index pages
is the blog page, which displays all the
| | 00:16 | posts of the site in reverse chorological order.
| | 00:19 | Other index pages include
category index and archive indexes.
| | 00:24 | The index pages in a WordPress theme
or child theme live in a hierarchy and
| | 00:28 | kick in at different times.
| | 00:30 | Understanding which index page template
handles and displays what content will
| | 00:35 | help you customize the look and feel
of your site and also avoid a lot of
| | 00:39 | frustration when things don't
display the way you intended.
| | 00:42 | If you look at this graphic of the
WordPress template hierarchy, you can see how
| | 00:46 | the different index pages
kick in and when they kick in.
| | 00:49 | What happens when you display any
page in WordPress is the database and the
| | 00:53 | browser cooperate to
figure out what template to use.
| | 00:56 | For example, if we're looking at a category page,
| | 00:59 | this is what would happen.
| | 01:01 | WordPress would say, "What kind of page is it?"
| | 01:03 | It's an archive page and
it's a category archive.
| | 01:05 | "All right, do we have a file named
category- and then the slug for this category,
| | 01:12 | or the name for the category?
| | 01:13 | If not, do we have a template called
category- and then the number ID for that template?
| | 01:19 | If not, do we have a file called category.php?"
| | 01:24 | Chances are you do, and in
that case we're going to use that
| | 01:27 | category.php template.
| | 01:29 | The same goes for custom taxonomies,
tags, author archives, date archives,
| | 01:36 | and general archives.
| | 01:38 | Looking at the 2012 folder, you'll see we
have most of these different index page
| | 01:43 | templates already in existence.
| | 01:45 | We have the archive template;
| | 01:47 | we have the author index
template, the category index template.
| | 01:50 | And if we scroll down, you'll see we
have the regular index template. We also
| | 01:54 | have a tag index template and
even a search index template.
| | 01:58 | All of these templates kick in when those
specific types of content are asked for.
| | 02:02 | So let's take a look at how they work exactly.
| | 02:05 | If you look at the index.php
template, you see that off the very top,
| | 02:10 | you have a commented-out section that
explains what this template does, and it
| | 02:14 | even has a link right to that graphic
of the template hierarchy in WordPress.
| | 02:19 | If you look at the body, you'll see exactly
what happens when you use an index template.
| | 02:24 | WordPress says, while you have
posts, show each of the posts using the
| | 02:29 | following template content.
| | 02:31 | This means it's looking for a file called
content- and then the name of the post format.
| | 02:36 | In older themes you won't see this
get_template_part call; instead, you'll see
| | 02:40 | the actual code to display
all the contents for each post.
| | 02:44 | But more recent themes use this
function because it becomes easier to manage.
| | 02:49 | So what happens here is, for each post
we're actually calling this file called
| | 02:53 | content and then we're
displaying the content from that file.
| | 02:57 | We need to look at content.php as well.
| | 02:59 | You can see here, inside 2012, that we
have a file called content.php and then
| | 03:04 | we also have content files for each of the main
post formats, aside, image, link, and so on.
| | 03:11 | We even have one for page.
| | 03:14 | If we look at content, you'll see that
all that happens here inside the loop is we
| | 03:19 | display the content for each post.
| | 03:22 | We get the post thumbnail, we get the
title, we get the comments link, and we
| | 03:28 | get either an excerpt or the contents,
depending on what type of archive this is.
| | 03:32 | So as you can see, just like with the
page templates, the index page templates
| | 03:37 | work in collaboration with the content
templates to display all the content.
| | 03:43 | Understanding how the index pages work
will help you come up with, and implement,
| | 03:47 | new and exciting ways to display content.
| | 03:50 | More importantly though, it'll help
you troubleshoot potential problems when
| | 03:54 | something doesn't display the way you
intended, because now that you know how
| | 03:58 | the template structure works, you can
track down the correct template and make
| | 04:02 | changes to that template when
things aren't displaying correctly.
| | Collapse this transcript |
| Adding author, date, and time information to the index loop| 00:00 | Once you start personalizing your child
theme, you'll probably want to make changes
| | 00:04 | to the index pages, as well
as a single posts and pages.
| | 00:07 | Working with the index templates
require a bit more thinking on your end, but
| | 00:11 | it's not any more complicated, and you
can produce some pretty cool results
| | 00:15 | with very little effort.
| | 00:16 | In the 2012 Theme, the only thing you see
under the post title is a link to the
| | 00:22 | comments, as you can see right here.
| | 00:24 | If you want to know who wrote the
story, when it was published, or any other
| | 00:27 | information, you need to scroll all
the way down to the bottom of the post.
| | 00:31 | I personally don't think this makes any sense.
| | 00:33 | I think the author name and the
publishing date should be at the very top, along
| | 00:38 | with a link to the comments.
| | 00:39 | So that's what we're going to do.
| | 00:41 | A little earlier in the course we took a
brief look at how the index page works,
| | 00:46 | so let's just quickly look back at that file.
| | 00:48 | If we look at index.php, you'll see
that inside the loop where we're jumping
| | 00:54 | through each of the individual posts
and displaying their content, what we're
| | 00:57 | doing is actually using a separate file
called content to display that content.
| | 01:03 | So it's this file,
content.php, that we're going to change.
| | 01:08 | The first step when working with a
child theme is always to grab the file and
| | 01:12 | copy it into your child theme.
| | 01:15 | Now we can modify it without
damaging the original file.
| | 01:17 | When I open this file the first
thing you want to find out is where the
| | 01:22 | content I want to use is.
| | 01:25 | Looking at the post, I see that I have
a link to the comments at the very
| | 01:29 | top, under the title.
| | 01:30 | And looking inside my template file, I can
see that we have the comments right down here.
| | 01:36 | If comments are open then
display the Comments pop-up link.
| | 01:39 | So this is where I need to place a new content.
| | 01:42 | So I'll make some space here, just so it's
easier to follow, and then I can move on.
| | 01:48 | I also know that the information I
want to display already exists in this
| | 01:52 | template, because down here at the bottom of
the page I have the date and other information.
| | 01:57 | So the first thing I'm going to do is
try to get all this information to display
| | 02:00 | at the very top as well.
| | 02:02 | Back in my template, I can scroll down.
Here I find the content, which means it
| | 02:07 | has to be underneath here, and
underneath the content we find this footer class
| | 02:11 | entry meta that has a function in
it called twentytwelve_entry_meta.
| | 02:15 | This is probably the function that's
inserting that content, so I'm going to
| | 02:19 | test that by simply copying the
function and the footer class and placing
| | 02:25 | it before my comments.
| | 02:27 | I'll close the footer, just to clean
up the markup, and then test my page.
| | 02:34 | I'll reload the page in the browser,
and now I see at the top I have the same
| | 02:39 | information at the top as I have in the bottom.
| | 02:42 | But this is not entirely the information I want.
| | 02:45 | It's a lot of information, but it's
not the information I want to use.
| | 02:48 | All I need is the author name and the date.
| | 02:51 | Now I know that this is generated from
a function, because I can see it here,
| | 02:56 | twentytwelve_entry_meta.
| | 02:57 | So what I want to do now is grab
some components of that function and put
| | 03:02 | them into my template.
| | 03:03 | The function is contained within a file
called functions.php, and we'll look in
| | 03:08 | more detail at functions.php later, but
now we're going to get a sneak preview.
| | 03:12 | I'll go to my twentytwelve folder and
find functions.php. It's right here.
| | 03:18 | I'll open it and go down to line 319.
| | 03:20 | And here we have that
function, twentytwelve_entry_meta.
| | 03:29 | Now this function does a lot of things,
and I only need small components of it.
| | 03:33 | What I want is the date and the author.
| | 03:37 | These two functions are actually
advanced functions that create two
| | 03:41 | variables--date and author--and then
populate those variables with the links
| | 03:45 | to the date and the actual date
information, and links to the author and the
| | 03:50 | author information.
| | 03:51 | So I'm simply going to copy these two
variables as they are and paste them
| | 03:56 | into my new footer here.
| | 04:00 | So I'll replace the function with
this content I just copied, and I'll just
| | 04:06 | clean it up a bit so that it looks better.
| | 04:10 | And then I have to display the content
here. So because I have the content in
| | 04:14 | variables, all I have to do is say echo
and then echo out the variables.
| | 04:19 | So just so I see what is going on,
I'm going to put in some text here.
| | 04:22 | I'll say Date:, space, and then
put in the date variable, and then date
| | 04:32 | variable, space, Author:, space,
and then put in the author variable.
| | 04:37 | I'll save this and reload my page, and
now you see it says date and then a link
| | 04:45 | to the date archive, and author
and a link to the author archive.
| | 04:49 | This is almost what I want.
| | 04:51 | I don't want it to look like this, and I also
wanted the Comment link to go up next to it.
| | 04:56 | So I'll go back and do some more editing.
| | 04:58 | I'll change the text around here so
it says By and then the name of Author.
| | 05:05 | And then say punctuation mark,
Published on, and the date. And then because I
| | 05:18 | already have the comments here,
| | 05:20 | all I'm going to do is take this code
and place it into the footer and then
| | 05:25 | make some small changes to it.
| | 05:26 | So I'll grab the code I need, here,
cut it out, and paste that in directly
| | 05:36 | underneath the line I just created.
And then I already know I don't need these
| | 05:42 | divs because they're the ones
that are splitting these two lines.
| | 05:44 | So I'm going to take the divs out,
and I'll take out this redundant PHP delimiter.
| | 05:50 | Save my template, reload the page,
and now it says, By mor10, Published on
| | 05:57 | October 16, Leave a reply.
| | 05:59 | Now if you thought it was hard to
follow exactly what I did here and you are
| | 06:04 | afraid of writing all this
code to make sure it works,
| | 06:07 | I created a code snippet for you
that you can use to just paste right in.
| | 06:11 | If you go to the codesnippets file
in the exercise files and go down to
| | 06:16 | Chapter 4.2, you'll find both the
simple way--that is, just moving the function
| | 06:23 | itself--and you'll also find the
advanced option, where we get the date and
| | 06:28 | author variables and then
display them, along with the comments.
| | 06:32 | So all we have to do is copy out
the entire section here from footer to
| | 06:37 | end footer and paste it into content.php
and you'll get the same results that I got.
| | 06:43 | Here you've seen several different things:
| | 06:45 | how the content.php template file
interacts with multiple different other
| | 06:49 | template files and uses functions
from those files to display content;
| | 06:53 | you've also seen how we can use
existing code as building blocks to create new
| | 06:57 | effects; and you've gotten a sneak
peek at the functions.php file that we'll
| | 07:02 | look at in more detail later.
| | 07:03 | But I want you to take away from this
is any content you can see on the
| | 07:08 | page you can always grab and put
somewhere else in your template
| | 07:11 | simply by copying wherever it comes
from and placing it somewhere else.
| | Collapse this transcript |
| Changing the appearance of category index pages| 00:00 | WordPress has multiple different index
templates that kick in when different
| | 00:04 | indexes are called, the most notable--
and the ones you should see in pretty much
| | 00:09 | every WordPress theme--are index.php,
category.php, tag.php, and archive.php.
| | 00:16 | The names are self-explanatory.
| | 00:19 | Sometimes you want different index
pages to appear differently in your sites.
| | 00:24 | I often find that while on the main
index page it makes sense to have longer
| | 00:28 | versions of the posts,
with images and full text,
| | 00:31 | on category and archive index pages
it makes more sense to have shorter
| | 00:35 | versions and maybe no images.
| | 00:37 | This can be accommodated by calling for
an excerpt instead of the content of a
| | 00:42 | post when the category or
archive templates are used.
| | 00:46 | If you look at the site the way it is
now, you can see that on the front page, or the main
| | 00:50 | index page, we have the full post, web
images, and if there's a featured image,
| | 00:55 | the featured image appears at the top.
| | 00:57 | If we go to the category archive
page, we'll see the exact same thing.
| | 01:02 | Here we have the full post with images,
and if there is a featured image, it's
| | 01:06 | featured at the top.
| | 01:07 | What I want to do is make the content
of a post into just an excerpt, and I also
| | 01:12 | take want to take away the featured image.
| | 01:14 | In a previous movie we looked
closely at index.php template.
| | 01:19 | Now we are going to look out the
category.php template instead, to find out what
| | 01:23 | we need to change to make the
content into just an excerpt.
| | 01:28 | So I'll open the category template and take
a look at content within the category template.
| | 01:33 | And here you see, just like with the
index template, that we have a loop.
| | 01:36 | It looks for all the posts and then displays each
post using that same template file, content.php.
| | 01:43 | So because we want to change the
content from a full content into the excerpt,
| | 01:48 | we have to change that in content.php.
| | 01:51 | I've already made changes to
content.php in my child theme already, so I'll keep
| | 01:56 | making changes to the
same file in my child theme.
| | 01:59 | I'll open it in my code editor and then I
do find where I should make the changes.
| | 02:03 | When I scroll down here, you'll see
that under all the header information I
| | 02:10 | have the section here.
| | 02:11 | It starts with is_search and then it
shows the_excerpt, if this is_search page,
| | 02:17 | and otherwise it shows the_content.
| | 02:20 | What you're seeing here is that we
already have a conditional statement, this if
| | 02:23 | statement, that tests whether or not
this is a search archive, and then it
| | 02:27 | displays the excerpt.
| | 02:29 | So what I need to do is add some
conditions to the conditional statement so
| | 02:33 | that we can test for more
than just a search archive.
| | 02:36 | Fortunately for us, just like
pretty much everything else in WordPress,
| | 02:40 | this has already been kind
of taken care of for us.
| | 02:43 | There are conditional tags available
that can test for all the things that
| | 02:47 | we want to test for.
| | 02:48 | There is a conditional tag for Category Pages.
| | 02:51 | It's simply is_category. There's also one
for Tag Pages, is_tag. There is one for
| | 02:59 | Archive Pages, is_archive, and so on.
I think you see the pattern here.
| | 03:04 | So what we need to do is add these
conditionals into the existing conditional
| | 03:09 | statement in the template.
| | 03:11 | It already says if is_search,
| | 03:13 | so I am just going to append
the other conditionals after that.
| | 03:16 | What I want to say if(is_search) or--
and or is signified by two pipes like
| | 03:22 | this--is_archive(), or
is_category(), or is_tag().
| | 03:37 | With the change made, I'm going to save
the template, go back to my browser, and
| | 03:41 | reload this Category page.
| | 03:43 | And you'll see that now, instead of the
full content, we just have an excerpt for
| | 03:48 | each post, which means we can
see far more posts in a smaller page.
| | 03:52 | But I also said I wanted to get rid of
the featured image, because you can see
| | 03:55 | the featured image still
takes up quite a lot of space.
| | 03:59 | To do that I am simply going to copy
this existing conditional statement and
| | 04:03 | append it to where the
featured image is inserted.
| | 04:07 | So I'll copy the entire statement, and then
I'll find the featured image, which is
| | 04:13 | all the way up here at the top.
Right under <header class= "entry-header" > we
| | 04:17 | have the_post_thumbnail.
| | 04:18 | And I need to wrap the_post_thumbnail
in this conditional statement, so I'll
| | 04:22 | paste the statement in.
| | 04:25 | Now all we have to do is end it so
that the conditional stops, lets say
| | 04:29 | <?php endif, end the php.
| | 04:35 | And now what I'm doing is I'm saying
if this is search archive, an archive, a
| | 04:41 | category archive, or a tag archive,
then display the_post_thumbnail, which is
| | 04:45 | exactly opposite of what I want to say.
| | 04:48 | So what I need to do is reverse the
statement so that we change it from saying
| | 04:52 | it this is search to say if this is
not search or is not archive, et cetera.
| | 04:58 | To do that I am going to wrap the
conditional statements in another parenthesis,
| | 05:04 | and I am going to put an
exclamation point in front of it.
| | 05:08 | So now we're saying if it's not
one of these conditionals then
| | 05:11 | show the_post_thumbnail.
| | 05:12 | I'll save my new template and reload
the page again and you see that now the
| | 05:19 | featured images appear, and we have a
much shorter category archive page. But
| | 05:25 | when I go to the front page, you still
have the is images, the full stories, and
| | 05:31 | the featured images.
| | 05:32 | Here again you see an example of
how rather than making huge changes and
| | 05:36 | building things from scratch, we can
reconfigure existing functions and just move
| | 05:40 | them around to get completely different results.
| | Collapse this transcript |
|
|
5. Modifying and Adding FunctionsIntroducing functions.php| 00:00 | At the core of all WordPress themes
lies a file named functions.php.
| | 00:05 | As the name suggests, the functions.php file
contains core functions that make the theme work.
| | 00:12 | These functions range from simple
bits of code that activate code WordPress
| | 00:17 | functionality to advanced functions you
can modify to add new functionality and
| | 00:21 | new features to the theme and to the site.
| | 00:25 | Understanding the role and function of
functions.php will enable you to go from
| | 00:30 | simply messing with the template files
in CSS to adding whole new levels of
| | 00:34 | awesomeness to your site.
| | 00:35 | Yes, I said it: awesomeness.
| | 00:39 | Opening functions.php for the first
time can be a bit of a shock, because it's a
| | 00:44 | very complicated file--or at least it
appears to be a very complicated file--and
| | 00:48 | is also chock-full of lots of stuff
that doesn't seem to be related to each
| | 00:53 | other in any sensible way.
| | 00:54 | The good theme about the twentytwelve theme and the
other core themes from WordPress is that
| | 00:59 | they come heavily documented,
| | 01:01 | meaning there's lots of explanations
inside the files that explain what these files do.
| | 01:06 | And that's especially true
for functions.php in twentytwelve.
| | 01:10 | There is lots of documentation
explaining what's going on throughout
| | 01:14 | the functions file.
| | 01:16 | If you look at the functions file,
I'll show you some examples of what this
| | 01:19 | file actually does.
| | 01:21 | If you skip down to line 61,
you'll see here we have a simple function
| | 01:26 | called add_theme_support.
| | 01:28 | This function adds different types of
theme support, for example post-formats.
| | 01:32 | So here you can see post-formats are
activated and then there is a list of what
| | 01:38 | types of post formats are activated,
| | 01:39 | because there are several different
types of formats you can activate if you
| | 01:43 | want to and twentytwelve uses
five of these post formats.
| | 01:48 | Directly underneath, you have this
function, register_nav_menu, where the different
| | 01:53 | nav menus are registered, so that you
can creates menus inside WordPress Admin.
| | 01:58 | And below that, you have add_theme_
support for a custom background, so that you
| | 02:03 | can set different custom background colors
for your theme from within WordPress Admin.
| | 02:09 | Moving down the file, you'll see on line 195
| | 02:13 | we have the function that
creates all the widgetized areas.
| | 02:16 | Here you can see we have three widgetized areas.
| | 02:18 | We have Main Sidebar, and then we have
First Front Page Widget Area and Second
| | 02:24 | Front Page Widget Area.
| | 02:26 | So when you ask where the widgets
come from, this is actually where they
| | 02:29 | come from, functions.php.
| | 02:32 | And if we scroll further down, to line 258,
you'll see where the comments come from.
| | 02:37 | This is actually after the template that
creates the comments section on your site.
| | 02:41 | So when you want to work with comments
you need to work with the code inside
| | 02:45 | function.php and also inside comments.php.
| | 02:49 | What I have shown you here is
just a small selection of what's in
| | 02:53 | functions.php, and we're now going to
work with function.php to augment what's in
| | 02:58 | there already and also
add new stuff to the file.
| | 03:01 | functions.php holds a lot of
behavioral elements of a WordPress theme, and
| | 03:06 | understanding how it works and how to
interact with it will allow you to make
| | 03:10 | truly advanced themes that
work the way you want them to.
| | 03:14 | Fortunately, the 2012 developers have
left excellent documentation right in
| | 03:19 | functions.php file, so it's easy for
you to figure out what's going on.
| | Collapse this transcript |
| Overriding existing functions| 00:00 | Depending on how well a parent theme is
built, you can use a series of different
| | 00:04 | techniques to either override or
overrule functions in that parent theme.
| | 00:09 | By overriding or overruling the
functions, you're telling WordPress to ignore the
| | 00:13 | function that's in the parent theme or
augment the function that's in the parent
| | 00:18 | theme to produce the result you want.
| | 00:20 | How to override a function depends on
how well the theme is written, and also how
| | 00:25 | that function is included in the theme.
| | 00:27 | Most well-written themes wrap functions
in conditional statements so that they
| | 00:31 | can easily be overwritten by child themes.
| | 00:34 | When they are not wrapped in these
statements you're usually given either a
| | 00:37 | filter or an action hook that you
can hook into or change the actions you
| | 00:42 | can interact with it.
| | 00:43 | Let's a take a look at some of these
things in the twentytwelve theme, so you
| | 00:47 | can see how you can interact with it.
| | 00:49 | If you go down to line 28, you'll see an
example of how a function is included so
| | 00:54 | that you can override it with your child theme.
| | 00:57 | The function here sets a default content
width for the site, meaning if you add
| | 01:02 | an image and it's larger than the
value set here--625 pixels--it'll
| | 01:06 | automatically be scrunched
down to fit within 625 pixels.
| | 01:10 | What happens here is WordPress says, if
this value is not already set, then use
| | 01:16 | this value. That's because of how
functions.php interacts with the functions.php
| | 01:22 | file in your child theme.
| | 01:24 | Unlike with a style sheet where the
parent theme style sheet is called first and
| | 01:28 | then the child theme style sheet is called,
| | 01:30 | when it comes to functions.php, the
child theme functions.php file is called
| | 01:35 | first and then the parent theme
functions.php is called afterwards.
| | 01:40 | Meaning, if you have set content_width
in your child theme, this condition says
| | 01:45 | it's already set; therefore, we're not
going to set it in the parent theme.
| | 01:49 | On line 228 you see a different
type of conditional statement.
| | 01:53 | Here it says if function exists, or
rather if not function exists, meaning if the
| | 01:59 | child theme does not have the function
twentytwelve_content_nav, then use this
| | 02:04 | function instead. That also means if you
want to create a different content nav
| | 02:08 | function in your child theme, you simply
create it inside your child theme and then
| | 02:12 | it will automatically override
the function in the parent theme.
| | 02:15 | On line 177 you see a
different type of interactive feature.
| | 02:20 | This is a filter. It says add_filter, wp_title.
| | 02:24 | A filter is different from a function,
in that when you have a filter you can
| | 02:28 | pass information to that filter and
change the behavior of the function. So this
| | 02:32 | filter interacts with the function
above it, this one, twentytwelve_wp_title.
| | 02:37 | It's up here, this whole function.
And what you can do in your child theme is add
| | 02:42 | information with a filter that then
gets passed into this function and you can
| | 02:46 | change to function through that filter.
So it's a more advanced option when you
| | 02:50 | want to change maybe a word or a link or
something like that in that function
| | 02:54 | without having to rebuild
the function in the process.
| | 02:57 | Overriding or removing functions
allows you to take control of the
| | 03:01 | functionality of your child theme and
do things not originally intended by the
| | 03:05 | parent theme author.
| | 03:06 | It can be very useful, but be aware
that when you start messing with functions
| | 03:11 | weird things tend to happen, so move slowly.
| | 03:13 | Fortunately, by doing all of this in
a child theme you're never going to do
| | 03:17 | anything that will actually break the
site, and everything is always reversible.
| | Collapse this transcript |
| Adding pagination to index pages| 00:00 | Let's look at an example of how you can
override an existing function found in
| | 00:04 | twentytwelve and replace it with a
whole new function in your child theme.
| | 00:08 | Though they're standard in WordPress
themes, I don't particularly like the Older
| | 00:12 | posts and the Newer posts links
at the bottom of index pages.
| | 00:16 | You can see it down here at the bottom.
It says Older posts. When you click on it
| | 00:20 | you go to page two and then you get
either Older posts or Newer posts.
| | 00:24 | I much prefer proper pagination lists
where I can see how many total pages there
| | 00:29 | are, and I can navigate in a more advanced way.
| | 00:31 | Now I want to replace the existing
function that creates this Older posts and
| | 00:36 | Newer posts link with a
proper navigation menu instead.
| | 00:41 | twentytwelve comes with a
function called twentytwelve_content_nav.
| | 00:45 | If we go into functions.php and search
for it--I'll just search for a content_nav;
| | 00:54 | here it is--you'll see that the function down here
is wrapped in a conditional statement
| | 01:00 | that tests whether or not the child
theme already has this function defined.
| | 01:04 | So all we need to do is create a new
function in our child theme functions.php
| | 01:09 | file, and that one will automatically
override the function in the parent theme.
| | 01:14 | So I'm going to copy the start of this
function here, and then I'm going to go
| | 01:19 | and create a new file, and I'll save
it under my child theme folder as
| | 01:28 | functions.php. Make sure it's a PHP file.
| | 01:37 | And here I'm going to start it with a
php delimiter and end it with a php
| | 01:43 | delimiter and then just put in a
comment to explaining what it is, and then I
| | 01:50 | can put in my new function here.
| | 01:52 | Now, I know I don't need this variable
nav_id anymore because I've done some
| | 01:55 | experimentation before.
| | 01:57 | All I'm going to do is define the
function itself and then end the function,
| | 02:01 | and if I just save this file now and
reload my page in my browser, you'll see
| | 02:08 | that I lost my navigation completely.
| | 02:10 | That's because my new function here is taking
over and that function isn't doing anything.
| | 02:15 | The next step is to find a function
that will work the way I want it to, and for
| | 02:19 | that I'm going to go to
the all-powerful Internet.
| | 02:22 | The great thing about open source is
that a lot of people come up with good
| | 02:26 | ideas and then they publish them online.
| | 02:28 | I do that myself, and most people who
work with WordPress will publish code
| | 02:32 | snippets that you can just take and
augment and use for your own purposes.
| | 02:37 | For pagination I found this great
article called How to build a WordPress Post
| | 02:41 | Pagination without plugin at kriesi.at.
| | 02:46 | This is a solution I've used many times,
though I've augmented it quite a bit,
| | 02:50 | and this is the solution we're
going to use in the theme now.
| | 02:54 | If you read this article, you'll see
the explanation of how the function works
| | 02:58 | with code examples and also how the
style works, and you can see how this all
| | 03:03 | fits together so you get
this nice navigation menu.
| | 03:06 | What I have done for this course is
I've supplied you with an alternate version
| | 03:09 | of this code specifically for the
twentytwelve child theme that you can copy
| | 03:14 | out of the code snippets file and
paste into your functions.php file.
| | 03:17 | So we'll go to the codesnippets file,
scroll down to this chapter number, 5.3,
| | 03:26 | and here you'll find the function.
| | 03:27 | So I will copy it all out, go into my
functions.php file, in my child theme, and
| | 03:37 | I'll just paste all that code in.
| | 03:40 | You see here it's quite a lot of code,
and I've also added some extra comments
| | 03:43 | here, along with a link directly to
that original article, and I've made some
| | 03:47 | small changes to it to make it work the
way I want it to, but you're free to make
| | 03:51 | changes to it yourself if you want to as well.
| | 03:54 | I'll save this and reload my page
here, and you'll see now we have
| | 04:00 | navigation here at the bottom.
| | 04:02 | So we can jump between pages if we want to.
| | 04:09 | Scroll down. And what's cool about this
particular pagination solution is that
| | 04:17 | if I go in and change my settings here
so that it appears like we have a lot of
| | 04:22 | content--I'll do that by going into
Settings > Reading, and setting it so that
| | 04:26 | we only see one post per index page--
| | 04:31 | you'll see that at the bottom of the
page not only do we get the numbers, but we
| | 04:36 | also get a Next button so you can jump
to the next one, and you get this button
| | 04:40 | at the end that takes you
to the very end of the list.
| | 04:44 | But this doesn't look very good;
| | 04:45 | I need some style to augment it
so that it looks nice on my site.
| | 04:49 | So I'll go back to my code snippets,
scroll down, and here you'll find
| | 04:53 | pagination styles that I've created
specifically for this theme so that it works.
| | 04:57 | We can copy that out, go up to the
style sheet in child of twentytwelve, open
| | 05:02 | the style sheet in your child
theme, and then paste in the new styles.
| | 05:06 | I'll paste them in here at the bottom.
| | 05:08 | We see there's quite a few styles
here that will style the different
| | 05:12 | elements. Save that, reload your
page again, and now you have a nice
| | 05:18 | pagination bar here at the bottom
| | 05:19 | that works exactly the way you
would expect pagination to work.
| | 05:26 | Now you can see why using a properly
built theme as your parent theme saves
| | 05:30 | you a lot of time and headache.
Because the twentytwelve_content_nav function
| | 05:35 | was properly wrapped in a conditional
statement, we have an easy time overriding
| | 05:39 | it and adding in new functionality.
| | 05:41 | As a result, we've now added a great new
functional pagination system to all our
| | 05:46 | index pages with minimal effort.
| | Collapse this transcript |
| Adding to existing functions| 00:00 | Sometimes overwriting an existing
function is not what you want to do.
| | 00:05 | You'll will often find that a function
has a lot of elements you already want
| | 00:08 | and all you want to do is add some more to it.
| | 00:11 | In those cases, you can use your child
theme functions.php file to add the extra
| | 00:15 | functionality to the existing function.
| | 00:18 | There are some great examples of
how you can add on to existing
| | 00:21 | functions in twentytwelve and many of these
examples you'll find in most WordPress themes.
| | 00:27 | If you go to the functions.php file
for twentytwelve and you go to line 64,
| | 00:31 | you'll find register_nav_menu.
| | 00:37 | This is where you register the
main menu inside your WordPress site.
| | 00:41 | If you look at the site, you see there is
a nav menu right here at the top and if
| | 00:45 | I go into the Dashboard > Menus,
you'll see that menu is listed right here.
| | 00:51 | Your theme supports one menu
and it's called Primary menu.
| | 00:54 | Going back into functions.php,
you'll see this is where Primary menu is defined.
| | 01:00 | In your child theme you can now add
additional menus, simply by duplicating this
| | 01:04 | line in your child theme and wrapping
it in a function so that it gets called.
| | 01:08 | That way you can add several different
menus to your site by simply adding onto
| | 01:13 | the existing function.
| | 01:14 | The same goes for the sidebar.
| | 01:16 | If you go to line 195, you find this
function, twentytwelve_widgets_init, and this
| | 01:23 | function creates a sidebar.
| | 01:25 | So here you see there're
three sidebars being called.
| | 01:28 | In your child theme you're allowed to
make your own widget init function, and in
| | 01:32 | that function you can register more sidebars.
| | 01:35 | These sidebars will then be appended
to the existing ones so now you can have
| | 01:39 | more sidebars then you had previously.
| | 01:41 | What's important to note about these
functions, both register_nav menu and
| | 01:45 | register_sidebar, is that they're
wrapped in additional functions.
| | 01:48 | You'll see here register_sidebar
is wrapped in this existing function,
| | 01:53 | twentytwelve_widgets_init, and if
go up to register_nav menu on line 64,
| | 01:57 | you'll see that register_nav menu is
actually contained within a function
| | 02:03 | called twentytwelve_setup.
| | 02:05 | In your child theme you can create a
new function and run that function, and
| | 02:09 | within that function you would
then puts register_nav menu or
| | 02:12 | register_sidebar or other things.
| | 02:14 | The other cool thing about this is
there's no limit to how many you can add.
| | 02:18 | You can have 100 menus or 200
sidebar areas if you wanted to,
| | 02:22 | although that would be hard to manage.
But the reality is there is no limit here.
| | 02:26 | You just hook in and then
you add on whatever you need.
| | 02:29 | There is one important
thing to keep in mind, though.
| | 02:32 | Remember how I said that functions.php
from your child theme gets called before
| | 02:36 | functions.php from your parent theme.
| | 02:39 | That means you can't create a new
function called twentytwelve_setup.
| | 02:44 | If you do that, it'll crash everything,
because there's no conditional statement here.
| | 02:48 | If you want to make a new function,
you need to call something else, like my
| | 02:52 | theme_setup and then you
can call a new menu inside it.
| | 02:56 | You also not create a new menu called
primary menu, because there is already one
| | 02:59 | created with that name.
| | 03:01 | And you have to remember
that your menu calls first.
| | 03:04 | So if you create a new menu called
Primary, that's the one that will kick in, and
| | 03:08 | it'll ignore the one that's in here.
| | 03:10 | Building child themes is all
about doing more with less.
| | 03:13 | Adding to a function instead of
overriding it or overwriting it is a simple way
| | 03:18 | of adding functionality with minimal effort.
| | Collapse this transcript |
| Adding a new footer menu to Twenty Twelve| 00:00 | Pretty much all WordPress themes come
with a main menu in the header, and
| | 00:04 | most of these themes have the main menu
wired to the WordPress menu system for
| | 00:08 | easy configuration.
| | 00:10 | I'd like to add an extra menu in the
footer as well so that if a person has
| | 00:14 | reached to bottom of the site, they
can navigate to all my important pages
| | 00:18 | without having to scroll
back to the top of the page.
| | 00:21 | Using a child theme, adding
the menu like this, is very easy.
| | 00:25 | To add a new menu we have to do three things.
| | 00:28 | We have to add the menu to the
existing menu function using function.php,
| | 00:32 | we than have to add the menu to the
template files, and then we have to style
| | 00:37 | the menu to make it look nice.
| | 00:39 | To start off with, we need to create a new
function that we can register a new nav menu in.
| | 00:44 | So I am going to copy the original
function that creates the original menu from
| | 00:49 | the function.php file in the parent
theme and then I am going to open the
| | 00:55 | functions.php file in my child theme
and create a new function in which I'll
| | 01:00 | register the new menu.
| | 01:02 | So I'll start by creating a new function.
| | 01:03 | I'll call it mychildtheme_setup.
And within this function I'm going to place the
| | 01:15 | register_nav menu function.
| | 01:17 | Now I have to change some variables here.
| | 01:19 | I'll change primary to secondary and
I'll change Primary menu to Footer menu,
| | 01:26 | because that's what I want.
| | 01:28 | Now, this won't run on it's own.
| | 01:30 | I also need to add an action that'll
trigger my child theme setup so that it'll
| | 01:35 | run when you open the theme.
| | 01:37 | So I'll go back to the function.php
file and take a look at how that's done.
| | 01:41 | It's right down here, add_action( 'after_
setup_theme,' and then it's calls the function.
| | 01:46 | So I'll copy that, paste it in, and then I
just have to change the function that's
| | 01:53 | being called to match
the new function I created.
| | 02:00 | I'll save that and when I go to Menus
in the backend of my site, you'll see
| | 02:06 | we now have two menus:
| | 02:06 | we have the Footer menu and Primary menu.
| | 02:09 | This doesn't look right though, because the
footer menu is listed before the header menu.
| | 02:14 | That's actually because, as I explained
before, the functions.php file from your
| | 02:18 | child theme is called before the
functions.php file from your parent theme.
| | 02:23 | But we can fix it quite easily.
| | 02:25 | You can delay the action that's happing
here by simply going comma and putting
| | 02:30 | in a number like 11.
| | 02:32 | That just means that this action will be
called after everything else has been called.
| | 02:37 | So when I saved this and reload my
Admin page, Primary menu is on top and Footer
| | 02:43 | menu is on the bottom.
| | 02:45 | Now you see I have already assigned
this Footer menu to the footer menu area,
| | 02:50 | but if I have visit my site and scroll
down to the bottom, there is no menu.
| | 02:56 | That's because I still need
to add the menu to my theme.
| | 03:00 | Now, there are two main methods for
calling a menu into a template file.
| | 03:04 | You can either call it based on the
theme location--that is, the name that we put
| | 03:08 | in, either primary or secondary or
something else--or you can put it in based of
| | 03:13 | the name the menu is given inside WordPress admin.
| | 03:17 | They're used for different purposes.
| | 03:19 | If you want to make a menu area where
people can assign any menu they want to
| | 03:23 | it, you would do it like this.
| | 03:24 | You would call the theme location, because
then people can assign whatever menu they want.
| | 03:29 | If you want to make it easy for people
to use your theme and say if you decide
| | 03:34 | to make menu that's called Footer
menu, it automatically appears in the
| | 03:37 | location, then you would use
this function instead, name.
| | 03:40 | I'm going to use the
first one here, theme-location.
| | 03:45 | I know where I want to put the menu.
| | 03:46 | It's going to be in the footer.
| | 03:48 | So logically, I have to go to my parent
theme, find the footer template, and copy
| | 03:52 | it over to my child theme.
| | 03:55 | Now I can edit my child theme footer
template and place my menu here.
| | 04:01 | So I'll say nav id="footer_menu"> and
then inside here I'll put that function.
| | 04:13 | And the location I gave it is
in the function file, secondary.
| | 04:17 | So I'll copy out that secondary and then I'll
end my array, end the function, end my PHP delimiter,
| | 04:28 | save it, and if everything went right,
we now have a menu here at the bottom.
| | 04:34 | It doesn't look very nice,
but it is definitely a menu.
| | 04:37 | Now we need to add styling to the
menu to make it match the rest of the site.
| | 04:41 | However, I already have a menu on my
site that I think looks pretty nice and I
| | 04:47 | don't really want the footer
menu to look any different.
| | 04:50 | So instead of creating all new styles
for the menu, I'm just going to cheat.
| | 04:54 | I'm going to go to the header file
right here and then I'm going to find the
| | 05:01 | call to the menu right here.
| | 05:03 | I'm simply going to copy it out and
paste it in here in my footer file in place
| | 05:10 | of that functionality I created.
And then I'm going change the ID to
| | 05:13 | footer-navigation, change to comment
here at the bottom to footer-navigation,
| | 05:19 | and then I'll take out
these two lines of code here.
| | 05:22 | This is the title for the menu and
the hidden content for people who use
| | 05:28 | text-to-speech browsers.
| | 05:29 | And though that's really important for
you main menu, it's not really all that
| | 05:32 | important for your footer menu.
So I am taking it out.
| | 05:35 | The reason why I'm copying this code
is because I know the code carries with
| | 05:39 | it all the necessary classes to make the
menu use the same styles as the header menu.
| | 05:44 | So all I need to do here is change the
theme_location to secondary, save it,
| | 05:54 | and reload my page.
| | 05:55 | When I scroll down to the bottom, we now
have a nice-looking menu at the footer
| | 06:00 | that's different from the top.
| | 06:02 | So now you can go back to Menus and you
can create two different menus--one for
| | 06:07 | the header and one for the footer--
and assign them to each of them.
| | 06:11 | By adding a menu to the existing menu
functions, we preserved the original menu
| | 06:15 | rather than overwrite it.
| | 06:17 | This way you can add as many menus as
you want and create custom navigation for
| | 06:21 | your visitors to find what they're looking for.
| | Collapse this transcript |
| Adding a new widgetized area to pages| 00:00 | Earlier in this course I talked
briefly about widgetized areas and sidebars.
| | 00:05 | Now we're going to take a look at how you
can add new widgetized areas to your site.
| | 00:10 | One reason you may want to do this is
if you want to offer up different widgets
| | 00:14 | on your pages from those that
are on your index and single posts.
| | 00:18 | To add a whole new widgetized area we
first have to add to the existing function
| | 00:23 | that creates widgetized areas and then
we have to add that area to a new sidebar
| | 00:27 | file, or somewhere else.
| | 00:29 | In our functions.php file you find the
function that registers the sidebars at line 195.
| | 00:36 | It's called twentytwelve_widgets_init,
and in it you have three instances of this
| | 00:41 | register_sidebar function.
| | 00:43 | What we want to do is add another one
of these functions with our new sidebar.
| | 00:47 | So I'm simply going to copy this
register sidebar array out and then I'm going
| | 00:53 | to go to the functions.php file in my
child theme and I'll use this original my
| | 00:58 | child theme setup function and I'll
just put the new widgetized area in here.
| | 01:04 | So I'll paste the code in.
I'll also add a comment at the top--
| | 01:08 | New widgetized sidebar area for pages--
and then I need to change some of these
| | 01:17 | values so that it
appears as a different sidebar.
| | 01:21 | So I'll call this one Page Sidebar and
I'll change the ID to the sidebar-4 and
| | 01:28 | then I'll change the description here
so that it says, Appears on pages only.
| | 01:39 | I'm going to leave the rest the
way it is and then I'm going to save
| | 01:44 | functions.php, go back into
my site, and go to Widgets.
| | 01:48 | Now you see I now have the page sidebar
here at the top as an option, in addition
| | 01:54 | to the main sidebar, first
front page, and second front page.
| | 01:58 | And I can populate Page Sidebar if I wanted to.
| | 02:00 | I'll put in Categories and Archives and
then I'm going to go back to the front
| | 02:07 | page and go to a single
page, and nothing changed.
| | 02:13 | That's because I haven't put
in the new sidebar anywhere,
| | 02:15 | so we're still seeing the original sidebar.
| | 02:17 | What I need to do now is create
a new custom sidebar template.
| | 02:22 | You learned how to do that earlier in
the course, but I'll repeat it now so you
| | 02:25 | can see how it works.
| | 02:27 | I will go and grab the sidebar.php
file and copy it into my child theme.
| | 02:34 | I'll give it a new name.
So I'll call this one sidebar-page.
| | 02:37 | And this is really important,
because that's how we're going to call it.
| | 02:41 | Then I'll open sidebar-page in my code
editor and change what sidebar is being called.
| | 02:46 | You will remember I gave this
sidebar the named sidebar-4,
| | 02:51 | so I'll change this to sidebar-4.
| | 02:55 | Then I can save it, and then I
have to make one more change.
| | 02:58 | I now have to change my page template
to call this new sidebar-page template.
| | 03:03 | So I'll go back to the parent theme,
find my page template, copy it into my
| | 03:09 | child theme, open it, scroll down to
the bottom where the sidebar is being
| | 03:15 | called, and add the value.
| | 03:19 | So now it says get the sidebar page
that's called sidebar-page, which is this one,
| | 03:24 | and this one in turn calls my new
sidebar, as defined in functions.php.
| | 03:29 | I'll save page.php, reload my page in
the browser, and now you see that the
| | 03:36 | sidebar changed for this page.
| | 03:38 | But if I go back to the homepage,
the sidebar is the same as it was before.
| | 03:43 | Widgetized areas are extremely powerful
because they allow you to add advanced
| | 03:47 | content in a very simple way,
through the Widgets Admin panel.
| | 03:51 | Though widgets are most commonly found
in sidebars and footers, you can actually
| | 03:55 | put a widgetized area anywhere you want.
| | 03:58 | Now that you know how to do it,
you can knock yourself out putting
| | 04:01 | widgetized areas anywhere.
| | 04:03 | Just remember that you have to link
all these files together like you saw
| | 04:07 | to make it all work.
| | Collapse this transcript |
| Adding static content to the sidebar| 00:00 | Sidebars are most often used to provide
links and further information about the
| | 00:04 | site to your visitors.
| | 00:06 | This is normally done through widgets,
but in some cases you may want to add
| | 00:10 | some permanent static
content to the sidebar as well.
| | 00:13 | There are many reasons for this,
but one example is if you want to add social
| | 00:18 | media links at the top of
the sidebar permanently.
| | 00:20 | As you can see, in my site right now I
have some links to social media here.
| | 00:25 | They're just regular text links and
they're added in through a widget.
| | 00:30 | So I can go into my Widgets
and show you the actual links.
| | 00:32 | They're right here, under Main
Sidebar in the Text widget, and here is some
| | 00:37 | standard HTML that creates those links.
| | 00:40 | What I want to do is put this code into
my sidebar.php template instead so it's
| | 00:46 | there permanently, no matter what the
widgets do, and I also want to restyle it so
| | 00:51 | that it looks a bit nicer, with
some icons instead of just text.
| | 00:54 | The first thing I need to do is get
the sidebar.php file over in my child
| | 00:59 | theme, so I'll go and find sidebar.php and
copy it over and then I can make changes to it.
| | 01:07 | Now, this gets a little bit tricky
because I know that when you add a widget
| | 01:11 | in, a lot of the styling that's coming
into the widget is actually coming from
| | 01:15 | the functions file.
| | 01:17 | Now, before we start pasting content
directly in here, it's important to
| | 01:20 | understand how the widgets
are inserted into the page.
| | 01:24 | If you look at the function that
creates a widget in the functions file--I can go
| | 01:28 | to the functions.php in the parent
theme and go to register widgets--you see
| | 01:35 | that the function inserts code before
and after the widget, and also defines code
| | 01:41 | before and after the title.
| | 01:43 | So it's really important that we
match this code when we add new code into
| | 01:47 | our sidebar.php file.
| | 01:49 | You see the new widget starts with an
aside that has the ID of the widget and
| | 01:53 | then the class of widget, and then it
also has an h3 with the class of widget-title.
| | 01:58 | So we have to duplicate this
where we want to create our widget.
| | 02:01 | So I'll start off by inserting a new
side directly above where the sidebar
| | 02:07 | is going to appear.
| | 02:10 | I'll give it the ID social-icons, and I'll
also give it the class widget and clear.
| | 02:20 | I'll explain the clear part in a second.
| | 02:22 | Then I'll close my aside and then go
back to functions and take a look, just to
| | 02:29 | make sure I have the same stuff, and then
I also need this h3 class widget title.
| | 02:33 | so I'll put that in, and I
will say, Connect with us!
| | 02:44 | So that's going to be the title of my widget.
| | 02:46 | Now I can copy in the
code from my original widget.
| | 02:49 | It's right here, so I'll copy all that
in, paste it in, and then I just need to
| | 02:57 | do some quick cleanup here, because I
like all my code to be nice and clean.
| | 03:06 | And now when I save this in the new
sidebar.php file and I open my site I see I
| | 03:13 | now have Connect with us!
| | 03:15 | with these links, and then I have
the widget directly underneath.
| | 03:17 | So now I can get rid of my widget,
so I'll go and remove the widget.
| | 03:22 | I'll dump it down here in inactive
widgets. And when I reload the page again,
| | 03:34 | you see we now have the widget we
want up here, but it's permanent.
| | 03:38 | Now I want to style this code so
that it looks the way I want it to.
| | 03:42 | Now before I started this I went online and I
found some social media icons I want to use.
| | 03:47 | They're here. Now I want to place these inside my
child theme so that I can use them to style.
| | 03:52 | So I'll go to my child theme folder and
I'll create a new folder called images
| | 03:59 | and then place these four
icons inside that folder.
| | 04:06 | Now I can go to my style sheet and call them.
| | 04:11 | So first I have to find a
logical place to put my code.
| | 04:15 | I'd say it's right here before
pagination. And now I need to style that
| | 04:20 | content that I put in.
| | 04:21 | If you look at the code I created,
you'll see that I actually added in a lot of
| | 04:25 | extra code so that it's easier to
style, and I'll explain what I did here.
| | 04:29 | We start off with an aside
that has the id social-icons.
| | 04:32 | That's just so we can know
what all this content is.
| | 04:35 | Then you see that each of the items is
actually a link that is inside a list
| | 04:40 | item, and each of the list items has a
class that defines what that link is: in
| | 04:45 | this case social-twitter, social-
facebook, social-flickr, and social-contact.
| | 04:51 | I do this so that I can associate
the correct image with the link without
| | 04:55 | putting the image into the link itself.
| | 04:58 | In other words, I'll use CSS to replace
the text here--Follow Red 30 on Twitter--
| | 05:03 | with an image or the Twitter logo.
| | 05:07 | This requires a fair bit of explanation,
so to make it a little bit by quicker
| | 05:11 | I've created code snippets
for you that you can use.
| | 05:14 | If you go to the codesnippets file and
you go to chapter 5.7, you'll find all
| | 05:18 | the code I already pasted in,
as well as all the style sheet.
| | 05:21 | So you can copy out the code here and
paste it into your sidebar.php file in
| | 05:25 | your child theme and then you can copy
out the style code below and paste it
| | 05:31 | into your child theme style sheet.
| | 05:33 | Now that I have the code, I can
explain to you what happens here.
| | 05:37 | First, I define all the links that are
found under the social-icons ID to be
| | 05:42 | displayed as a block, to float to the
left, to have a width and height of 32
| | 05:48 | pixels, and to have a margin on the
right and the bottom of 10 pixels.
| | 05:52 | I also indent the text by 9,999 pixels.
| | 05:56 | That way you don't see the text.
| | 05:58 | Then below, I target each of the
individual links that are found under each of
| | 06:03 | the individual classes.
| | 06:04 | So I say the link found under the
social-twitter class uses the twitter image,
| | 06:09 | the one found under the social-facebook
class uses the Facebook image, and so on.
| | 06:14 | And you see that I'm linking the URL
for the image to the images folder in the
| | 06:18 | child theme and then in the file in question.
| | 06:21 | When I save this, when I
reload the page, you see there's a
| | 06:24 | significant difference.
| | 06:25 | Instead of having the list of links,
I now have usually the icons stacked nicely
| | 06:30 | next to one another and if I click
on them, I go directly to that service.
| | 06:34 | But the trick here is I didn't
put the images into the HTML;
| | 06:38 | I put text in the HTML and then I
used CSS to hide the text and display a
| | 06:43 | background image instead.
| | 06:44 | This is a very common technique used
to create buttons that are completely
| | 06:48 | understandable for a browser.
| | 06:50 | So the browser and anyone who doesn't
use a visual browser and can't see images
| | 06:55 | will still understand the links
without having to mess with the code.
| | 06:58 | Now, there's one more
important thing I have to point out.
| | 07:01 | Remember how we made a
custom sidebar for certain pages?
| | 07:05 | Well, if I go to a page now, you'll see that
my connect with us links no longer appear.
| | 07:12 | That's because since we already
created a custom template for the sidebar
| | 07:16 | widgets for pages, if we want to add
these new icons to that template, we have
| | 07:22 | to actively add it into
sidebar-page.php as well.
| | 07:26 | Static content in a sidebar is usually
reserved for things that shouldn't be
| | 07:29 | changed, and this technique
should be used sparingly.
| | 07:33 | However, in the right circumstances
adding static content--whether it be
| | 07:37 | links, images, ads or
something else--makes a lot of sense,
| | 07:42 | and now you know how to do just that.
| | Collapse this transcript |
| Replacing existing functions| 00:00 | From time to time you'll want to disable
or replace existing functions altogether.
| | 00:05 | This can be because you want to
remove the function or because you want to
| | 00:09 | replace it with something completely different.
| | 00:11 | To get a clear picture of when this
would happen, it's important to understand
| | 00:15 | what types of functions you're
likely to find in the functions.php file.
| | 00:20 | In addition to the typical WordPress
functions like the ones you have seen--
| | 00:23 | menus, sidebars, navigation, and so on--
the functions.php file also often carries
| | 00:30 | with it calls to style sheets and
JavaScript through what's known as enqueueing.
| | 00:35 | If you want to disable
these, you need to dequeue them.
| | 00:38 | If you look at the functions.php file
from the parent theme, you'll see here on
| | 00:43 | line 90 you have this function
called twentytwelve_scripts_styles.
| | 00:48 | Inside this function you have
several scripts that are enqueued so that
| | 00:52 | WordPress can use them.
| | 00:53 | You see one here, wp_enqueue_script
( 'comment-reply' ), directly below it
| | 00:59 | wp_enqueue_script( 'twentytwelve_
navigation, and this last one is the one the
| | 01:04 | calls in the custom Opens
Sans font from Google Fonts
| | 01:08 | that was the default in the
theme before we changed it.
| | 01:14 | So what does it mean when it says
that a script or a style is enqueued?
| | 01:18 | Well, it means that WordPress is calling
it into the theme without specifying it
| | 01:22 | in the header.php file or
footer.php file or anywhere else.
| | 01:26 | For example, we can see here that the style
for this Open Sans font is being enqueued.
| | 01:33 | But if you go into the header.php
file, you won't find any reference to the
| | 01:38 | style sheet for this Google font.
| | 01:41 | However, when you load the page and
then go look at the code behind the scenes,
| | 01:47 | you'll see that here, on line 20,
you have the style sheet directly from
| | 01:52 | fonts.googleapis.com, which means the
font is being called in, but it's being
| | 01:58 | called in through the enqueue function.
| | 02:00 | That means this style and the other
styles and the other JavaScript functions
| | 02:04 | are being added through the
functions.php file instead.
| | 02:08 | And because they are added in through
an enqueue function, we need use the
| | 02:13 | dequeue function to take them
out so that we can replace them.
| | 02:17 | By dequeuing functions in your child
theme, you're actively telling WordPress
| | 02:22 | to ignore those functions after
they've been called in the parent theme.
| | 02:26 | It seems a bit convoluted and to be
quite frank, it is quite convoluted, but
| | 02:31 | it allows you to control functions
without actually removing them from the
| | 02:34 | parent theme altogether.
| | Collapse this transcript |
| Adding a Google font through a function| 00:00 | Out of the box the twentytwelve theme uses a
font from the Google Fonts library called
| | 00:05 | Open Sans as its main font.
| | 00:08 | Earlier in the course, I used CSS in my
child theme to override that font so that
| | 00:13 | we are instead using Georgia.
| | 00:15 | But now I want to replace the Google
Font Open Sans with a different Google
| | 00:19 | Fonts using a function
and enqueuing a style sheet.
| | 00:23 | Before I do anything else, I need to
get rid of the styles in the child theme
| | 00:27 | style sheet that are causing the
site to display using the Georgia font.
| | 00:32 | So I'll go to my child theme, find the
style.css file, and find the style that's
| | 00:37 | causing Georgia to be used.
| | 00:39 | It's right here, so I'll simply remove
that style and save the style sheet, go
| | 00:44 | back and reload the page, and now
we are using Open Sans as we should.
| | 00:50 | The next step is to get rid of the Open
Sans font, and here is something really cool.
| | 00:55 | If you open functions.php from
twentytwelve and scroll down a bit, you'll find a
| | 01:02 | section where Open Sans
is added. It's right here.
| | 01:05 | But you'll also find that the people
who built twentytwelve were really meticulous when
| | 01:10 | they added documentation to do theme.
| | 01:12 | So they explain everything that's
going on and they also gave you examples of
| | 01:16 | how you can turn things on and off.
| | 01:18 | One of those things they give examples of
is how to disable, in a child theme, the font.
| | 01:23 | They say you can use wp_dequeue_style,
and they even give you code example to do just that.
| | 01:28 | So can simply copy the code example,
open your child theme functions.php file,
| | 01:36 | and paste the code example right in.
| | 01:38 | You have to do a little bit of
cleanup here so that it looks better.
| | 01:48 | And then before we save, it we should take a
look at this function and see what's going on.
| | 01:52 | What's happening here is
we are creating a function.
| | 01:55 | It's called mytheme_dequeue_fonts, and
all the function does is it dequeues the
| | 02:00 | style that's called in twentytwelve fonts.
| | 02:03 | So if we jump to functions.php from the
parent theme, you'll find that here we
| | 02:09 | are enqueueing the style twentytwelve-fonts,
| | 02:12 | so all we are doing is
just dequeuing this function.
| | 02:15 | To make it all work there is an add_
action call, and the add_action call calls
| | 02:20 | mytheme_dequeue_fonts down here
and stacks it after the parent theme
| | 02:25 | functions.php file has been run.
| | 02:28 | That's why you have 11 at the end.
| | 02:30 | So if I this, go back to my browser,
and reload this page, you'll see that the
| | 02:36 | font changes ever so slightly.
| | 02:38 | That's because the font now fell back
to the next option in the font family,
| | 02:42 | which is either
Helvetica or Arial or Sans Serif.
| | 02:46 | Now that I've gotten rid of Open Sans,
I can add in my new Google Font in the
| | 02:51 | same way that Open Sans was
originally added, using an enqueue_style function.
| | 02:56 | First I need to find the font I want, so
I'll go to golden Google Web Fonts and search.
| | 03:01 | Now, if you've never been to Google
Web Fonts before, I highly recommend it.
| | 03:05 | This is a large quantity of free
fonts you can use on your website that are
| | 03:09 | hosted by Google, so they don't
really slow down your website.
| | 03:12 | Once you find a font you like--
let's say this Archivo Narrow--
| | 03:16 | you see simply click Quick-use, select
what weight you want to use, and then go
| | 03:23 | down here where you can see the code
you need to add this font to your site.
| | 03:27 | Here we have a link to a style sheet,
and that's what I actually need, so I'll
| | 03:32 | copy the link to the style sheet, go
back into functions.php for my child theme,
| | 03:39 | and then I need to add an enqueue
style function into my child theme.
| | 03:43 | I already have a function here that is
running, so I might as well just add it to that function.
| | 03:49 | So I'll go down here, say wp_enqueue_style.
Then I need to give my new style a name
| | 03:58 | so I'll steal the name from the actual font.
| | 04:00 | This font is called Archivo Narrow, so
let's say ArchivoNarrow, comma, and then I
| | 04:10 | need to put in the URL to the style sheet itself.
| | 04:12 | I'll just paste that in, end the
parentheses, and a semicolon to end the function.
| | 04:20 | So now an addition to mytheme_dequeue_
fonts dequeuing the original font, it's
| | 04:25 | also enqueuing a new font.
| | 04:27 | I'll save this, reload my browser,
and as you can see, nothing happened.
| | 04:34 | That's because although we now enqueued
the font style into this site, we're now
| | 04:39 | telling the site to use the font.
| | 04:41 | Just to make sure that everything is
working, we need to make sure that we
| | 04:44 | actually have the font style sheet in our site.
| | 04:47 | We can use the Developer tools to do that.
| | 04:48 | If we go Ctrl+Shift+I to open the
Developer tools and then go to Resources and
| | 04:55 | your own site here, WordPress and
then under Stylesheets, you should see the
| | 04:59 | link to fonts.googleapis.com. And if you
click on it, you get the styles for this font.
| | 05:06 | Now that you have the styles for the
font, you can activate it on your site.
| | 05:10 | If you look closely at the page from
Google Fonts and you scroll all the way down,
| | 05:16 | you see here there is an
example of how you can use this font.
| | 05:20 | You simply add this font-family.
| | 05:23 | So what I am going to do is go back to
my style.css file, create a new style for
| | 05:27 | body, paste in font-family Archivo
Narrow, and then just close the body style.
| | 05:35 | I'll save that, reload my page, and
now you see we're using the new font
| | 05:40 | instead of the old one.
| | 05:41 | Sometimes you have to do a bit more
work to get your child theme to do exactly what you want.
| | 05:46 | This example shows you the process of
disabling and replacing a function to
| | 05:50 | get a different result.
| | 05:52 | You can use the same technique to
disable and/or replace JavaScripts and
| | 05:57 | other styles, and even some other
core functions like menus, comments, and
| | 06:01 | widgetized areas in twentytwelve.
| | 06:03 | Basically, anything you find in the
functions.php file of 2012 that's enqueued
| | 06:09 | you can dequeue, and you can also
enqueue any style and any JavaScript you want.
| | Collapse this transcript |
|
|
6. Working with Featured ImagesAdding new featured image sizes| 00:00 | Featured images, or post thumbnails, is a
great function built into WordPress that
| | 00:05 | in my opinion is not used nearly enough.
| | 00:08 | Using featured images you can do all
sorts of cool stuff like creating featured
| | 00:12 | content sliders, add image previews, and
indexes, and even make post galleries.
| | 00:18 | Featured images can also be configured
to interact with social sharing sites
| | 00:22 | like Facebook and Google+ so that
you can control what image appears when
| | 00:26 | someone shares your content, because
featured images are so powerful it's
| | 00:31 | important that you understand how to add
the image sizes you want and how to use them.
| | 00:36 | Let's first look at how
featured images are configured.
| | 00:40 | If you look at the twentytwelve theme
the way it is now, you can see that there
| | 00:43 | is a featured image at the top of each post.
| | 00:47 | To assign a featured image you go into
edit the post and you scroll down and
| | 00:52 | here on the right side you
have the Featured Image option.
| | 00:57 | By default, the featured image appears
at the top of each post, and if you go
| | 01:02 | into the index and if you go into the index
and you find a post that has a featured image,
| | 01:08 | the featured image appears in the index
as well. But what if you want to use a
| | 01:12 | different-sized featured image?
| | 01:14 | In that case you have to tell
WordPress what size you want and how you want
| | 01:18 | WordPress to handle that image.
| | 01:20 | To explain that a little better, I have
to show you what happens when you upload an image to WordPress.
| | 01:25 | What happens when you
upload an image to WordPress
| | 01:28 | is actually the WordPress takes
that image and creates bunch of different
| | 01:31 | versions of that image
depending on what sizes are predefined.
| | 01:35 | If you go into your WordPress
installation and navigate to the wp-content folder,
| | 01:40 | and then to uploads, and one of the
folders under uploads, you'll find all the
| | 01:45 | images that have been uploaded to your site.
| | 01:47 | What you notice is first you have
the image itself--this is the original--and
| | 01:52 | then you have a series of different
versions of that image in different sizes.
| | 01:56 | Here you have one for 150 x 150, one for
300 x 242, one for 370 x 300, one for a
| | 02:04 | 1000 x 288, and one for 1024 x 829.
| | 02:08 | These sizes are defined either by the theme
or by the media settings inside WordPress.
| | 02:14 | If you want to know where these sizes
are defined, look no further than the media
| | 02:18 | settings inside your WordPress installation.
| | 02:20 | If you go to Settings > Media,
you can see that here we have a defined
| | 02:27 | size for Thumbnail size.
| | 02:28 | It's 150 x 150. We have a Medium size
which is a Max Width of 300 and a Max
| | 02:34 | Height of 300, and you have a Large
size, which is a Max Width of 1024 and a
| | 02:39 | Max Height of 1024.
| | 02:41 | If you look at these image sizes again,
you start seeing what's going on.
| | 02:45 | An image is uploaded and then WordPress
creates a 150 x 150 version, one that's
| | 02:50 | 300 pixels wide, one that's 300 pixels
tall, one that's 1000 pixels tall, and
| | 02:56 | one that's 1024 tall or wide. But these
sizes that are defined inside WordPress
| | 03:03 | admin can be changed at any time.
| | 03:05 | When you are working with a theme and
you want to include featured images in
| | 03:09 | your theme you want to predefine the
size of that image, and you want to make it
| | 03:12 | so that no one can change it,
because otherwise things might break.
| | 03:16 | Adding new image sizes is done in the
functions.php file, just like adding pretty
| | 03:22 | much everything else is. To add a new
image size I'm going to go to functions.php
| | 03:27 | in my child theme, find this
mychildtheme_setup function I already created, and
| | 03:32 | here I am going to register a new image size.
| | 03:36 | It's very simple. You simply say
add_image_size. Then you have to give your
| | 03:42 | image size a name, so I'm going to
call this category-thumb, and you have to define the size.
| | 03:50 | I want this one to be 100 pixels wide
and 100 pixels tall. And you have to say
| | 03:56 | whether or not you want
WordPress to crop the image.
| | 03:58 | If you set it to false, WordPress will
not crop the image, but instead squish it,
| | 04:03 | which always looks really strange, so
instead, I'm going to set it to true.
| | 04:08 | When I save this, what will
happen is next time I upload an image to
| | 04:12 | WordPress, WordPress will
create an image that's 100 x 100.
| | 04:17 | However, it doesn't automatically do that
to the images that are already in the system.
| | 04:21 | To make that happen I have to add a
plugin that'll go through all the images and
| | 04:26 | create the new size. So now I need to
go to Plugins, add a new plugin, search
| | 04:32 | for regenerate, and here you'll find
a plugin called Regenerate Thumbnails
| | 04:40 | created by Viper007Bond.
| | 04:43 | I'll install that one, activate the
plugin, go to Tools, click Regenerate
| | 04:50 | Thumbnails, and then click
Regenerate All Thumbnails.
| | 04:55 | Now, depending on how big your site is
and how many images you have, this might
| | 04:59 | take a really long time. You see, I
only have 38 images and it's already
| | 05:04 | taking a bit of time, so if you have a gigantic
site, you may want to do this in several rounds.
| | 05:10 | Once the process is complete, we can
go back to the Uploads folder, and you'll
| | 05:14 | see that now each of the images has a
100 x 100 version in addition to the ones
| | 05:19 | that are already there.
| | 05:20 | That's because now we have
regenerated a new image size for each of
| | 05:25 | the individual images.
| | 05:28 | I use featured images all the time in my
themes, both for myself and for my clients.
| | 05:32 | Now that you know how to add new sizes,
I'm sure you're starting to get ideas
| | 05:37 | about how to use this feature, and
that's what we're going to do next.
| | Collapse this transcript |
| Adding featured images to posts and pages| 00:00 | Once you have featured images in
your site, you can add them pretty much
| | 00:04 | anywhere you want on the site.
| | 00:06 | Because the featured image is directly
associated with each post and each page,
| | 00:11 | without being in the content body, you
can display these images in a different
| | 00:15 | way from regular images in the body.
| | 00:18 | The key is to know how to call them up,
and how to get the correct size when you do.
| | 00:22 | I have shown you this several times before.
| | 00:25 | In the twentytwelve theme, the general way in
which a featured image is displayed is at
| | 00:31 | the top here: top of the post, large
image before anything else. But earlier in
| | 00:37 | the course we created new category
templates and in these templates
| | 00:41 | those gigantic featured
images look pretty weird.
| | 00:44 | What I want to do now is add a smaller
featured image here, next to the excerpt
| | 00:49 | of the content in each post.
| | 00:52 | To do that, we need to make some small
changes to the content.php template and
| | 00:57 | add in the featured image.
| | 00:59 | First, I'll open content.php in my
child theme and find out where I want to
| | 01:04 | put in this content.
| | 01:06 | What I want to do is put it next to
the excerpt, and since I already have the
| | 01:11 | conditional call to test for when the
excerpt should be displayed, I'll just
| | 01:15 | place it inside that conditional call.
| | 01:18 | I also want to place the featured
image outside of the excerpt so that it'll
| | 01:23 | float to the left of it.
| | 01:25 | So I am going to add some new lines
directly above the excerpt here, and then I
| | 01:28 | can put in my featured image.
| | 01:30 | But what I am going to do now is
wrap the featured image call in a
| | 01:33 | conditional call to make sure that
we don't put in code when there is no featured image to show.
| | 01:38 | So I'll start off with a php
delimiter, and I'll end it, and then I'll make a
| | 01:44 | conditional call. I'll say if, and here
I'll use another conditional statement
| | 01:49 | that comes with WordPress.
| | 01:50 | It's called has_post_thumbnail.
| | 01:53 | Not surprisingly, all this function does
is it checks whether or not the current
| | 02:01 | post has a post thumbnail.
| | 02:04 | If it has a post thumbnail, I'm going
to echo out some information. So I'll
| | 02:08 | print out figure and I'll give the figure a
class, call it cat-thumb, because this is
| | 02:16 | a thumbnail for the category.
| | 02:19 | I'll then end my figure with another
echo and then in between these two, I'll
| | 02:29 | use the function that calls the post thumbnail.
| | 02:32 | If we scroll up here, you'll see we
already have the function here in the file.
| | 02:38 | It's called the_post_thumbnail.
But this time I want to call a specific size of
| | 02:43 | post thumbnail, so I am going to say
the_post_thumbnail and then I'm going to
| | 02:51 | put in a variable that defines what size I want.
| | 02:54 | To refresh my memory, I'll go back to my
functions.php file where I defined this
| | 02:58 | new size and I'll scroll
down here until I find the size.
| | 03:02 | It's right here, add_image_size,
and the name is category-thumb.
| | 03:06 | So I'll copy out category-thumb and
paste that in here, and then finally, I have
| | 03:13 | to end my conditional
statement, so I'll say endif.
| | 03:16 | I'll save this and now when
I reload my category archive,
| | 03:23 | I should see small category thumbs appear.
But they don't look exactly right yet.
| | 03:29 | I still have to float this to the
left, and that's why I wrapped this figure
| | 03:34 | class="cat-thumb" around it, so that I
can now create a style for cat-thumb.
| | 03:39 | So I'll go to my style sheet, scroll down, add
class cat-thumb, and then I'll say float: left;
| | 03:53 | and I'll also give it a little bit of a
margin, so margin, top margin 0, right
| | 03:59 | margin 10 pixel, bottom margin 10 pixel
and left margin 0. Then I'll close the
| | 04:07 | style cat-thumb, save style.css, and
reload my page again, and now you see the
| | 04:14 | thumbnail hovers nicely to the left
of the content. And just to make sure I
| | 04:20 | didn't break anything, if we jump back to
the front page, scroll down, you see we
| | 04:26 | still have the gigantic featured image
here, and if I go to the single posts, we
| | 04:31 | still have the gigantic featured image here.
| | 04:33 | By adding featured images in strategic
locations throughout your site, you both
| | 04:38 | make your site look nicer and
increase the chance of people reading more of
| | 04:42 | your content.
| | Collapse this transcript |
|
|
7. Beyond the BasicsAdding a welcome message to the front page| 00:00 | If you have been following this course
from the very beginning, you should now
| | 00:04 | have a pretty good idea of how you can
use a child theme to change the styles of
| | 00:08 | your site and also change
functionality of your site.
| | 00:11 | Now we are going to take what we have
learned and change the overall site to
| | 00:15 | make it easier for the
visitors to understand and use.
| | 00:19 | You may have noticed that when you use a
WordPress theme you generally have one
| | 00:22 | of two options on the front page:
| | 00:24 | you either have the index, which shows
the latest posts, or you have a front page
| | 00:29 | template that shows some sort of
welcome message, maybe a video, and some
| | 00:34 | widgets or other stuff.
| | 00:36 | None of these are really good front
page for people who are just starting out
| | 00:41 | and just came to your site, because if
you have the index, all you see is new
| | 00:46 | content and if you have the static
front page, you have a static front page
| | 00:50 | with no new content.
| | 00:52 | What I want to do is combine the two
so you get a welcome message at the top,
| | 00:56 | maybe with an image or a video,
and then you get the index underneath.
| | 01:00 | The reason why I want to do this is
because I want to give the people who visit
| | 01:02 | the site a great experience and that's
one of the reasons why you want to build
| | 01:07 | a website to begin with, to
give people a great experience.
| | 01:11 | And using a child theme, we can now
take everything we learned, put it together,
| | 01:15 | and then make a new experience on the
front page that works really well, both for
| | 01:19 | you and for your visitors.
| | Collapse this transcript |
| Displaying page content in an index page| 00:00 | When you open a page or a post or a
index page in WordPress what you're really
| | 00:05 | doing is asking the database to return
specific cells from its tables to you,
| | 00:10 | in a specific layout.
| | 00:11 | This is what's called a database query.
| | 00:14 | This means that if you know how to
manipulate the database queries, you can ask
| | 00:19 | the database to return any
information you want and place it anywhere.
| | 00:23 | That's what we're going to do now.
| | 00:25 | In my site, I've created a new page.
| | 00:27 | It's called Front Page.
| | 00:30 | And in this page all I have
is three paragraphs of text.
| | 00:34 | What I want to do now is get this text to
appear on the Front Page itself, above the index.
| | 00:40 | So when people visit my site they'll
first see that welcome message and then
| | 00:44 | they scroll down and see the index.
| | 00:47 | To get this to work, we're simply
going to call the front-page content and
| | 00:50 | display it into index.php template.
| | 00:53 | Here I'm going to teach you a trick.
| | 00:56 | When I start adding this type of
content into my site, say a content slider or
| | 01:00 | a welcome message or anything else
that requires quite a bit of code, what I
| | 01:05 | do is I place it in a separate file and
then I just call that file into the template.
| | 01:10 | That way I know exactly where that
content is if I need to edit it later.
| | 01:14 | And it's also much easier to
remove or add when I want to.
| | 01:18 | So the first thing I'm going
to do is create a new file.
| | 01:21 | So I'll go to my code editor and
save the file in my child theme.
| | 01:27 | I'll call this file welcome because
it's going to be the welcome message, and
| | 01:32 | I'll make sure it's a PHP file.
| | 01:35 | And this is the file I'm going to
call that will then be displayed inside
| | 01:39 | the index.php template.
| | 01:41 | So first off, I'm going to just
write some dummy content so we can test
| | 01:44 | that everything works.
| | 01:46 | I'll start off with a simple comment to
explain what this is, and then I'm going
| | 01:49 | to populate it with
some standard HTML content.
| | 01:54 | Now you notice I'm pretty meticulous
about how I write my HTML, and you might
| | 02:01 | also wonder where I get all
these ID names and everything from.
| | 02:04 | This is just a habit.
| | 02:06 | I like to really document what I do and
I write everything out and I give every
| | 02:09 | single elements an ID or a class so
that I can easily target it with CSS
| | 02:14 | later if I want to.
| | 02:17 | Now if you've done any kind of work
with WordPress before, you may notice that
| | 02:20 | I'm using the entry-
content class for this div here.
| | 02:24 | That's because I want the content
I'm displaying at the top to have the
| | 02:28 | same styling as to content
that's in a regular post.
| | 02:31 | And as you know, entry-content is
generally the class that's applied to any post
| | 02:35 | content, so that's why you see it here.
So I am borrowing a style and applying
| | 02:40 | it to my new content.
| | 02:41 | Now I'm just going to put in some dummy
content here so I can test to see that this works.
| | 02:47 | And now I have all the content
I need to make sure this works.
| | 02:51 | I have the welcome.php file and
now I need to call it from the
| | 02:55 | index.php template.
| | 02:56 | So I'll go to my parent theme, find
index.php, and copy it into my child theme,
| | 03:05 | open it in my editor, and then I'm going
to use a WordPress function to call in
| | 03:09 | this welcome.php file.
| | 03:12 | That function is called get_template_part.
| | 03:15 | The variable is the name of the file
that I want to call--in this case welcome--
| | 03:22 | and when I close this, save it, and
reload my index page, you see that the
| | 03:27 | content I just created--
| | 03:29 | this is the text that is displayed by
the welcome.php file--appears here at the
| | 03:33 | top of the index page.
| | 03:35 | That means index.php template is now
calling the welcome.php file and displaying
| | 03:41 | its content, so everything is working.
| | 03:45 | The next thing I need to do is go back
to welcome.php and change out this dummy
| | 03:50 | content here with the real
content from the Front Page page.
| | 03:54 | So I'm going to dele the dummy content,
and then I'm going to use a function from
| | 03:59 | WordPress that calls in
content from the database.
| | 04:03 | The function is called get_page_by_
title, and like the name suggests, it finds
| | 04:08 | the page based on the title of the page.
| | 04:10 | So I'm going to put in my PHP
delimiters and then I'm going to make a variable,
| | 04:15 | call it page--you can call it whatever
you want--and I'll say that this variable
| | 04:19 | should be filled with the content
from the page I called, in this case
| | 04:23 | get_page_by_title. And then
I'll put in the title, Front Page.
| | 04:30 | That's the title I set in
WordPress when I saved the page.
| | 04:35 | And now I'll have a variable that has
all information that the database has, on
| | 04:40 | the page called Front Page.
| | 04:42 | To see what that information is, I'm
going to go down here and then put in a php
| | 04:48 | function called print_r, and what
print_r does is it prints out everything in a
| | 04:54 | variable, regardless of what it is.
| | 04:55 | So I'll just put in page, which
is what we created up here, so I can see
| | 05:00 | everything the database is returning.
| | 05:02 | I'll save welcome.php and reload my Front Page.
| | 05:09 | And now you see I get the
complete return from the database.
| | 05:12 | This is all information that
database has on the Front Page page, and it
| | 05:17 | returns it all to me.
| | 05:18 | Looking at this, I can see
that all I really need is this.
| | 05:22 | This is the actual content from the page,
and it's contained inside an array that
| | 05:27 | has the tag post_content.
| | 05:30 | So what I want to do is instead of
returning all of it, I just want to see the
| | 05:34 | content that's under post_content.
| | 05:35 | I'll go back to welcome.php and change
this to echo $page, because that's the
| | 05:44 | variable, and then I only want post_content.
| | 05:48 | I'll save that, reload the Front
Page again, and now you see I only have the
| | 05:54 | contents inside post_content.
| | 05:56 | But if I open the Front Page page,
you'll notice that here I have three
| | 06:01 | paragraphs, but when it's returned on
my index page, it's all mushed together.
| | 06:07 | That's because WordPress is not
treating this as real content yet.
| | 06:11 | It's just returning all the content as it is.
| | 06:14 | So the last thing I need to do is
apply a filter to the post_content.
| | 06:19 | I'm simply going to tell WordPress to treat
the post_content as the content of a post.
| | 06:24 | And I can do that using a
function called apply_filters.
| | 06:27 | So I'll say apply_filters.
| | 06:31 | Then I'll tell WordPress
what type of content this is.
| | 06:34 | This is the content of a page. Then I
just need to close my parenthesis, save
| | 06:41 | welcome.php again, reload my index page,
| | 06:46 | and now you see that the content is formatted
in the exact same way it is in the page itself.
| | 06:52 | Now that I have my Front Page content
displayed on the Front Page, I'm going to
| | 06:57 | hide the Front Page button in my menu.
| | 06:59 | So I'll go to the backend, to menus, and
apply a menu that doesn't have a Front Page.
| | 07:04 | I've already created one here to the
main menu. Save it, reload, and now we have
| | 07:12 | a seamless experience.
| | 07:14 | You have a main menu here, you have
the Welcome message, and then you have
| | 07:18 | the index underneath.
| | 07:21 | It is outside the automatic
template queries generated, the real magic
| | 07:25 | of WordPress happens.
| | 07:26 | Once you wrap your head around the
fact that you can call any content at any
| | 07:30 | time from anywhere, you'll realize that
can do pretty much anything you want, and
| | 07:35 | the only limitation is your own imagination.
| | 07:38 | Now we have some basic content,
but that's just the beginning.
| | Collapse this transcript |
| Hooking in a featured image| 00:00 | In the previous movie, we added a
welcome message to the top of our index page
| | 00:05 | so that when people visit the site
they immediately get a welcome message.
| | 00:09 | And this welcome message is coming
from a separate page within WordPress.
| | 00:13 | Now I want to take that a step further
and add a featured image to the welcome
| | 00:18 | message and then display that featured image
alongside the welcome message here on the right.
| | 00:23 | But this is a bit of a challenge,
because we're now outside the loop.
| | 00:28 | The loop is what runs
down here in the index page.
| | 00:31 | It shows all the different posts.
But we created a special call that calls in
| | 00:35 | content from a page to display above that.
| | 00:38 | Now if I use the normal post thumbnail
template tag to get a post thumbnail to
| | 00:43 | appear, or a featured image to appear,
what will happen is I'll see the featured
| | 00:48 | image from the first post rather
than a featured image from this page.
| | 00:51 | What I need to do instead is tell the
database to specifically grab the post
| | 00:56 | thumbnail or featured image from this page
and display it next to the overall content.
| | 01:01 | But I'm getting ahead of myself here.
| | 01:03 | First I need to add a featured image to my page.
| | 01:07 | So I'll go to the backend, go to Pages,
Front Page, and add a featured image.
| | 01:14 | So I'll add an image from my desktop,
change the Title and Alternate Description,
| | 01:25 | and set Use as featured image.
| | 01:30 | Update the page and now the
page has a featured image.
| | 01:34 | Now I need to call in that featured
image in this new section that I have here
| | 01:39 | on the top of my page.
| | 01:41 | So I'll go to my child theme and open
welcome.php, and from here I need to
| | 01:46 | insert my featured image.
| | 01:47 | But first I have to figure out how to call it.
| | 01:50 | I want to use a function
called get the post thumbnail.
| | 01:53 | I want to use that function because
with that function I'm allowed to provide
| | 01:57 | an ID for a specific post or page and
then say I want the featured image from
| | 02:02 | this particular page.
| | 02:03 | But where do I get that ID from?
| | 02:05 | Well, if you remember, this page
variable contains all the information from the
| | 02:10 | database about our Front Page page.
| | 02:14 | So if I do this print_r thing again--
say I want to print everything from page,
| | 02:19 | save it and refresh in my browser--
| | 02:24 | you'll see in here we have ID 114.
| | 02:30 | This is the post ID for our page,
so that's the number I want to use.
| | 02:36 | That means I can call in
that number in my new function.
| | 02:40 | Because I want to insert a featured
image and then not share that in all cases I
| | 02:44 | will have a featured image, for example,
if I pass this child theme onto someone
| | 02:48 | else and they forget to apply a
featured image to their Front Page post, they
| | 02:52 | may not have a featured image.
| | 02:54 | I'm going to add in a
conditional statement, if, and then I'll say
| | 02:58 | get_the_post_thumbnail. And then I want
to point to that particular ID, so I'll
| | 03:06 | say page-> ID. Then we get
the ID contained within the page
| | 03:11 | that's from the Front Page. Do some
clean up here, and then I need to end my
| | 03:18 | conditional statement, endif.
| | 03:21 | So now I'm saying if we have a post
thumbnail attached to the page for this ID,
| | 03:26 | so Front Page, put in the following
<figure> and then I'll repeat myself and
| | 03:34 | say get_the_post_thumbnail($page->ID).
| | 03:41 | And because this function doesn't
automatically display the content, I have to
| | 03:45 | put echo in front of it.
| | 03:47 | So now I am echoing the content from
get_the_post_thumbnail with the page ID if
| | 03:53 | it exists. Save it, reload the Front
Page, and now we see the image of the cab
| | 04:01 | and then the Welcome message underneath.
| | 04:04 | This idea of specifying a post ID
from which to call the featured image
| | 04:08 | actually works for all sorts of content.
| | 04:11 | If you want to, you can use the post ID
to call in titles, content, and whatever
| | 04:17 | other post's info you want
to from any post or page.
| | 04:21 | That's what WordPress does normally.
| | 04:23 | It goes to the database and says, hey,
| | 04:25 | I want post number 85, give me all the
content. But now you know how to do it
| | 04:30 | yourself and as you can
see, it's very easy to do.
| | Collapse this transcript |
| Making the welcome message responsive| 00:01 | So far, we've added a new feature at
the top of our index page that shows a
| | 00:06 | featured image and a welcome message.
| | 00:09 | Now we need to realign this
so it looks little bit better.
| | 00:12 | I mentioned before that I want that
featured image to float on the right and
| | 00:16 | then have a text on the left so it
takes up less space of the top here.
| | 00:20 | To do that, I need to apply some CSS
so that I can align these elements. But I
| | 00:26 | don't like to add extra code
unless I absolutely have to,
| | 00:29 | and I have a feeling that this theme,
the twentytwelve theme, might already have the
| | 00:33 | layout styles I need. I just need to
apply those styles rather than writing my own.
| | 00:39 | So I'm going to do some experimentation here.
| | 00:41 | I know there's a page template in
twentytwelve that's called Front Page and have a
| | 00:45 | feeling that page may have the layout I need.
| | 00:48 | So I am going to apply that one to the
page that this content is coming from so
| | 00:53 | I see if it floats the
image the way I want it to.
| | 00:56 | So I'll go back to my Dashboard, under
Pages,. Then I'll find Front Page.
| | 01:02 | I am just going to do a Quick Edit here.
| | 01:04 | And I'll change the Template from
Default Template to Front Page Template.
| | 01:07 | Now I am going to view to Front Page.
| | 01:10 | I know this is getting a little
confusing, because this is the page that has
| | 01:15 | the name Front Page, so it's not
actually the front page of the site.
| | 01:19 | And I have applied the Front Page
Template meant to be on a Front Page, but
| | 01:24 | currently not on the Front Page,
to the page called Front Page.
| | 01:28 | What matters here is that you can now
see that the layout is the layout I want.
| | 01:33 | I have image on the right and I have
text on the left, which means the work has
| | 01:37 | already been done, and all I need to do
is make my Front Page, the welcome.php
| | 01:43 | file, call in the same styles.
| | 01:45 | So I am going to use my Developer tools
here. I'll right-click on the image and
| | 01:49 | click Inspect Elements to see what's going on.
| | 01:52 | And Here I very quickly see that
the div that contains the image has a
| | 01:56 | class "entry-page-image".
| | 01:59 | So if I go and copy this class,
jump to my Front Page or the Index Page,
| | 02:06 | scroll down, find the image, inspect
the element, and then simply apply that
| | 02:11 | class to the "figure"
| | 02:12 | so now it says just
figure class entry-page-image,
| | 02:15 | the image magically shifts over to
the right just like I want it to.
| | 02:21 | So I don't need to write any style code
here. All I need to do is apply a class
| | 02:26 | to the existing code.
| | 02:27 | I'll go into my child theme, open
welcome.php, find my figure, and just paste in
| | 02:34 | class "entry-page-image".
| | 02:36 | And I am going to put in a comment here now.
| | 02:40 | I'll save this, turn off my
Developer tools, and reload the Index Page.
| | 02:46 | The text is on the left and the image is
on the right, but I am not quite done yet.
| | 02:51 | First of all, I want to separate the
welcome message from the rest of the
| | 02:55 | content by making more space and also
adding a line here, so it's clear that
| | 02:59 | these two things don't go together.
| | 03:01 | But more importantly, the
twentytwelve theme is fully responsive.
| | 03:06 | By responsive I mean the theme
reorganizes and reshapes to fit with whatever
| | 03:10 | size screen you are using.
| | 03:12 | So if someone is using a cell phone,
they have a smaller screen and the content
| | 03:16 | reorganizes so you don't have to
scroll left and right to read things.
| | 03:20 | You can see what I'm talking
about if you resize your window.
| | 03:23 | You see here that as I resize the
window, the content shifts around.
| | 03:27 | But it looks really weird up here because
currently everything is kind of jammed together.
| | 03:31 | So I need to add some style to make sure
that there is space here and everything
| | 03:35 | is aligned properly.
| | 03:37 | To save you some time, I have already
created all the styles necessary and put
| | 03:41 | them in the code snippets for this movie.
| | 03:44 | So if you go up to your code snippets, under
movie 7.4, you find all the styles necessary.
| | 03:50 | So I'll start by copying this batch of
styles here, go to my style.css file in
| | 03:56 | my child theme, and just paste that in.
| | 04:00 | I'm doing several different things.
| | 04:02 | First I am adding a border to the
bottom, and I am also making some space so
| | 04:06 | that that welcome message is spaced
separate from the rest of the content.
| | 04:11 | Then I am taking the text and floating
it to the left and giving it the same
| | 04:16 | amount of space as the image has on the right.
| | 04:19 | And then I'm giving some extra space
for the intro text paragraph, so that
| | 04:24 | there's a nice breathing space
between the image and the text.
| | 04:27 | I'll save my new style.css file and
reload the page in my browser, and you'll see
| | 04:35 | now things align much better.
| | 04:37 | So when I resize this, you see there is nice
breathing space between the text and image.
| | 04:42 | However, I am not quite done, because
if I take this down even more, you will
| | 04:48 | see the image pops at the top, but the
text keeps squishing in, because we are
| | 04:55 | still telling the browser that this
text should take up 49.7% of the space.
| | 05:01 | To fix this I need to use a media query.
| | 05:04 | A media query basically asks the
browser how big is the window currently, and
| | 05:09 | then if the window is of a
current size, it uses a different style.
| | 05:12 | If you go back to your code snippets,
you'll see here it's a very small media query
| | 05:17 | just to fix that problem with the text.
| | 05:21 | So I'll paste that in at the very
bottom of my style sheet, and you can see that
| | 05:26 | what it says is if the screen has a max
width of 600 pixels--means it's smaller
| | 05:32 | than 600 pixels--set the intro
element floats to none and the width to 100%.
| | 05:37 | If you look up here, you'll see that
currently the intro element is set to left
| | 05:44 | and the width is 47.9%.
| | 05:45 | If I save that and reload my skinny
browser, you'll see that the text now flows
| | 05:53 | over all the page, but if I scale it up,
it pops over and only takes up 47.9%.
| | 05:58 | So now, we have a welcome message with
the featured image on the right, a line
| | 06:06 | that separates the welcome message from
the rest of the content, and things are
| | 06:09 | really starting to look good.
| | 06:11 | You also got a sneak preview of how
to build a responsive WordPress theme.
| | 06:17 | If you want to know more about how
to build responsive WordPress themes,
| | 06:20 | you should go and check out my other course
in the lynda.com library called WordPress:
| | 06:25 | Building Responsive Themes.
| | Collapse this transcript |
| Restricting content to the first page of the blog| 00:00 | In many cases, you want to restrict
certain content or behaviors to a particular
| | 00:05 | page or post in your site.
| | 00:07 | This is relatively easy when it
comes to pages or posts, because you're
| | 00:11 | dealing with single items.
| | 00:13 | But what do you do from the
page in question is an index page.
| | 00:17 | We can't test for a specific post id,
because the post keeps changing.
| | 00:22 | Instead, we have test to see if the
currently displayed template is the one we
| | 00:26 | want and that it is in the
order we want it to be in.
| | 00:30 | Let me explain what I am talking about here.
| | 00:32 | We added a welcome
message to our index template.
| | 00:36 | It displays at the very top of the
index template and then underneath you
| | 00:39 | have the index content.
| | 00:41 | However, if I scroll down, and I jump to Page 2
of the index, the welcome message still appears.
| | 00:48 | Logically, we only want the welcome
message to appear on the front page, so Page
| | 00:53 | number 1 of the index template.
So how do we do that?
| | 00:57 | Well, we have to ask
WordPress several questions.
| | 01:00 | We both have to ask it, is this the front page
that you are already currently displaying.
| | 01:04 | And we also have to ask it, is this
first of the index pages, so that if it's
| | 01:10 | the 2nd or 3rd or 50th of the index pages,
it doesn't display this welcome message.
| | 01:16 | To do this, we are going
to use two conditional tags.
| | 01:19 | The first one--and most important one--is
one that you might end up using a lot.
| | 01:23 | It's one that's called is_front_page.
| | 01:27 | It basically asks if the page you're
currently looking at is the front page,
| | 01:31 | whether or not that page be an
index page or if it's a static page.
| | 01:35 | This depends on how you set what
page is displayed as a front page under
| | 01:39 | Settings > Reading, and a FrontPage displays.
| | 01:41 | We are going to use is_front_page in
conjunction with another conditional
| | 01:46 | statement called is_paged and I'll
explain what that one does in a second.
| | 01:51 | To restrict the welcome message to only
the front page, what I am going to do is
| | 01:56 | go to index.php, where this template
part is being called, and then I'll wrap
| | 02:02 | the call for this template
parts in a conditional statement.
| | 02:07 | So I'll say if is_front_page, because
I want to see that it is the front_page
| | 02:14 | and then I'll also want to test to see if
this is the second or third or fourth page.
| | 02:20 | So what I am going to do is
use a function called is_paged.
| | 02:24 | is_paged basically tests to see if this
is the second, or third, or fourth, or
| | 02:29 | fifth page of an index.
| | 02:31 | But in this case, I want to see that
this is not a paged item, meaning it's not
| | 02:35 | paged 2, or 3, or 4, so I am going to
put an exclamation point in front of it
| | 02:40 | say, and it is_not_paged.
| | 02:42 | So if both these conditions are met,
I want get_template_part (welcome) to
| | 02:47 | run then I am going to end my
conditional statements, save index.php, and
| | 02:54 | then reload this page.
| | 02:56 | Notice that this is
currently Page 2 of the index.
| | 03:00 | And now you see the welcome message
disappeared from the top, but if I jump back
| | 03:04 | to the front page, the welcome message appears.
| | 03:08 | Just to make sure, I am going to
scroll to the bottom and jump to a different
| | 03:12 | page, so I'll jump to Page number 3,
and just as it was, Page number 2 we don't
| | 03:17 | see the welcome message.
| | 03:20 | Here you can see how using
conditional statements wisely can give you very
| | 03:24 | interesting results and very detailed control.
| | 03:26 | I'll show you another example of a site I used the
same type functionality on to make something happen.
| | 03:33 | On blendinsider.com, I created a
function that displays the first story on the
| | 03:40 | front page with larger fonts and more
information than the second and third and so on.
| | 03:47 | I'm using the exact same conditional
statement is_front_page and is_paged to
| | 03:52 | make sure that it only displays
on the first page in the index.
| | 03:56 | I'm also using an additional
conditional statement to test that this only
| | 04:00 | appears on the first post on the index page.
| | 04:03 | So this should give you an idea of how far you can
take it when you use these conditional statements.
| | 04:09 | So just remember, anytime you want to
display something in just one place, ask
| | 04:13 | yourself if you can ask the database a
question and then make that computer and
| | 04:18 | the database figure out what to
display using conditional statements.
| | Collapse this transcript |
| Adding a jQuery function to show or hide the welcome message| 00:00 | When you add nonessential content
like a welcome message to a page on your
| | 00:05 | site, it's always a good idea to give
people an easy way of hiding that content.
| | 00:10 | This is the type of behavior
that JavaScript is great for.
| | 00:13 | JavaScript allows you to add the user
interaction on top of existing content so
| | 00:18 | that your user can interact with the
content and change it even after the page
| | 00:22 | is being loaded in the browser.
| | 00:25 | Now though we've added welcome message
and an image here at the top of the page
| | 00:29 | and it looks the way we want it to,
I want to add an extra feature.
| | 00:32 | A little button down here somewhere,
you can click on the button and
| | 00:36 | this content is hidden and then
you click on the button again and it
| | 00:39 | shows the content again.
| | 00:41 | To make that work I am going to use some
jQuery Scripts, but before I can add the
| | 00:45 | script I need to add the button.
| | 00:47 | In my child theme I'll open welcome.php,
scroll all the way to the bottom, and
| | 00:53 | here I'm simply going to add a regular button.
| | 00:56 | I'll wrap it in a div with a class,
call the class hide-button, and inside this
| | 01:03 | div I'm going to put a regular link.
| | 01:06 | The link doesn't have to point
anywhere, because this link will trigger the
| | 01:09 | JavaScript effect, but I'm still going to
give it a title and I need some link text.
| | 01:14 | So I'll just say Hide.
| | 01:16 | I'll save this and test it in my
browser to make sure it works here we have the
| | 01:22 | hide button I can click on it and it
jumps this up to the top of the page that's
| | 01:27 | exactly what I am expecting.
| | 01:28 | Now I need to add the jQuery script to
make the hide and show function work.
| | 01:33 | First, I'll go to my child theme
folder, add a new folder call it JS.
| | 01:39 | And this is the folder where I am
going to place all my JavaScript.
| | 01:42 | Then I'll go to my code editor, create a
new page, save it, and put it inside the
| | 01:49 | JS folder calling it hide.js and I'll
just make sure that this is a JavaScript
| | 01:55 | file, Save it, and this is
where I'll place my jQuery code.
| | 02:01 | To make it easier for you, I have
created a codesnippet, so you can simply go
| | 02:04 | into the codesnippets file, copy out
the codesnippet, paste it in, and then I'll
| | 02:11 | show you how this works.
| | 02:12 | What we're doing here is
adding a jQuery function.
| | 02:15 | The function starts out by
looking for a link that's wrapped in the
| | 02:19 | class hide-button that's a link we
just created down here, link wrapped
| | 02:24 | in the hide-button class.
| | 02:26 | It says when that link is
clicked, run the following function.
| | 02:30 | And the function does the following.
| | 02:32 | It's finds the ID front page intro, which is the
ID that wraps all the content in the welcome page.
| | 02:40 | And then it says, slide toggle
that front page intro slowly.
| | 02:45 | Slide toggle is a function that slides
things up and hides them and then slides
| | 02:49 | them down again to show them.
| | 02:51 | The next function below here is just
one that switches the hide text to show
| | 02:55 | when it's hidden and then
back to hide when it's shown.
| | 02:58 | I'll save this JavaScript file, go back
to my browser and reload it, and when I
| | 03:04 | click on the link nothing happens.
That's because although we created the
| | 03:08 | JavaScript we haven't
told the site to use it yet.
| | 03:12 | To get the site to use the JavaScript we
need to enqueue the JavaScript into the site.
| | 03:17 | Previously in the course we looked at
enqueuing and dequeuing scripts and styles,
| | 03:22 | and now we're going to use that same technique, to add
a new script into our sites via our child theme.
| | 03:27 | Enqueuing happens in functions.php,
so I'll open functions.php in my child
| | 03:34 | theme, scroll all the way to the bottom,
create some more space and then I'll go
| | 03:40 | back to my codesnippets file and find the
function I need. It's right down here.
| | 03:44 | I'll copy out that function, paste it in, and now
we'll take a quick look at what it's happing here.
| | 03:52 | I create a new function called
ChildOfTwentyTwelve_hideMeta.
| | 03:56 | This function only works if this is not an admin
page, because we don't need it for the admin page.
| | 04:02 | What the function does is it first
registers a script we give the script the name hide.
| | 04:08 | We find the script in the stylesheet
directory that is the directory for the
| | 04:11 | child theme under the JS folder
and the file is called hide.js.
| | 04:16 | That's a file we created just a bit earlier.
| | 04:18 | Then we associate hide.js with the
jQuery scripts that's packaged inside
| | 04:23 | WordPress and finally we
enqueue this hide scripts.
| | 04:28 | The last part is an add_action call
that on an initiation of the theme calls
| | 04:34 | ChildOfTwentyTwelve_hideMeta
which is this function.
| | 04:37 | When I save this and reload my
page again, you'll see that now the
| | 04:44 | Hide/Show function works.
I can hide the content,
| | 04:46 | and when I hide it the text changes to
Show and then back to Hide again.
| | 04:51 | The last step in this
process is purely cosmetic.
| | 04:54 | It looks kind of weird right now because the
hide is associated with the post directly underneath it.
| | 05:00 | What I want to do is add some
styling to move Hide over here and make it
| | 05:05 | visually associate with the
box with the welcome content.
| | 05:10 | So once again I'll go back to my
codesnippets scroll down and here I'll find a
| | 05:14 | little bit of style code that I can
copy and paste into style.css in my child
| | 05:20 | theme, so I'll open style.css, scroll
down to the end of where I have the style
| | 05:27 | for the front page and just paste that style in.
| | 05:30 | If you look closely you'll see all this
is a styling that affects the button, so
| | 05:35 | that the button looks different, it has
some borders on it, and it has a different
| | 05:39 | color, and it also floats to the right.
| | 05:41 | When I save my stylesheet and reload my
page, you'll see the button jumps over
| | 05:47 | here to the rights it also looks like
it belongs to this welcome box and it
| | 05:53 | still works the exact same way as it did before.
| | 05:55 | JavaScripts can make your site more
interesting and easier to use for your visitors.
| | 06:01 | Adding JavaScript correctly through
enqueuing allows creative flexibility and
| | 06:06 | less clutter when you work with your theme.
| | 06:08 | The key when using
JavaScripts is to subtle about it.
| | 06:12 | Adding too much fancy JS often leads to a
clunky site that takes away from the content.
| | 06:18 | What you have seen here in the few
last movies is how we can add advanced
| | 06:22 | features into our site in a very easy way
and add extra functionality for our visitors.
| | 06:28 | And that's kind of whole
point of using a child theme,
| | 06:30 | you make the experience
better for your visitors.
| | Collapse this transcript |
|
|
8. Adding Finishing TouchesAdding a custom favicon| 00:00 | Once you have a child theme you can be proud of,
you need to put on the last finishing touches.
| | 00:06 | These seem trivial and less important, but
they make all the difference in the long run.
| | 00:11 | One such finishing touch is a custom favicon.
| | 00:14 | A favicon is the little icon you see
at the top of your browser when you
| | 00:18 | visit the site and it also appears next to your
site name should someone decide to bookmark it.
| | 00:24 | Favicons are easy to create and easy to install.
You just have to remember to do it.
| | 00:29 | To see what a favicon is, you'll notice
that when I'm on this Red 30 blog site I
| | 00:34 | have a little page up here
in the corner in my browser.
| | 00:37 | But if I go to a different site, like
for example, this site for Western Front,
| | 00:43 | you'll see that their logo is also
mimicked up here, and that's their favicon,
| | 00:47 | so that's what I want to create.
I already have a graphic here.
| | 00:52 | It's called favicon.png and it's a PNG file transparent
and it's the one I want to use as my favicon.
| | 00:59 | But I can't just use a PNG as my favicon,
I have to transform it into an icon file first.
| | 01:06 | I can do that online
through many different services.
| | 01:09 | A service I like a lot
is one called xiconeditor.
| | 01:13 | This service allows me to upload an
image and then create a favicon based on it.
| | 01:18 | So I'm going to go in here,
click Import to upload the file.
| | 01:25 | I'll upload my file, scale it up so that
the application understands what I want
| | 01:30 | to do, and then I can choose what sizes I want.
| | 01:33 | I can choose all four sizes, you see them
here or I can uncheck either one of these.
| | 01:38 | I'm just going to leave them all on.
| | 01:40 | I'll click OK and the
application now creates a favicon for me.
| | 01:45 | I can preview the favicon if I want to
and here you can see what it would end up
| | 01:51 | looking like in my browser and also on other places,
and if I'm satisfied with it I'll click Export.
| | 02:00 | Now I have a favicon.ico file downloaded
onto my computer and I can show it in my folder.
| | 02:08 | What I want to do is move this file
into my child theme--so I'll go and find my
| | 02:13 | child theme--and just place
the file inside my child theme.
| | 02:18 | Now that I have the favicon in my child
theme I need to call it from my theme.
| | 02:23 | Now I'm going to do that in the header.
| | 02:25 | So I'll open header.php for my child
theme, then I'll go up here in the very
| | 02:29 | beginning right under head and I'll
type in the code to create a favicon.
| | 02:35 | It starts link and then relation="shortcut
icon" and then you have to put in the href;
| | 02:44 | this is the link directly to the favicon.
| | 02:47 | Now because I don't know what the URL
is going to be for this site, instead of
| | 02:51 | putting in the actual URL, I'm going
to put in a function that gets the URL.
| | 02:56 | So I'll say php echo get_stylesheet_directory_uri
and then I'll finish it by saying /favicon.ico.
| | 03:14 | What's happening here is I'm asking
WordPress to print out the directory to my
| | 03:18 | child theme and then we're just
appending favicon.ico at the end of it.
| | 03:23 | When I save this and reload my site in
my browser, you see that my favicon now
| | 03:29 | appears up here in the corner,
which is exactly what I want.
| | 03:33 | It doesn't seem like much
until you go to a different site.
| | 03:36 | If you're at a different site you can
now see the icon up here and it's far
| | 03:40 | more eye-catching than that little page that
was there previously, which is why it matters.
| | 03:45 | Adding a favicon is one of those
small things that make a huge difference.
| | 03:49 | This is something people nearly always
forget and it's something that is very
| | 03:53 | easy to do, so make it part of your
habit and always add your favicons.
| | Collapse this transcript |
| Adding a custom screenshot| 00:00 | Theme screenshots are an important way
of identifying what theme you're using.
| | 00:05 | Adding a custom screenshot to your
child theme is one of the last things you
| | 00:09 | should do before taking it live.
| | 00:11 | When I say theme screenshots, I mean the
little screenshots that appear when you
| | 00:15 | go to your Dashboard and
go to Appearance and Themes.
| | 00:19 | Here you can see that all my
installed themes Twenty Eleven, Twenty Ten,
| | 00:23 | and Twenty Twelve have screenshots, but
you also see that my child theme does not
| | 00:28 | yet have a screenshot, so I need to create it.
| | 00:32 | Just like with most other things in
child themes, the way I create a new
| | 00:35 | screenshot is I go to the Parent theme,
find the screenshot file and copy it
| | 00:40 | over into my child theme.
| | 00:42 | Then I open that screenshot
file in my image editor.
| | 00:46 | I'm going to use Photoshop for this, and
then finally I'll go back to my browser,
| | 00:51 | go to the front page and
actually make a screenshot.
| | 00:55 | I'll hit Ctrl+Minus to zoom out a couple
of times until I get the view I want.
| | 01:01 | I'll also hit F11 to go full screen
and then I'll hit Print Screen on my PC.
| | 01:07 | Now I can reset my browser by hitting
F11 again and hitting Ctrl+0, and then I'm
| | 01:14 | going to go back to
Photoshop and paste in my screenshot.
| | 01:18 | As you can see it's a little bit too big
right now, so have to zoom out and then
| | 01:23 | transform it to make it the size I want.
| | 01:26 | And when I'm happy with what I see
and I think this looks pretty good,
| | 01:32 | I simply go and save the file.
| | 01:34 | I'll save it on top of the original one in my
child theme so it's going to be called screenshot.png.
| | 01:41 | I'll replace it, go back to my Dashboard >
Appearance > Themes and here you
| | 01:51 | see my new screenshot.
| | 01:53 | You notice that all I did was copy
the original file into my child themes,
| | 01:57 | then opened that original file from child
themes, paste in a new screenshot, and saved it.
| | 02:03 | WordPress automatically figures out
that the file called screenshot.png is the
| | 02:07 | screenshot for this theme, and now you can actually
see what the theme looks like before you activate it.
| | 02:13 | With the screenshot in place, your
child theme is easy to identify and
| | 02:17 | differentiate from the parent theme when you're
looking through the installed themes on your site.
| | 02:22 | And if you ever decide to publish your
child theme so others can use it, the
| | 02:26 | screenshot is all the more important.
| | Collapse this transcript |
| Adding footer information| 00:00 | Just like an artist usually signs her
paintings and other works somewhere on the
| | 00:04 | bottom to put her mark on them, so
should you put your own information at the
| | 00:08 | bottom of your new child theme so
that others can see what you've done.
| | 00:13 | When creating a child theme, I
always encourage some coding courtesy.
| | 00:17 | By that I mean you should always say that this
is a child theme and reference the original.
| | 00:21 | That way you're both giving props to the
people who built the original theme and
| | 00:26 | at the same time you're letting people compare
the original to your new and improved child theme.
| | 00:32 | The logical place to put this information
as well as some other information is
| | 00:36 | down here in the footer.
| | 00:38 | In addition to adding information
about your child theme, I also like to add a
| | 00:41 | copyright notice with the current
year and a link back to this site.
| | 00:46 | That's not strictly necessary, but it's
a good idea to just remind people that
| | 00:51 | when they see things online someone
actually owns to copyright to that content.
| | 00:55 | So let's start by adding the copyright notice.
| | 00:58 | I'll go to my child theme, open footer.php,
and find where I want to put this information.
| | 01:05 | I'm going to put it after this action call
here, and I'll start with a copyright notice.
| | 01:10 | I wanted to say Copyright and then I
want to put in that copyright symbol, the
| | 01:15 | circle with the C inside it and
then I want to put in the year.
| | 01:19 | Here I'm going to use a PHP
function to call up the year.
| | 01:22 | I'll say echo date, capitalized Y. This
will print out the current year and then
| | 01:31 | I want to put in a link to the current site.
| | 01:35 | So I'll say a href= and then I'm going
to use a WordPress function that will
| | 01:40 | return the URL to the main site's homepage.
| | 01:43 | So I'll say php echo and the function is
called home_url and because it's a link
| | 01:53 | I need to give it a title.
| | 01:54 | The title should be the name of the
site, so here I'm going to use another
| | 01:58 | function from WordPress, this one
called bloginfo ('name') and this will
| | 02:04 | simply print out the name of the
site as you've said it inside WordPress.
| | 02:09 | And then I'm going to copy this, end
my tag and paste it in again because I
| | 02:13 | wanted the actual text of the
link to say the name of the site.
| | 02:17 | And then I will end my anchor tag
and put a punctuation mark at the end.
| | 02:22 | I'm going to save this and test
it in my browser just to say that
| | 02:26 | everything works, and now we can
see it says Copyright with a copyright
| | 02:30 | symbol, Twenty Twelve
Red 30 Blog. That's great.
| | 02:34 | Now I need to add the information
about the parent theme and the child theme.
| | 02:38 | Back in footer.php, I'll say Twenty Twelve
child theme by Morten Rand-Hendriksen.
| | 02:47 | And then I want to wrap Twenty Twelve
in an anchor so that people can go and
| | 02:54 | check out Twenty Twelve, a href= and
then I made the URL to Twenty Twelve and I
| | 03:02 | have it up here, this points directly
to Twenty Twelve in the themes directory.
| | 03:06 | So I'll copy that URL, paste it in,
title="Twenty Twelve" and I'll also set a
| | 03:16 | target so that it opens in a separate
window, blank and then I'll end my anchor
| | 03:25 | on the other end of Twenty Twelve.
| | 03:27 | I will save it again, reload my site,
and now you see it says Copyright 2012,
| | 03:36 | Red 30 Blog, and here there is a link to
Twenty Twelve that says Twenty Twelve child
| | 03:40 | theme by Morten Rand-Hendriksen,
Proudly powered by WordPress.
| | 03:43 | If I click Twenty Twelve, opens a
new window and here's Twenty Twelve.
| | 03:49 | With a favicon, a screen shot, and a custom footer,
your child theme is complete. Congratulations.
| | Collapse this transcript |
|
|
9. Troubleshooting Child ThemesWhat to do when a child theme crashes your website| 00:00 | Working on the Internet, you're bound to
run into situations where your site goes down.
| | 00:05 | And working with child themes, it's
quite likely that at some point or
| | 00:09 | another, you make a small error that causes
the site to either break or go down completely.
| | 00:14 | I like to say that the web is
an inherently unstable platform,
| | 00:18 | and we as web developers just work to
make it appear as if the web is stable.
| | 00:23 | That is very true for WordPress, because although
when everything works fine, WordPress works great,
| | 00:30 | you only need to make a tiny little mistake,
and it has enormous consequences for your site.
| | 00:35 | Fortunately, because of how WordPress is
built, the fact that the site goes down
| | 00:40 | or breaks doesn't really mean much,
because all you have to do is just fix the
| | 00:45 | small error, and it will come back up again.
| | 00:47 | So let me address two very common issues
that arise when you work with child themes.
| | 00:52 | The first one is a standard code error.
| | 00:55 | Throughout this course, we have
been adding a lot of functions and
| | 00:58 | functionalities to the site editing
different pages and different templates.
| | 01:02 | Let me show you what happens if you make
a tiny coding error in the wrong place.
| | 01:06 | I'll open functions.php, and make a code error.
So I'll simply delete this curly bracket here.
| | 01:13 | I'll save it, reload the
page and my website disappeared.
| | 01:19 | But worse than that, I can't access it at all.
I can try to go to wp-admin, nothing.
| | 01:26 | So I cannot access my site
at all from the web anymore.
| | 01:29 | And all I did was removed a curly bracket.
| | 01:31 | But the great thing about working with
child themes and also about working with
| | 01:35 | WordPress is that when things like
that happen, you can force WordPress to
| | 01:39 | revert back to a stable state.
| | 01:42 | The easiest way to do that is to simply
go to your themes folder, and rename the
| | 01:47 | folder for your child theme.
| | 01:48 | So I'll rename this to your child
theme, BROKEN, and reload my page.
| | 01:55 | And what happens now is WordPress tries
to find the child theme, can't find it,
| | 01:59 | and gives you an error.
| | 02:01 | The themes directory is
either empty or doesn't exist.
| | 02:04 | Please check your installation.
| | 02:06 | What really happened was
WordPress fell back on a default theme.
| | 02:10 | So now, you have Twenty Eleven activated,
or you may have Twenty Twelve activated.
| | 02:14 | The child theme is still there,
but as we know, it doesn't work.
| | 02:18 | So now that it doesn't work, I can go
back and edit it so that I can make it
| | 02:22 | work again, and then put it back online.
| | 02:25 | So I can go back into my theme, open
functions.php, fix my error, and rename the folder.
| | 02:35 | Then I just have to go back to the site,
reload the Themes page, and reactivate
| | 02:44 | Child of Twenty Twelve.
| | 02:46 | And with that, my site is back
online and everything is fine.
| | 02:51 | The second common error is
also done in functions.php.
| | 02:54 | But you could
accidentally do it other places too.
| | 02:56 | It's very common that people
make new functions like these ones.
| | 03:02 | But they use function names that
match existing function names either in
| | 03:06 | WordPress or in the parent theme.
| | 03:08 | If you do, you get a double function,
and if everything isn't set up to handle
| | 03:13 | double functions, you get
massive code errors in the process.
| | 03:17 | It's very easy to avoid this.
| | 03:19 | All you have to do is give your new
functions a proper name that's different
| | 03:24 | from the parent theme function.
| | 03:26 | The general rule is to simply add
something like mytheme_ and then the
| | 03:30 | description of the function.
| | 03:32 | Through this course, I have actually
added a couple of different names, and to be
| | 03:36 | honest with you, that's a bit sloppy.
| | 03:38 | I should've actually given everything
the same name so it's easy to understand.
| | 03:42 | But you get my drift.
| | 03:43 | By saying mytheme_ in front of each
function or mychildtheme_ or something like
| | 03:50 | that or even the name of the theme,
you're avoiding the chance of anything
| | 03:54 | overwriting the existing
theme or crashing with WordPress.
| | 03:58 | The default in WordPress is that everything
is either started with WP or it just
| | 04:03 | spells out the function itself.
| | 04:04 | So if you always add either your own
name or the name of the theme or something
| | 04:09 | else at the front of each function,
you'll never clash with anything else.
| | 04:15 | WordPress site crashes can be pretty
disturbing, but it's very rare indeed that
| | 04:20 | a WordPress site truly goes down.
| | 04:22 | In almost every case, the site crash is caused by
either bad code or a conflict in the theme or plug-in.
| | 04:29 | That means, retracing your steps or if
the worst comes to worst, disabling your
| | 04:33 | child theme, will usually get you
back up and running just like that.
| | Collapse this transcript |
| Updating parent and child themes| 00:00 | By following this course, you've now
created an advanced child theme based on
| | 00:05 | the Twenty Twelve theme, and added
lots of interesting functionality.
| | 00:08 | And I also hope you've walked away with
some information about how you can use
| | 00:12 | the same techniques to alter
other themes if you want to use them.
| | 00:17 | Before we wrap up, I want to impart on you
some very important information about updates.
| | 00:22 | And this is something I tell
everyone who works with WordPress.
| | 00:25 | When you have a WordPress site, it's extremely
important that you always keep it up-to-date.
| | 00:31 | If you don't keep updating your site,
you run the risk of either missing out
| | 00:35 | on important updates and features, or even
worse, you might leave your site open for attacks.
| | 00:41 | It's very easy to update both
WordPress and also update themes and plug-ins.
| | 00:46 | You just have to remember to keep in mind that
you need to check if they need to be updated.
| | 00:51 | And because you're working with a child
theme, it's actually completely safe to
| | 00:56 | update the parent theme for your
child theme, because as I've said several
| | 01:00 | times throughout this course, if you
update the parent theme, nothing really
| | 01:04 | happens to the child theme.
| | 01:05 | You just add a new functionality
and new security features.
| | 01:08 | So how do you know what needs to be updated?
Well, WordPress makes it very easy for you.
| | 01:14 | Once you're logged in, if you're on
the front page, you'll actually see this
| | 01:18 | recycling sign up here, and it
will tell you if you need updates.
| | 01:22 | Right now, I need to
update one plug-in and one theme.
| | 01:25 | If I am on the back end and I go to the
Dashboard, you'll see, under Dashboard,
| | 01:30 | we have a link that says Updates and it will
tell you how many items need to be updated.
| | 01:35 | If I go to the Updates link, I'll get
all the information about the different
| | 01:40 | versions I have installed.
| | 01:41 | Here you see I'm currently
running the latest version of WordPress.
| | 01:45 | There's one plug-in that needs to be updated,
and I also have one theme that needs to be updated.
| | 01:50 | Updating WordPress, updating plug-ins,
and updating themes is very easy.
| | 01:55 | All you have to do is select them
and click Update, and WordPress pretty
| | 01:59 | much does it for you.
| | 02:01 | In some cases, the server will
prevent you from doing this automatically.
| | 02:05 | And in those very rare cases,
you need to do the update manually.
| | 02:09 | But in almost every case,
the update is automatic.
| | 02:12 | If you see that there is an update to
WordPress or to a plug-in or to a theme,
| | 02:17 | apply the update right away.
| | 02:19 | Chances are you'll add a new feature
that will make your site even better.
| | 02:23 | Now you have a fully built-out child
theme that you can play with, you can
| | 02:27 | augment, and you can
change into anything you want.
| | 02:29 | Thank you for taking part in this
journey through child themes with me.
| | 02:33 | This is Morten signing out!
| | Collapse this transcript |
|
|
