IntroductionWelcome| 00:04 | Hi! I am Joseph Lowery, here to welcome you to
Dreamweaver and WordPress: Building Themes.
| | 00:10 | WordPress is among the top content
management systems, or CMS, and blogging
| | 00:14 | platforms in use today.
| | 00:16 | One of the primary reasons web
professionals turn toward WordPress when
| | 00:20 | creating sites for their clients is its
combination of power features and full
| | 00:25 | design customization.
| | 00:27 | In WordPress, a site's look and feel
is controlled by the theme it uses.
| | 00:32 | There are two main ways you can
customize a theme for a website.
| | 00:36 | First, you can acquire one of the
thousands of available themes and manipulate
| | 00:41 | the structure and/or CSS.
| | 00:43 | The other approach to working with
themes is to build it from the ground up, and
| | 00:48 | that's exactly what we're
going to cover in this course.
| | 00:50 | I'll help you understand how the
various pieces of the WordPress puzzle fit
| | 00:55 | together and show you how to use
Dreamweaver's power tools to build them
| | 00:59 | quickly and efficiently.
| | 01:00 | We'll expand our theme exploration
with details on how to create custom page
| | 01:06 | templates, personalized search results, and more.
| | 01:10 | Creating your own theme from scratch
may be the best way to really get your head
| | 01:15 | around the types of sites
possible with Dreamweaver and WordPress.
| | 01:19 | Let's get started!
| | Collapse this transcript |
| About the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library, you have
| | 00:05 | access to the exercise files
used throughout this title.
| | 00:08 | Naturally, the information in this
course is ultimately intended to be applied
| | 00:12 | to your own web pages.
| | 00:14 | However, you may find it helpful to
work with the supplied exercise files to
| | 00:18 | practice the step safely and
without creating your own examples.
| | 00:23 | To begin using the files from the site,
download them, extract them, and then
| | 00:27 | store those files in a
convenient location, such as your desktop.
| | 00:32 | The Exercise Files folder is
organized by chapter, although not every
| | 00:37 | chapter has a folder.
| | 00:39 | In each chapter, it's broken down
into the various videos that you'll see.
| | 00:44 | Within the video folders, there are a
series of files, typically assets like CSS
| | 00:49 | style sheets, images, and source code,
| | 00:53 | as in this case where we have a PHP
file named index. You'll also find a folder
| | 00:58 | named final and that contains files
showing the completed state of the movie,
| | 01:03 | which you can open up to take a
look at and explore at your leisure.
| | 01:06 | Because we're working with WordPress,
which stores much of its information in a
| | 01:10 | database, it's best to follow the course
chapter by chapter in order to have the
| | 01:14 | most up-to-date data.
| | 01:16 | However, if you need to jump in at a
certain point, I've provided a folder
| | 01:21 | called JumpIn and within it is an XML
file which you can use to bring the data
| | 01:26 | into WordPress' database table through
the WordPress Import feature, found in the
| | 01:32 | WordPress Dashboard, under the Tools category.
| | 01:35 | If you are a Monthly subscriber or
Annual subscriber to lynda.com, you don't
| | 01:39 | have access to the exercise files,
but you can definitely follow along with
| | 01:43 | your own assets.
| | Collapse this transcript |
| Development environment requirements| 00:00 | Because WordPress is an
application that relies on PHP and MySQL,
| | 00:04 | you'll need to set up a local
development environment to work with it.
| | 00:08 | While going through all the steps to
create such a development environment is
| | 00:11 | beyond the scope of this course, I am
going to lay out the requirements and
| | 00:15 | give you some pointers, including telling
you about a freely available lynda.com course.
| | 00:21 | For WordPress to run, you'll need the
following setup, both on your hosted site
| | 00:26 | and on your local system.
| | 00:28 | You'll need a web server, like Apache
or Microsoft's Internet information server,
| | 00:33 | known as IIS; a PHP server
version 5.2.4 or higher; and a MySQL server,
| | 00:41 | version 5 or higher.
| | 00:43 | That will handle all the
modern installations of WordPress.
| | 00:46 | If you're working with a legacy site
that uses WordPress 3.1 or below, you can
| | 00:51 | use older versions of the PHP
and MySQL server, as listed here.
| | 00:56 | Make sure your web site host meets these
requirements before you embark on using
| | 01:01 | WordPress for a site. Most do.
| | 01:04 | If you need to set up a local
development environment, there are several options.
| | 01:08 | You can install the components,
that is, the web server, PHP, and MySQL,
| | 01:12 | separately or you can install one of
several bundled systems that are available
| | 01:16 | like WampServer for Windows, either in
32- or 64-bit version, as we're using in
| | 01:22 | this course, MAMP for Mac OS X.
MAMP offers two different versions:
| | 01:28 | a standard and a pro. You really only
need the standard version to start. Or
| | 01:33 | XAMPP for Windows or for Mac OS.
| | 01:38 | If you're installing the components
separately and not in one of the bundles,
| | 01:42 | I highly recommend that you include a database
manager like phpMyAdmin or something similar.
| | 01:48 | All of the bundled systems include phpMyAdmin.
| | 01:53 | For further explanation on setting
up a local development environment,
| | 01:57 | see the freely available lynda
course by David Gassner, Installing
| | 02:01 | Apache, MySQL, and PHP.
| | 02:04 | Next, you'll need to set up WordPress locally.
| | 02:07 | For detailed explanation, see my course
Dreamweaver and WordPress: Core Concepts.
| | 02:13 | As an overview, here's what you need to do.
| | 02:16 | The first step is to create a database in
MySQL with phpMyAdmin, or a similar app.
| | 02:22 | The database that's used in the
example files is DW_WP_Themes.
| | 02:30 | Then you'll need to copy the
WordPress files that you downloaded from
| | 02:34 | wordpress.org to a new folder in the web root.
| | 02:38 | That folder will also serve as
the local site root in Dreamweaver.
| | 02:42 | For this course, a folder
is named again DW_WP_Themes.
| | 02:49 | Then, in your browser, go to
localhost/ and whatever the folder name is.
| | 02:55 | When you do that, WordPress will come
back with an indication that it can't find
| | 03:00 | the configuration file and
ask if you want to create it.
| | 03:03 | Click Yes, and you'll be given
an option to enter in some values:
| | 03:07 | the database name; the server name,
which is typically localhost ;and your
| | 03:12 | username for the database and password.
| | 03:15 | When your WordPress setup is
complete, you should be able to visit
| | 03:18 | http://localhost/foldername/wp-admin
and then log in using your username and
| | 03:30 | password that you previously specified.
| | 03:33 | This will give you access to the WordPress
administrative site known as the Dashboard.
| | 03:38 | The final step is to create
your Dreamweaver environment.
| | 03:42 | In Dreamweaver, you'll need to set up
a new site with the WordPress files at
| | 03:46 | the local site root.
| | 03:48 | You'll also need to create a new testing
server in Dreamweaver with these parameters.
| | 03:52 | Connect using the Local/Network option,
point to the site folder, and then also
| | 03:58 | under the Advanced Tab,
choose the PHP MySQL Server Model.
| | 04:03 | After you click Save, make sure that
the Testing server checkbox is selected
| | 04:08 | in the server list.
| | 04:09 | That last point is a bit of a gotcha,
because Dreamweaver typically selects the
| | 04:14 | Remote server checkbox by default,
and you have to make sure to change it.
| | 04:18 | Here is how my site looks in Dreamweaver.
| | 04:22 | I have the site root pointing to the
folder that contains the latest version of
| | 04:26 | WordPress, which at the time of this
recording is 3.3.1. Just a quick side note.
| | 04:33 | The concepts and methods in this course
should work fine with future versions of WordPress,
| | 04:38 | although there maybe some UI changes.
| | 04:40 | However, for complete fidelity, visit
wordpress.org/download/release-archive
| | 04:49 | to get version 3.3.1.
| | 04:52 | Once your local development
environment is established, you'll be able to
| | 04:55 | create and develop WordPress sites,
as well as work with PHP and MySQL,
| | 05:00 | separately in Dreamweaver.
| | Collapse this transcript |
|
|
1. Building a Theme From ScratchUnderstanding the basic WordPress structure| 00:00 | One of the real strengths of
WordPress is its flexibility.
| | 00:03 | You can easily switch the look and feel
of your site to one totally different
| | 00:07 | by just activating a different theme.
| | 00:10 | New pages can be quickly
added for any special purpose.
| | 00:14 | Content can be grouped by custom
tags or categories, added on the fly.
| | 00:18 | However, all this flexibility comes at a price.
| | 00:22 | WordPress is a pretty complex application.
| | 00:25 | In this video, I'm going to explain
just how WordPress works, so that you can
| | 00:30 | get a better grasp of what's
required to build a custom theme.
| | 00:35 | So visitors first requesting the
initial WordPress page index.php starts the
| | 00:42 | whole ball rolling, just
like viewing any web page.
| | 00:46 | The next thing that happens is
WordPress activates the themes.
| | 00:50 | This is actually the first line of
the executable source code and the
| | 00:55 | WordPress index.php file.
| | 00:58 | WordPress then checks to see
which template files are present.
| | 01:01 | WordPress works with a series of
template files that it dynamically assembles to
| | 01:05 | create the desired page, and it has to
know which template files are present so
| | 01:10 | that it can know which ones to bring together.
| | 01:13 | Next, it gathers the settings
that are stored in the database.
| | 01:17 | This includes all the default settings
and any ones that have been customized,
| | 01:21 | like the title of the site for example.
| | 01:23 | Then it retrieves a
specified number of most recent posts.
| | 01:28 | You can set how many posts you want shown
through the Dashboard's general settings.
| | 01:33 | Certain information, like post data, is
stored in a variable, and this includes
| | 01:38 | data about the post, like the title,
author, date of post, and comments, otherwise
| | 01:43 | known as metadata, as well as
the content of the post itself.
| | 01:47 | Finally, it outputs the data into a
theme page, according to the coded layout
| | 01:53 | and CSS styles applied.
| | 01:55 | Developing this presentation layer
will be the main focus of this course.
| | 02:00 | As you can see, there's a lot going on,
and it happens in the blink of an eye.
| | 02:05 | And this is just for the homepage.
| | 02:07 | WordPress is capable of displaying
all types of pages, including those for
| | 02:11 | specific posts, archives, posts under a
particular category, or with a specific tag.
| | 02:17 | One of the key paths to developing
custom themes is to understand what happens
| | 02:23 | when these and other
types of pages are requested.
| | 02:27 | Remember this step where WordPress checks
to see which template files are present?
| | 02:31 | A theme doesn't have to have a
specific file for every type of page.
| | 02:37 | WordPress has a template hierarchy
built-in that determines what to do if a
| | 02:42 | needed file is missing.
| | 02:43 | Let me give you an example.
| | 02:46 | Let's say that a site visitor clicks on
the author's name, mine in this example,
| | 02:51 | to see all the posts that he wrote.
| | 02:53 | First, WordPress looks to see if there
is a template that combines the author
| | 02:57 | prefix with the author's so-called nice
name, defined in the user's profile, and
| | 03:03 | uses that if there is.
| | 03:05 | If there's not, it looks
for one with the user ID.
| | 03:09 | If that's not there, it tries to
display the generic author.php template.
| | 03:14 | Should that template be unavailable, it
looks for a theme-specific archive.php.
| | 03:20 | And if that's not there, ultimately,
it uses the index.php template.
| | 03:26 | The WordPress template hierarchy
covers all the different used cases.
| | 03:30 | You can see a complete
diagram on the wordpress.org site.
| | 03:34 | The template hierarchy gives custom theme
developers a tremendous degree of control.
| | 03:39 | You can basically decide how much you
want to fine-tune the layout of your theme
| | 03:43 | on a page-by-page basis.
| | 03:45 | Now that you have a better
understanding of how WordPress works with themes in
| | 03:49 | general, you are ready to dive a bit
deeper into how an individual theme page
| | 03:54 | is constructed.
| | Collapse this transcript |
| Constructing a theme page| 00:00 | A standard HTML page is a single file of
code with numerous dependent files like
| | 00:05 | images and style sheets.
| | 00:07 | A dynamic HTML page, like those used by
WordPress, consists of many code files,
| | 00:13 | dependent files, and data from a
database assembled on the fly.
| | 00:17 | In this video, we will explore the
components of a basic WordPress theme page
| | 00:22 | and how it all comes together.
| | 00:23 | The individual files that make up a
theme page are called template files,
| | 00:28 | not to be confused with Dreamweaver templates.
| | 00:30 | And while it can very widely depending
on the theme, a basic theme homepage like
| | 00:35 | the one we are going to build is
comprised of five different template files.
| | 00:40 | The first elements of a theme page come from
the Header template file, stored as header.php.
| | 00:47 | This includes the doctype and opening HTML
tag, as well as the complete head section.
| | 00:53 | It also typically includes the opening
body tag up through the header section.
| | 00:58 | The next section of the page comes from
the index.php file, which is responsible
| | 01:03 | for displaying the main
content, usually one or more posts.
| | 01:07 | The index.php page, because it is the
main one in the folder, also contains
| | 01:12 | WordPress PHP functions to integrate
other page areas, such as the header.
| | 01:17 | WordPress themes very
often use at least one sidebar.
| | 01:21 | That content comes from the
appropriately named sidebar.php file.
| | 01:27 | In WordPress, sidebars
frequently are used to contain widgets.
| | 01:30 | Widgets can do many things, like
providing navigation links to archives of
| | 01:35 | posts, categories, or tags.
| | 01:37 | The generally accepted practice in
building a theme is to set up your sidebar to
| | 01:42 | show a default set of widgets which
can be replaced by those selected in the
| | 01:47 | WordPress Dashboard.
| | 01:49 | The footer.php file obviously
holds the footer section of the page,
| | 01:53 | but it also includes the closing tags
to the body HTML and any other tag opened
| | 01:59 | but not closed in header.php or index.php.
| | 02:04 | Finally, the main CSS style sheet, by
default named style.css, is the primary
| | 02:11 | repository for the CSS rules which
handle the presentation of the theme page.
| | 02:16 | Additionally, style.css is where
information about the theme itself--
| | 02:21 | it's name, author and so forth--are stored.
| | 02:24 | You'll need those details properly
formatted in order for your theme to be
| | 02:28 | activated by WordPress.
| | 02:30 | Those steps are covered in the
Presenting the Theme chapter of this course.
| | 02:34 | Several of these files--header, footer
and sidebar--are frequently used to create
| | 02:39 | other types of pages.
| | 02:41 | As explained in the "Understanding of the
basic WordPress structure" video earlier
| | 02:45 | in this chapter, WordPress follows a
template hierarchy to determine which
| | 02:50 | layout to use for a particular type of page.
| | 02:53 | As a custom theme builder, you can
control how specific pages are presented by
| | 02:57 | creating custom template
files, like those shown here.
| | 03:01 | I want to take a moment to describe
the top two template files on this list.
| | 03:06 | The archive page is, as determined
by the WordPress template hierarchy,
| | 03:11 | extremely important.
| | 03:12 | It is essentially the fallback
template for 6 different page types: Author;
| | 03:17 | Category; Date; Tags; Taxonomy, which
is a more robust type of tagging system;
| | 03:24 | and Archive itself.
| | 03:26 | If you don't create a template file for
any of the other page types, you need to
| | 03:30 | at least create an archive.php file.
| | 03:33 | The Custom Page Template File, stored as
page.php in the Theme folde,r is similar
| | 03:39 | but more open-ended.
| | 03:41 | Any page created via WordPress' Page
interface found in the Dashboard relies
| | 03:46 | on the custom page template.
| | 03:48 | So, if you wanted to banish the sidebar
from all of your custom pages, page.php
| | 03:54 | is the place to do it.
| | 03:56 | Moreover, you're not restricted to
using just one custom page template.
| | 04:00 | I recently worked on a project that
employed over 18 custom page templates.
| | 04:05 | There is no limit to the
number of templates you can use.
| | 04:08 | Now that you have a better grasp of
the different parts of the theme page,
| | 04:12 | you're ready to start building
the files from the ground up.
| | Collapse this transcript |
|
|
2. Creating the Core ElementsSetting up for a custom theme| 00:00 | Before we can get started actually
creating the template files that form our
| | 00:03 | theme, we need to take care of a
couple of housekeeping chores: one minor, but
| | 00:08 | essential, and another, a
handy Dreamweaver helper.
| | 00:11 | Each thing you create or install
is contained within its own folder.
| | 00:16 | That folder is in turn stored within the
appropriately named themes folder, found
| | 00:22 | within the wp-content folder.
| | 00:25 | So, the path to a theme folder is wp-
content/themes and then the specific
| | 00:34 | folder name for whatever that theme is.
| | 00:36 | Now let's create the folder to hold our theme.
| | 00:40 | So expand the wp-content folder and
then expand themes once you see that,
| | 00:47 | right-click or Cntrl+Click on the
themes folder, and choose New Folder.
| | 00:53 | Change that name to the name of
whatever you want your folder to be called.
| | 00:57 | Now I'm going to call mine custom.
| | 01:01 | Now that takes care of the somewhat-
trivial-but-absolutely-essential task.
| | 01:05 | Let me show you a tool that will make
sure we're getting all the help and coding
| | 01:09 | WordPress pages that Dreamweaver can offer.
| | 01:12 | Before we implement that change, I want
to show you where we are at now so you
| | 01:16 | can appreciate what's being added.
| | 01:18 | I'm going to open up the twentyeleven
folder, which is one of the default themes
| | 01:24 | that comes with WordPress.
| | 01:25 | So now I'm going to scroll down
within the twentyeleven folder, till I find
| | 01:29 | index.php, double-click to open
that up, and here you see the very first
| | 01:35 | function is a get_header.
| | 01:37 | This is the function that is called to
bring in the code contained in header.php.
| | 01:42 | But I want to show you what happens
when we start working within PHP code in
| | 01:47 | Dreamweaver in this default state.
| | 01:49 | So I'm going to go ahead and put my
cursor right within the php block so I can
| | 01:54 | enter in some php code, and start to
type in this custom WordPress function.
| | 01:58 | So I will type get_, and let me go ahead
and invoke the code hints. You can do
| | 02:04 | that by pressing
Ctrl+Spacebar, both on a Mac and the PC.
| | 02:08 | And now when I type my H for header,
you see the code hint that comes up is
| | 02:14 | get_headers plural.
| | 02:15 | Now that is a standard PHP 5 function,
| | 02:19 | so that's why it's listed here, but
you don't see the WordPress-specific
| | 02:24 | function, get_header.
| | 02:26 | Now let's bring in that tool that will
add in WordPress-specific code hinting.
| | 02:31 | So I'm just going to hit Escape
here and get rid of my code line.
| | 02:36 | Okay, so let's go up to Site and
then choose Site-Specific Code Hints.
| | 02:42 | When the Site-Specific Code Hints
dialog box opens, Dreamweaver has already
| | 02:47 | looked at your site and sees that the
structure is one that it's familiar with
| | 02:51 | and identifies it as WordPress.
| | 02:53 | Now it also has options for Drupal and
Joomla or a completely different type of
| | 02:59 | structure that can be customized.
| | 03:01 | So we'll keep it at WordPress. If
necessary, you can point to other folders,
| | 03:06 | even folders within folders that
contains other kinds of functionalities and
| | 03:10 | have Dreamweaver pick up the code
hints necessary for those functions.
| | 03:15 | But for WordPress, all you literally
have to do is open this dialog box, verify
| | 03:20 | that Dreamweaver has identified the
structure as WordPress, and then click OK.
| | 03:25 | Now it's not immediately obvious, but
Dreamweaver has added a file to the dialog
| | 03:29 | box--and let me close
wp-content so you can see it here.
| | 03:33 | And it's the dw_php_codehinting.config,
which if we open up, you'll see
| | 03:42 | contains some core functionality that
we don't even have to understand at all.
| | 03:46 | You will also notice that the file is
automatically cloaked, so it will never be
| | 03:50 | uploaded to your server.
| | 03:52 | This is a local development option only.
| | 03:55 | So now that our Dreamweaver PHP
code hinting has been added, let's try
| | 03:59 | that get_header again.
| | 04:01 | So I'll go back to my code, type in
get_, and this time I'll hit Ctrl+Space
| | 04:08 | again. And now when I press H, get_
header isn't my list of code hints, as well
| | 04:13 | as get_headers, but you also see all the
other WordPress functionality and where
| | 04:20 | it is located within the WordPress theme.
| | 04:23 | If we enter wp_ and press Ctrl+Spacebar
again, you will see an entire library of
| | 04:31 | WordPress functionality. So let me press
Escape and then close this file without
| | 04:36 | saving it. So now we've got our
theme folder created and we've turned on
| | 04:42 | site-specific code hints
for WordPress in Dreamweaver.
| | 04:45 | We are ready to begin building the
template files for the custom theme.
| | Collapse this transcript |
| Building a header| 00:00 | The header template file in WordPress
typically contains--you guessed it--the
| | 00:04 | header section of the page.
| | 00:06 | However, you may not have guessed
that it also contains the entire
| | 00:10 | meta-document area, the head tag.
| | 00:12 | As such, it's an appropriate
place to begin our theme creation.
| | 00:16 | So we'll start by going up to File > New,
and then when the New Document dialog
| | 00:22 | box opens, choose Blank Page, Page Type PHP,
and set the DocType to HTML 5. Then click Create.
| | 00:35 | Now we're going to transform this
relatively simple blank page into a header
| | 00:41 | file that's filled with PHP code.
| | 00:44 | To help the process, I'm going to open
up the header_code.php file that I have
| | 00:50 | in my exercise files, found
in Chapter 2, folder 02_02.
| | 00:58 | This asset file has snippets of all
the PHP and other code that we'll need to
| | 01:03 | integrate into our HTML page.
| | 01:06 | We'll start by bringing in a language_
attributes function right into the HTML tag.
| | 01:11 | So I'll select this PHP snippet that
you see here, copy it with a Ctrl+C or
| | 01:17 | Command+C on the Mac, and then flip over
to my Untitled PHP page and paste it in
| | 01:25 | the HTML tag, with Ctrl+V
or Command+V on the Mac.
| | 01:30 | The WordPress-specific
language_attributes function inserts the attributes and
| | 01:34 | values for the proper language, like
lang=en for English and text direction,
| | 01:40 | left-to-right (LTR) or right-to-left (RTL).
| | 01:44 | So now, we need to work on the meta tag
that you see following the opening head tag.
| | 01:49 | Instead of having charset equals
a specific value, we can put in a
| | 01:54 | WordPress-specific function that will
integrate the charset defined in the settings.
| | 01:59 | So I'm going to remove this value and
then go over to my assets page and select
| | 02:07 | php bloginfo('charset').
Copy that and then paste it in.
| | 02:14 | The language_attributes and character_
set functions are pretty straightforward.
| | 02:18 | The title, however, because it has to adapt
to a variety of pages, is a bit more detailed.
| | 02:23 | So I'm going to erase my Untitled
Document placeholder, and now let's go take a
| | 02:29 | look at the PHP code.
| | 02:30 | We'll be dropping in this code block
right here, but before we do, I wanted to
| | 02:36 | step through it so you'd
understand what was going on.
| | 02:39 | In this first line, line 6, we set up
a couple of variables: page and paged.
| | 02:45 | Next, there is a wp_title function and
this sets up the separator to output--
| | 02:51 | in this case, we have a bar--and
where that separator is going to come,
| | 02:55 | whether it comes to the left or to the right.
| | 02:58 | That's the third argument that you see there.
| | 03:01 | The middle argument, true, is a Boolean, which
if not true, returns the value as a PHP string.
| | 03:08 | Otherwise, the value is just echoed.
| | 03:11 | Next, we'll get the actual name of
the site, using the function, bloginfo.
| | 03:16 | You'll see bloginfo and then its
parallel, get_bloginfo, which is on the next
| | 03:21 | code line, all throughout WordPress.
| | 03:24 | bloginfo automatically echoes the string.
| | 03:27 | get_bloginfo, on the other hand, gets the
string for evaluation and possible output.
| | 03:33 | And as you can see in the next series
of lines, line 9 through 13, we pull in
| | 03:39 | that information, the description, and
if we're on the home page and it's the
| | 03:44 | front_page, we'll output it using an
echo statement that's shown on Line 11.
| | 03:49 | If on the other hand, we're in a page
document and the page is greater or equal
| | 03:54 | to 2, we'll do something
different and put out the page number.
| | 03:58 | So let's copy that block and then
put it into the title. All right!
| | 04:04 | I'm going to go ahead and save my file now
since we've got a little bit of code on the page.
| | 04:10 | We're not quite done yet.
| | 04:12 | I'll choose File > Save.
| | 04:13 | Then I'm going to go into my site root,
into the wp-content folder, into the
| | 04:20 | themes folder, into our new
custom folder, which so far is empty.
| | 04:25 | We'll put in our first
file, and it is header.php.
| | 04:31 | Save that file, and now let's continue.
| | 04:34 | Next, after the title, I'll create a new line
so we can add in our style sheet information.
| | 04:39 | Let's flip over to header_code and
copy the line, bloginfo ('stylesheet_url'),
| | 04:46 | which is just the PHP that we'll need.
| | 04:48 | So I'm going to copy that, and let's
enter in our link tag, add in the relative
| | 04:55 | attribute, and we'll make that a
style sheet. And I'll use Dreamweaver's
| | 05:00 | code hinting here to speed this along.
| | 05:02 | Enter the type, which is text/css, and
then a media tag, and we want this for all
| | 05:10 | at this point. And finally, the href.
| | 05:15 | Now this is where we're going
to paste in our copied PHP code.
| | 05:19 | And here, again you see that
we're using the bloginfo, which you'll
| | 05:24 | remember just echoes the value that's
returned, and the argument this time
| | 05:28 | is the stylesheet_url.
| | 05:30 | My quote got pushed down to the
next line, so I'll press Backspace to
| | 05:33 | delete that line return, and then position my
cursor after the quote and close out the link tag.
| | 05:38 | All right! Now we're going to add in another link,
and this one will be for the pingbacks.
| | 05:45 | A pingback is in essence a verified
remote comment that allows users to easily
| | 05:50 | show links between blogs.
| | 05:52 | So the coding to this is
similar to the style sheet.
| | 05:56 | We do a link, relative, and this type is
pingback, and the only other argument is an href.
| | 06:05 | So I'll put in the href, and now let's
go back to our header_code and pick up
| | 06:11 | that value. And it's very similar
to what we had before for stylesheet,
| | 06:17 | again using bloginfo.
| | 06:19 | This time I'll try not to copy the line
return so we won't have that problem, and
| | 06:23 | you'll go in and paste it in. Looking good!
| | 06:26 | Now we can close out the link tag.
| | 06:28 | Now another element you'll
commonly see within the head are
| | 06:32 | conditional comments.
| | 06:33 | Conditional comments are targeted
towards versions of the Internet Explorer
| | 06:37 | browser, to give them more modern
functionality or to help them with specific CSS issues.
| | 06:43 | In this case, we're going to add in a
conditional comment that will make it
| | 06:46 | possible for versions of Internet
Explorer earlier than 9 to work with HTML5 tags.
| | 06:52 | Any other conditional comments you
need to add could also go in this area.
| | 06:56 | So I have that entire conditional
comment block written out in my header_code
| | 07:00 | file, and I'll copy that and bring
it into my header.php, right after the
| | 07:08 | pingback link, paste that in, and
here you can see that it opens with a
| | 07:13 | conditional comment directive:
| | 07:15 | if the version is less than IE9, put
in this script tag, and this script tag
| | 07:21 | will bring in the needed JavaScript file.
| | 07:23 | Now we're using a WordPress function
called get_template_directory_uri to return
| | 07:29 | the proper directory path.
| | 07:30 | Next, we're going to add in a little
more JavaScript, this time outside of the
| | 07:34 | conditional comment.
| | 07:35 | So I'll go past the endif and go get
my PHP code from the header_code page.
| | 07:42 | Copy line 24 and then go back and paste it in.
| | 07:49 | And what this PHP snippet does is it
checks to see if the WordPress page is a
| | 07:54 | single page using the
is_singular function and if the option
| | 07:59 | thread_comments is enabled.
| | 08:02 | And if so, then use another WordPress
function called wp_enqueue_script to bring
| | 08:08 | in the comment-reply JavaScript file.
| | 08:11 | The wp_enqueue_script function checks
to see if the named function has already
| | 08:16 | been loaded, and if not, loads it.
| | 08:19 | It's WordPress' way of
making it safe to add JavaScript.
| | 08:23 | The final bit of PHP to go into the
head area calls a WordPress function,
| | 08:27 | wp_head, which is used by many, many plug-ins.
| | 08:32 | If it's not there, the plug-ins won't work.
| | 08:34 | Here it is in my header_code.php file,
and I'll copy that and then paste it in,
| | 08:46 | right after our last PHP code block. All right!
| | 08:49 | The head section is complete,
but we're not quite done.
| | 08:52 | We still need to add the opening tags for
the body of the page and the header itself.
| | 08:57 | I'm going to scroll down a little bit.
| | 08:59 | So I'll place my cursor within the body tag,
make a space, and then bring in some PHP code.
| | 09:06 | Let me go get that snippet, which is
php body_class(). Copy that and insert the code.
| | 09:18 | This function inserts a class
attribute with a series of values that serve to
| | 09:23 | identify a page and to allow custom styling.
| | 09:27 | The classes that are inserted
depends on what kind of page it is.
| | 09:31 | WordPress will dynamically change the
classes accordingly, thus allowing you to
| | 09:35 | style different pages differently.
| | 09:38 | Next, we'll add an opening tag for a
div that will wrap the entire page, a
| | 09:42 | common strategy which is great for
applying a width and if necessary,
| | 09:47 | centering the page.
| | 09:49 | I'll just enter this one in by hand.
| | 09:52 | It's a div with an ID that I like
to use called outerWrapper. And we'll
| | 09:58 | close off that tag.
| | 10:00 | Now normally, if I were coding just a
straight HTML or PHP page, I would go
| | 10:06 | ahead, enter a couple of lines,
and then enter the closing div tag.
| | 10:10 | We don't want to do that here because,
as I've explained before, the header is
| | 10:15 | only going to have the top part of the page.
| | 10:18 | The closing div tag will
actually appear in the footer.php page.
| | 10:23 | So let me erase my little div there.
| | 10:26 | The final tag we'll put on this page is
sort of why we're here, the header tag.
| | 10:31 | Now you could just put in a div with
an id of header, but since we're using
| | 10:35 | HTML5, let's put in the header tag.
| | 10:40 | This one, because it's completely
contained within header.php, I will close out.
| | 10:45 | Let me go ahead and select that and
then tab it in so that it's within
| | 10:52 | my outerWrapper div.
| | 10:54 | Now, let's put a little bit of content
in here that will help identify the page
| | 10:58 | with the site name that
is linked to the home page.
| | 11:02 | This is easily replaceable with a
logo, should the design call for it.
| | 11:06 | But it's very common to see a basic
theme starting out this way. All right!
| | 11:11 | Let's go to my asset file and I'll
select the entire h1 tag, copy that, back to
| | 11:19 | header.php, tab in, and paste it in.
| | 11:24 | This is a standard h1 tag
and within that is an anchor tag.
| | 11:28 | Within the anchor tag is an href
attribute that uses the get_option function to
| | 11:34 | pull in the web address of the home page.
| | 11:37 | Note that there is a trailing slash mark
here that's added after the path to
| | 11:42 | the home page is given.
| | 11:43 | And within the anchor tag, we have the
site name itself, which is, again, pulled
| | 11:49 | in using the bloginfo function.
| | 11:52 | Now, let's add some basic functionality.
| | 11:55 | I'll put in a line return after the
h1 tag, and I'll insert a nav tag with a
| | 12:01 | class of mainMenu that I'll
be able to reference later.
| | 12:08 | And again, because this is all within
the header.php file, I'm going to close
| | 12:12 | out that nav tag. Now we'll put in a
WordPress function that will pick up any
| | 12:18 | custom pages you create and
display them as a linked ordered list.
| | 12:22 | With my cursor positioned between the
opening and closing nav tags, let's switch
| | 12:27 | over to header_code.php to get the
final snippet of code, and there you see the
| | 12:32 | function wp_nav_menu.
| | 12:36 | I'll copy that and then paste it in.
| | 12:40 | We'll add the necessary CSS styling for
our nav bar in the "Building up the CSS"
| | 12:45 | video found in the Presenting the Theme chapter.
| | 12:48 | Finally, it's important that you
remove the closing tags of the page, because
| | 12:53 | those will be added in another template file.
| | 12:56 | So I'll scroll down, select the closing
body and HTML tags, delete them, and now
| | 13:02 | we're ready to save our page again.
| | 13:04 | So I'll just press Ctrl+S
or Command+S on the Mac.
| | 13:08 | And now the first part of our custom
theme is complete, and you're ready to
| | 13:12 | move on to the next part, where we'll
close out the tags opened in this, the
| | 13:16 | header.php file.
| | Collapse this transcript |
| Crafting a footer| 00:00 | The footer template file, which will be
saved as a footer.php, has two main functions.
| | 00:06 | First, and pretty obviously, it contains the
footer area, which is common across the site.
| | 00:11 | Second, the file contains closing
tags for elements initialized in
| | 00:16 | the header.php file.
| | 00:18 | All in all, it's a very simple
page but critical to any theme.
| | 00:22 | So I'll start by going over to my Files
panel and right-clicking on the custom
| | 00:27 | folder, creating a new file, naming
it footer.php, then opening it up.
| | 00:34 | The first step is to remove all the
code except for the closing two tags.
| | 00:39 | So I'll select everything from DOCTYPE
all the way down to the opening body tag,
| | 00:44 | press Delete to remove them, and then
hit a line Return, just open up a little
| | 00:48 | space so we can start to add in our code.
| | 00:52 | Let's start here on line one by
adding in the HTML5 footer tag, and then I'm
| | 00:59 | going to add a couple of lines and
close out that tag, and I'll place my cursor
| | 01:04 | in between the opening
and closing and press Tab.
| | 01:07 | Now I'm going to open up a file
called footer_code.php that's found in the
| | 01:13 | Exercise files/Chapter 2/subchapter 02_03
folder. And this has all the code for the footer,
| | 01:23 | but all I need now is my paragraph
tag that has the PHP and WordPress
| | 01:30 | functionality written
into it, so I'll copy that.
| | 01:34 | Move back to my footer.php page,
paste it in, and let me walk you through
| | 01:38 | this really quickly.
| | 01:40 | It starts with just some plain
text, Copyright. There is the ©
| | 01:45 | which is the character entity for the
Copyright symbol, followed by a little
| | 01:49 | mixture of PHP and WordPress functionality.
| | 01:52 | Of course, you could add any sort
of placeholder content, but since we
| | 01:56 | are working in a PHP page, we'll add
in some code that will generate the
| | 02:01 | year programmatically.
| | 02:02 | First we see the date functionality,
which is set to return just the year,
| | 02:08 | followed by a space, followed by a WordPress
function, bloginfo, to get the name of the site.
| | 02:14 | Now we're ready to finish off the
tag that we began in header.php.
| | 02:19 | So I'll make a line return after the closing
of the footer, and we'll close out the div tag.
| | 02:27 | And one thing that I found helpful when
you're working with WordPress template
| | 02:30 | files is to always include a comment
that notes the end of any div, so you could
| | 02:36 | follow the structure of it in your code.
| | 02:38 | So because we're closing out the
outerWrapper tag here, I'm going to enter in an
| | 02:42 | HTML comment that will say end OuterWrapper.
| | 02:49 | Let's save our page and now with the
header and footer pages complete, we are
| | 02:54 | ready to move on to the meat of
the web page sandwich, the content.
| | Collapse this transcript |
| Completing the sidebar| 00:00 | The sidebar is a common feature in
blogs and is typically used to display blog-
| | 00:04 | related navigation, such as links
to recent posts, categories, and tags.
| | 00:10 | The entities displaying these
links are referred to as widgets.
| | 00:14 | In this video, I'll show you how to
set up a default set of widgets for your
| | 00:17 | custom theme that can be easily
replaced in the WordPress Dashboard once
| | 00:22 | the theme is activated.
| | 00:24 | So let's create a new page called
sidebar.php in our custom theme folder.
| | 00:29 | I'll right-click on custom, choose
New File, and then name it sidebar.
| | 00:35 | Now let's open up that file, and the first
thing we'll do is delete all the code that's there.
| | 00:41 | I am going to start by putting in a
div with a specific class of widget-area.
| | 00:47 | This class is one that is
commonly used in WordPress themes.
| | 00:50 | We'll close the div, press Return a couple
times, and then close out the div entirely.
| | 00:56 | Next we want to add some PHP code that
will display the default widgets only if
| | 01:02 | none are defined in the Dashboard.
| | 01:04 | To do this, we'll draw on WordPress'
dynamic sidebar function. And to help me I'm
| | 01:10 | going to open up my sidebar_code.php
file, found in the 02_04 folder, which is of
| | 01:17 | course within the Chapter 2
folder of the Exercise Files.
| | 01:20 | So now I'm going to grab this first php
code block, copy it, and let's put it in
| | 01:28 | indented within the div.
| | 01:31 | Let me open that up a little bit
and indent the final line as well.
| | 01:35 | Now this is a standard php if statement.
And the condition that is being checked
| | 01:40 | reads if the dynamic_sidebar, sidebar
-1 is not found, then do whatever is
| | 01:46 | contained within the if statement.
| | 01:48 | Now you don't have to go with sidebar-1.
I'm going to go ahead and change that
| | 01:53 | to a custom name, call it Sidebar Widgets.
| | 01:57 | The name Sidebar Widgets now reflects
the name of the sidebar we'll register in
| | 02:01 | the functions.php file a little later.
| | 02:05 | Now let's go ahead and add some basic
widgets that will be on the page until
| | 02:09 | someone decides to add some new
widgets through the WordPress Dashboard.
| | 02:14 | I'm going to wrap each of my widgets
within an HTML5 tag called an aside.
| | 02:18 | I will place my cursor at the end of
the PHP if statement, hit Return and then
| | 02:23 | Tab, and enter in the code for an aside tag,
give it an id of search and a class of widget.
| | 02:37 | Close that opening tag and hit Return
and close out the aside tag entirely.
| | 02:44 | Now WordPress has a specific function
that will return an entire search form.
| | 02:49 | Let's pull in that code
from our sidebar_code.php file.
| | 02:55 | I'll copy and then within
the aside tag, paste it in.
| | 03:02 | This function displays the search field
End button, so we can take advantage of
| | 03:06 | WordPress' built-in search functionality.
| | 03:09 | Next, let's put up a series of links for
any posts written in the previous month.
| | 03:14 | I'm going to create another aside container
now and we'll put that after the first one.
| | 03:21 | This one will have an id of archives,
but the same class as above, widgets.
| | 03:30 | Close that opening tag.
| | 03:33 | Enter a few lines and close off the aside.
| | 03:36 | Now the search function
actually has a built-in title.
| | 03:39 | For this widget we'll need to add
in our own title, and I'm going to put
| | 03:43 | that within an h3 tag.
| | 03:45 | We will give this a specific class of
widget-title, and I'm going to hard-code in
| | 03:56 | the title name here, call it Archives.
| | 03:59 | Most of the widgets that you will add in
through the Dashboard will allow you to
| | 04:03 | put in your own custom title.
| | 04:06 | So let's close off the h3 tag.
| | 04:08 | The WordPress function that we will
use to return all of our archive links
| | 04:13 | returns them in the form of a li tag.
| | 04:17 | For that to work properly, we'll
need to add a little bit more structure
| | 04:21 | around it, the ul tags.
| | 04:23 | So I'll hit Return and then just
put in my opening and closing ul tags.
| | 04:30 | You could give this a class name if
you wanted to, but because it's within an
| | 04:34 | aside with a specific id,
you really don't need to.
| | 04:36 | Now we're ready to drop in our php code,
which I'll get from sidebar_code.php.
| | 04:46 | Once copied, I'll move back and paste
it in, and here we see another WordPress
| | 04:51 | function, wp_ get_archives,
which has a whole range of options.
| | 04:56 | In this circumstance, we've set it to
return a monthly archive, limited to 12 items.
| | 05:01 | Let me just clean up this one little
space here by removing that, and now our
| | 05:06 | sidebar page is done.
| | 05:08 | So I'm going to ahead and save it.
| | 05:10 | I mentioned earlier that we need
to create a support file so that the
| | 05:14 | sidebar will work properly, and
that's called the function.php file.
| | 05:19 | Again, this goes within our custom theme.
| | 05:21 | Right-click on custom, choose
New File, and name that functions.
| | 05:29 | Open it and remove all the HTML code.
| | 05:33 | So now I'll open up my helper file
functions_code.php, found in the same folder
| | 05:40 | of the Exercise Files, and here we see a
function for registering a new sidebar.
| | 05:46 | The first thing that it does in
line 2 is check to see if the WordPress
| | 05:50 | function register_sidebar is
available to us, and if it is, it sets up the
| | 05:55 | sidebar using an array.
| | 05:57 | The name of the sidebar is Sidebar
Widgets, which we saw earlier in the
| | 06:02 | dynamic_sidebar function.
| | 06:04 | Its id will be sidebar-widgets.
| | 06:07 | There is a description and other array
values which set up what code should go
| | 06:12 | before the widget and after it.
| | 06:14 | You can see it is an aside tag with
a very specific id, the one that we have
| | 06:19 | specified here and a specific class, and
also array values before and after the
| | 06:24 | title, the h3 tag that we have used
in our hard-coded widgets. All right!
| | 06:29 | Let's copy this code block, move
over to functions.php, and paste it in.
| | 06:37 | I'll save that file, and our first function
in our functions.php file is ready to go.
| | 06:44 | Although we have worked with a fair
amount of code, this is among the most
| | 06:47 | basic of sidebar implementations.
| | 06:49 | You can easily add multiple
widget areas as well as static content,
| | 06:52 | but it is a good starting point for
the widget-based content that goes into
| | 06:57 | our custom theme.
| | Collapse this transcript |
| Creating the main content area| 00:00 | Now we are ready for the main act in
the template file presentation, the
| | 00:04 | content. And with a blog-based
program like WordPress, content means posts.
| | 00:09 | To present the most recent posts,
WordPress relies on code known as the loop.
| | 00:14 | In this video, we will step through the
loop one line at a time, so you can see
| | 00:19 | how the typical content section is
constructed and how all the other pieces of
| | 00:24 | the template file puzzle that we've
built in the earlier videos of this chapter
| | 00:29 | are brought into play.
| | 00:30 | Let's create a new file in the custom
folder. Again right-clicking on custom,
| | 00:36 | choosing New File, and this
time we will name that index.php.
| | 00:41 | We will open it and remove
all the existing HTML code.
| | 00:49 | Let's start out the index.php page by
displaying the opening section found in
| | 00:55 | header.php, and to do that, we will use
a WordPress function called get_header.
| | 01:00 | So I will enter in my opening PHP tag,
type in get_header, followe it with an open
| | 01:09 | and closed parenthesis and then a semicolon,
| | 01:10 | and then close out the PHP code block.
| | 01:12 | Next, we will add an HTML wrapper to
hold both the main content and the sidebar.
| | 01:19 | We will do this in a div
tag with an ID of contentWrap.
| | 01:29 | Now I am going to put in an HTML
comment here so that I will know that this is
| | 01:34 | the end of contentWrap.
| | 01:39 | Now within the contentWrap div, we are
going to put in another div that will
| | 01:44 | hold just the main content, and this would be
another div, this time with an ID of content.
| | 01:56 | Let's add in our HTML
comment here and the content.
| | 02:03 | Now using PHP code, let's add the basic
structure that will display something if
| | 02:09 | there are any existing posts and
something else if there are not.
| | 02:14 | With this PHP code, I am going to go
to my helper file found in the Exercise
| | 02:18 | Files called index_code, and that's
found in the Chapter 2/02_05 folder.
| | 02:25 | I have included all the PHP code that
you will need in this exercise file asset,
| | 02:31 | and I have already entered in the get_
header function, so now I am going to just
| | 02:34 | copy this if-endif statement and bring
that into my index.php file and place it
| | 02:42 | within the content div.
| | 02:44 | Let's clean that up a little bit,
| | 02:47 | inserting it so that it's a code block.
And I will add a couple of lines on
| | 02:53 | either side of the if
statement and the else statement.
| | 02:58 | If this condition is met, have_
posts, we want to cycle through them.
| | 03:02 | This is done with a PHP while loop.
| | 03:06 | A WordPress function called the post is
used to iterate over any existing posts
| | 03:11 | that are found and retrieve
their information from the database.
| | 03:15 | Let's go get that code block
from the index_code.php file.
| | 03:20 | Here is my while loop. I will copy and
then paste it in the appropriate place here.
| | 03:30 | Let's move that endwhile statement
over a little bit and open it up.
| | 03:35 | Now let's start to apply some of the
information found in each post by creating
| | 03:40 | an article container that has
the classes and ID for each posts.
| | 03:44 | So I will position my cursor within the
while loop, and let me get the relevant
| | 03:49 | code from index_code.php.
| | 03:52 | Here is my HTML5 article tag with a
post_class function inside of it. And we
| | 03:59 | will paste that in, and again,
do a little clean up here.
| | 04:04 | This first PHP function, post_class
here, as you might expect, puts in the
| | 04:09 | class attribute as well as any classes that
have been assigned to this particular post.
| | 04:14 | The ID that's provided here
combines a static value, post with a hyphen
| | 04:20 | following it, and the ID of the actual post.
| | 04:24 | The first element within this article
is going to be the title, which will be
| | 04:28 | linked with what is called a
permalink or a permanent link.
| | 04:32 | This will allow the user to click the
title to go directly to a single-page
| | 04:36 | version of the post.
| | 04:38 | So with my cursor in the article
section, let's go to index_code.php, and I'll
| | 04:45 | grab my h2 tag with the PHP code inside.
| | 04:49 | Copy that, paste that in, and here
you see within the anchor tag, the href
| | 04:55 | attribute that is pointing to the
WordPress function, the permalink, followed by
| | 05:01 | the_title, and this of
course puts in the title.
| | 05:04 | Now let's add some meta information
about the post, including the date it was
| | 05:08 | posted on and the author.
| | 05:10 | We will hit Return here, go to
index_code.php and pick up the div tag that you
| | 05:17 | see here with a class of meta, copy
that, paste it in right after the title.
| | 05:24 | I will select it and then clean this
up a little bit so you can see it more
| | 05:29 | easily. And here you see a
combination of static HTML and PHP.
| | 05:34 | The first line outputs the
day that it was posted on.
| | 05:37 | This WordPress function that you see
here, the_time, uses standard PHP date
| | 05:42 | formatting and would display the date
with the full month name, the day with an
| | 05:47 | ordinal suffix--that's a th in 7th
or st in 1st--as well as the full year.
| | 05:54 | An example date would be March 31st, 2012.
| | 05:58 | So now it's time to add the actual post content.
| | 06:01 | We will put it in its own div for
finer CSS control, and I will put that
| | 06:06 | after the meta tag.
| | 06:07 | We will create a div with a class of
entry. That's pretty much the standard
| | 06:15 | WordPress class that's used for each post.
| | 06:17 | We will close up the div, and then
within it, we will use a PHP function to
| | 06:25 | pull in the content. And because
WordPress likes to keep things simple, this
| | 06:32 | function is called the_content();.
| | 06:40 | The final part of our post will
contain a bit more meta data, specifically any
| | 06:45 | tags or categories that have been assigned
to the post, as well as links to any comments.
| | 06:51 | Let's grab that from the index_code.php
file, and here you find it as a div with
| | 06:57 | a class of postmetadata. Copy that,
bring it in right after entry div, paste
| | 07:05 | that in, and then select the bottom part
and tab it over so that everything is in
| | 07:10 | line. And now let me break down what's
happening within the postmetadata div.
| | 07:15 | The first PHP code block returns the
tags and the arguments set up the initial
| | 07:20 | string that you will see, the
word, tags followed by a colon
| | 07:24 | and a space, and the separator
between each tag and that is in this second
| | 07:30 | argument, a comma and a space, and then
at the end of all the tags, a line break.
| | 07:36 | Next, we see a bit of code that
outputs what categories it might belong to.
| | 07:41 | And again, the separator is given as an
argument. Here it's the comma, followed by a space.
| | 07:46 | The final bit of PHP here uses
the function comments_popup link.
| | 07:51 | Its arguments will detail what to output
if there are no comments, if there is a
| | 07:57 | single comment, and if there
are more than one comment.
| | 08:00 | The character entity that you see here, »,
| | 08:06 | is the right angle quote or the
right-pointing double angle braces.
| | 08:10 | Now we have completed all of our code
within the while loop, and I will just
| | 08:14 | clean up some extra spaces here.
| | 08:18 | And now we come to the else condition.
| | 08:20 | We have satisfied what happens if we
do have posts, but we want to let people
| | 08:25 | know if there are no posts.
| | 08:27 | So I am going to add in an h2 tag
right after the php else clause and
| | 08:34 | simply say Not found.
| | 08:39 | Finally, let's bring in the two other
page elements we set up template
| | 08:43 | files for earlier in the
chapter: the sidebar and the footer.
| | 08:48 | So I will scroll down, and we want the
sidebar to appear outside of the content
| | 08:53 | but within the contentWrap div.
| | 08:56 | So I am going to place my cursor in
between those two closing div tags and
| | 09:01 | enter in a PHP code block,
with a function get_sidebar.
| | 09:10 | This parallels, of course, the get_header
that we entered in at the top of the file.
| | 09:15 | Now after the contentWrap div, we
will add in the get_footer functionality.
| | 09:21 | Again, php code block,
the function get_footer();,
| | 09:28 | and then close out the code block.
| | 09:32 | Let's save the page and now the basic
coding for your custom theme is complete,
| | 09:38 | and you're ready to take the next steps
towards integrating it into WordPress.
| | Collapse this transcript |
|
|
3. Presenting the ThemeActivating the theme| 00:00 | In the previous chapter, we
built an entire theme from scratch.
| | 00:03 | However, at the moment, there is
no way to see what it looks like.
| | 00:08 | If you try to view index.php from the
theme folder in either Dreamweaver's
| | 00:13 | Live view or a browser, you won't see
anything, because WordPress doesn't work that way.
| | 00:18 | And if you view index.php from the
WordPress site root, you'll see what ever
| | 00:24 | theme is currently active. That's the key.
| | 00:27 | We now have to activate our theme and
to do that, we need to create one file: a
| | 00:33 | CSS style sheet believe it or not,
with a special comment that will enable
| | 00:38 | WordPress to recognize the theme
and make it possible to activate.
| | 00:43 | So let's create that file by going to
File > New, choosing a Blank Page with a
| | 00:49 | Page Type of CSS, and click Create.
| | 00:54 | When that opens, I'll delete the
existing code and let's save the file, and I
| | 01:03 | want to put it in my wp-content folder,
in the themes folder, in my custom theme
| | 01:10 | folder, where the five other
files that I created already exist.
| | 01:15 | And I'm going to name it style.css.
| | 01:21 | That special comment I mentioned needs
to be at the very top of the style.css
| | 01:26 | file, and that's why I removed the existing code.
| | 01:29 | Now let's add in a CSS comment with
/* and then I'll create a couple of lines
| | 01:38 | and close that off with */.
| | 01:42 | Okay, so now we can put our
special comment within that.
| | 01:45 | We will start off with the theme name.
And the syntax here is very critical.
| | 01:50 | We want to enter it exactly like this,
with uppercase letters, Theme Name
| | 01:55 | followed by a colon,
| | 01:56 | and a space, and I'm going
to call this Custom Theme.
| | 02:00 | You can use spaces in the
theme name without a problem.
| | 02:03 | In the next line we'll put on the web
address for the theme, and this time I'm
| | 02:07 | going to put in lynda.com as the URI.
Typically this would be the web address of
| | 02:13 | the author. So Theme URI:
| | 02:16 | and you put in the full web address.
This makes it linkable. A brief
| | 02:24 | description with the keyword
Description, and I'll put in a custom WordPress
| | 02:32 | theme, comma, built from the ground up.
| | 02:42 | Next is the author line with the
keyword Author. I will enter my name. And
| | 02:50 | finally, we put in the
Version, and we will call this 1.0.
| | 02:54 | All right, we save our file,
press Ctrl+S or Command+S on the Mac.
| | 03:01 | There are other attributes you can
add, but this is good enough for now.
| | 03:04 | Now, let's head over to the WordPress
Dashboard and take a look at our Themes panel.
| | 03:10 | In this latest version of WordPress,
they have reorganized the Dashboard UI
| | 03:14 | so no longer do you have the
expanding administrative menus on the left;
| | 03:19 | instead, they pop out.
| | 03:21 | So I will go to Appearance and there
you say Themes. It makes for a much quicker
| | 03:26 | use of their administrative interface.
And now at the top of the page you see
| | 03:30 | the current theme that's been
activated and that's Twenty Eleven and if we
| | 03:35 | scroll down a little bit, you will see
other themes that are available, including
| | 03:39 | Twenty Ten over here on the
right and our custom theme.
| | 03:43 | Now the first thing you'll probably
notice is that there's no screenshot there.
| | 03:46 | Not to worry. We'll take care of
that in a later video in this chapter,
| | 03:50 | "Establishing a theme screenshot."
| | 03:52 | For now, let's go ahead and activate
it and you will get a message indicating
| | 03:58 | that the new theme has been activated.
| | 03:59 | Let's head back to Dreamweaver
to check it out in Live view.
| | 04:03 | To see it in Live view, we need to go
to the site root and open up index.php.
| | 04:11 | I'll switch over to Design view and
then enter into Live view. And there is our
| | 04:16 | theme, completely unstyled at
the moment, but there it is.
| | 04:20 | Let's make sure that all
of the sections are there.
| | 04:23 | Here we have the header, the first bit of
navigation where we see Sample Page. Hello World!
| | 04:28 | is the first post.
| | 04:30 | You can see that it has the date of
the post, as well as who posted it, the
| | 04:35 | content and our meta-information, the
Uncategorized category that is now we are in.
| | 04:41 | There is 1 comment and that's added by
WordPress for testing purposes. And then
| | 04:46 | we move on past the post because there
is only that one, to our sidebar, which is
| | 04:51 | not on the site at the moment because
it's still unstyled. But here we see our
| | 04:55 | Search widget, our archives which is
just a single one, our comment archives,
| | 05:00 | the monthly archives, and so forth.
| | 05:03 | And then at the very bottom is the footer.
| | 05:06 | It looks like all of the different
sections are there, although I admit, it's kind
| | 05:09 | of hard to tell without any CSS styling.
| | 05:12 | And now that you've activated the theme,
you are ready to continue work on the
| | 05:15 | much-needed CSS to get that
basic presentation in shape.
| | Collapse this transcript |
| Building up the CSS| 00:00 | Time to whip our custom theme into shape
with a few judiciously crafted CSS rules.
| | 00:05 | The goal here is to apply just enough
style to make the various page areas and
| | 00:10 | elements identifiable, while at the same
time, laying the groundwork for further
| | 00:15 | customization ahead.
| | 00:17 | We can use Dreamweaver to
accomplish both of these objectives.
| | 00:20 | Now, in all, there are seventeen CSS rules
to code, so we better get started.
| | 00:26 | I have opened here the index.php from
the site root, and we're in Live view.
| | 00:32 | Now, we want to go to our style.css
page and first, we want to make sure that
| | 00:37 | Dreamweaver is discovering all
of the dynamically related files.
| | 00:41 | So I'm going to click on
Discover here in the Info bar.
| | 00:45 | You'll get a Script warning
from Dreamweaver. Click Yes.
| | 00:49 | If you've set your testing server up
properly, you'll see all the files appear
| | 00:53 | in the Related Files
toolbar up at the top of the page.
| | 00:57 | If I click on the Show More button,
you'll see the full list of them.
| | 01:02 | I believe there's something like
60 odd files that are included.
| | 01:05 | However, the only one we're
interested in at the moment is style.css.
| | 01:09 | So I'm going to go ahead and choose that
and Dreamweaver will switch to Split view.
| | 01:13 | The first bit of CSS code I'm going to
add is a simple Reset statement used to
| | 01:18 | level the playing field across browsers.
| | 01:21 | Reset statements can get quite lengthy,
so I have one set up as a snippet that I
| | 01:25 | can quickly drop in.
| | 01:27 | The technique for creating the snippet
is covered in my course Layouts with CSS
| | 01:32 | in Dreamweaver, here in the
lynda.com Online Training Library.
| | 01:36 | To access it, I'll go to Window >
Snippets to open up the Snippets panel.
| | 01:41 | Well, I have a custom folder here
called CSS that I'll expand, and there's my
| | 01:47 | Simple Reset, which I'll double-click to insert.
| | 01:50 | Next, let's add a rule for the body
tag with a basic background color to help
| | 01:55 | differentiate our layout from the background.
| | 01:57 | So I'll enter a body, open my curly
brace, put in a background property, use
| | 02:06 | the code hints to speed it along, and
then just enter in a simple gray color,
| | 02:12 | CCC, close it out with a semicolon,
and then close the body rule.
| | 02:17 | We'll follow up our body tag rule
with a few basic tag rules for the
| | 02:21 | heading elements, making our h1
through h3 tags bold and setting some
| | 02:26 | specific font sizes.
| | 02:29 | First, let's make them all bold, and
now let's give the h1 and h2 tags some
| | 02:44 | specific font sizing.
| | 02:52 | I'll make the h1 tag 2em and the h2 tag 1.5em.
| | 03:05 | Now, let's move on to the layout itself,
starting with the div surrounding the
| | 03:09 | layout, which you'll recall
has an ID of outerWrapper.
| | 03:15 | First, let's set the margin to 0 on the top
and bottom, and auto for left and right.
| | 03:21 | This will center the page.
| | 03:26 | Next, let's add a width.
| | 03:28 | I'm going to make my width 940 pixels, and
now I'm going to add a padding of 10 all around.
| | 03:41 | Now, let's specify that the
background color is pure white, so that it will
| | 03:45 | be differentiated from the body background.
And we'll close off the outerWrapper rule.
| | 03:52 | Now, if I click into Live view, you can
start to see some of these changes being applied.
| | 03:56 | Let's head back over to the CSS style sheet.
| | 03:59 | I like to organize my style
sheets from the top of the page down,
| | 04:04 | so let's put in a couple
of rules for the header.
| | 04:06 | You'll recall that we're using HTML5 code,
so I don't put in a div with an ID of header;
| | 04:12 | I just enter header. And I'm going to
give it a border-bottom and also a bit of
| | 04:19 | margin on the bottom, to isolate it just a touch.
| | 04:22 | So border-bottom first, and let's make
this border-bottom a bit wider than normal.
| | 04:29 | We'll make it 2 pixels.
| | 04:31 | We'll give it a dark-gray
color, and make it solid.
| | 04:36 | Now, let's add in the margin-bottom,
and this we'll make 20 pixels.
| | 04:43 | Let's close off that header.
| | 04:45 | Now, let's go ahead and give a special
size for the h1 tag that's within the
| | 04:50 | header. And we'll make this a
little bit larger than normal, 2.5em.
| | 05:00 | Let's tackle the navigation
next since it's in the header.
| | 05:04 | For that, we'll need just two rules:
| | 05:07 | one to offset the menu a bit, and
another to turn the unordered list into a
| | 05:12 | series of horizontal links.
| | 05:13 | So we'll enter in the nav tag, followed
by its class, mainMenu. And we'll give that
| | 05:23 | a padding of 5 pixels all around.
| | 05:28 | Close this rule. And next we'll target
any list item that is within the mainMenu.
| | 05:34 | So again, nav.mainMenu to pull up its
class and then enter ul for unordered
| | 05:41 | list, and li for list item, enter the
opening brace. And we want to make sure
| | 05:47 | that these are shown one after
another, so we enter display inline.
| | 05:55 | There's no need to have
any of the bullets appear,
| | 05:58 | so let's get rid of the list-style by
setting that to none, and next we'll set a
| | 06:06 | margin-right for each list item of 20 pixels.
| | 06:12 | Let's close out that rule. Okay.
| | 06:14 | Our header is complete and after
the header comes the content section.
| | 06:19 | If you recall, we have the content
wrapper with an ID of contentWrap in place,
| | 06:24 | so let's style that one first.
| | 06:30 | We'll give it a width of 100% and
an overflow of auto. The overflow
| | 06:44 | auto declaration is to handle the floating
elements I know are within the content area.
| | 06:49 | Let's set up the first of those, content.
| | 06:54 | We'll give it a width of 700 pixels, because I
want that to take up most of the page space.
| | 07:04 | Now, because I want my sidebar on the
left and because the current code order
| | 07:09 | has the main content coming before the
sidebar, I need to float the content area
| | 07:14 | to the right, rather than
floating the sidebar to the left.
| | 07:18 | So we'll enter in a float
property, followed by right.
| | 07:23 | Now, if I click over into the document
area, you can see that the page is really
| | 07:27 | beginning to take shape.
| | 07:28 | I'm going to go ahead and close down my
panels a little bit and collapse them
| | 07:32 | so you can really see
how the page is shaping up.
| | 07:38 | Okay, back to the CSS.
| | 07:41 | Now, within the content area, each
post is contained within an article tag.
| | 07:45 | Similarly, each widget in the
sidebar is within an aside tag.
| | 07:50 | To keep the spacing consistent, I'm
going to add a little bit of whitespace to
| | 07:55 | the bottom of each of these elements.
| | 07:58 | So our rule will reference
both of those as the selectors.
| | 08:02 | First, let's address the article tags
that are within the content div and then
| | 08:10 | add a comma. And now let's write
out the selector for the aside that's
| | 08:15 | within the widget-area class. And I'm
going to give that a little margin at the
| | 08:25 | bottom of 20 pixels. Let me close the rule.
| | 08:32 | Next, I want to isolate the actual
content of my posts a bit and at the same
| | 08:37 | time open up the paragraphs.
| | 08:40 | Posts, you may recall, are in
a div with a class of entry.
| | 08:43 | So I'll enter in div.entry and then
div.entry again, followed by p for paragraph
| | 08:53 | tag, open our brace, and set the margin.
| | 08:58 | We'll make it 10 pixels on the top
and bottom and 0 on left and right.
| | 09:05 | Let's close out that rule.
| | 09:06 | Now, let's turn to the sidebar and give it
a width to separate the two content areas.
| | 09:22 | The 220 pixels width
should work out pretty well.
| | 09:25 | Let's click into the document
window and see how we're doing.
| | 09:27 | Well, I think it looks pretty good,
although the search input box needs a little love.
| | 09:32 | But, how do I target it?
| | 09:33 | Let's try looking at the WordPress code first.
| | 09:36 | You'll recall that that is within sidebar.php.
| | 09:39 | Now, I want to use Dreamweaver's
custom filter, found on the Related Files
| | 09:45 | toolbar, to pull in my sidebar.php file.
And I also want to keep style.css here,
| | 09:55 | so I'll enter in a semicolon
| | 09:57 | after sidebar.php and then type
in style.css. When I click OK
| | 10:04 | I'll have just those two files up top there.
| | 10:07 | So now I click on sidebar.php,
and you can see the problem here:
| | 10:11 | if I want to target just this particular
input box, there's no way to get to it,
| | 10:17 | because all I have in WordPress
is a PHP function, get_search_form.
| | 10:23 | So another technique that
you can use is Live Code.
| | 10:26 | First, I am going to go over and save my
style.css file, and now I'll switch over
| | 10:31 | to Source Code and then click on Live Code.
| | 10:35 | So now, we see the code that's
generated and sent to the browser in the
| | 10:40 | left-hand side of the window.
| | 10:41 | If I double-click the search text, it
will go down to where the input tag is, and
| | 10:47 | now you can see that I actually
have an ID of S that's applied for this
| | 10:52 | particular search form.
| | 10:53 | So I can use that as my target.
| | 10:56 | Let's switch back to style.css.
And we're targeting an input tag with an ID of
| | 11:04 | S. And I want that to be a little bit smaller,
so I'm going to make a width of 150 pixels.
| | 11:11 | Let's click over into the
document window and see how that looks.
| | 11:16 | It does tighten it up some. It looks pretty good.
| | 11:19 | Last but not least is the footer.
| | 11:21 | Let's scroll down. And here you can
see the footer text is being displayed
| | 11:25 | left aligned and at the
full inherited font size.
| | 11:28 | I'm going to style this a bit to give
it a more footer-like appearance, as well
| | 11:33 | as keeping it consistent with
the rest of my simple design.
| | 11:36 | So back in style.css, we enter in a
footer selector. And let's give it a
| | 11:44 | border on the top that is 2 pixels
wide with a darker gray color, of 666,
| | 11:51 | and make it solid.
| | 11:57 | Now, let's give the text
within it a smaller size, of 0.8ems.
| | 12:06 | We'll align it to the center and set some
padding around the entire footer. All done!
| | 12:18 | Let's save the file and then double-check it.
| | 12:21 | I'm going into Design view and
let's just go ahead and scroll up.
| | 12:26 | Everything is looking pretty basic.
| | 12:27 | I have my header here, my sample page.
Sidebar is looking good with all the
| | 12:33 | entries well separated and my main
post is over on the right. And the footer
| | 12:39 | looks very much like a footer.
| | 12:41 | Obviously, there's a lot more you can
do with the style sheet, and you should,
| | 12:45 | for any finished design.
| | 12:47 | But, the idea here is to create a basic
core theme that you can quickly adapt to
| | 12:52 | meet the design goals of most
any of your future projects.
| | Collapse this transcript |
| Establishing a theme screen shot| 00:00 | Time to add the cherry on top of our theme: a
screenshot to help identify it in WordPress.
| | 00:05 | If we go into the Theme section of the
Dashboard now, you can easily add that to
| | 00:10 | make your theme more
complete and easier to activate.
| | 00:13 | WordPress needs a graphic in web-ready format--
| | 00:17 | PNG, GIF, or JPEG that is--ideally,
300 pixels wide by 225 pixels tall.
| | 00:24 | If you don't have a comp available, I'll
show you how you can quickly create one
| | 00:28 | using Dreamweaver's Live view and a
graphics editor, such as Adobe Fireworks.
| | 00:33 | Let's switch back to Dreamweaver where I
have opened my index.php set into Live view.
| | 00:40 | Now, this design is 960 pixels wide.
| | 00:43 | To match the proportions of a 300 x 225
screenshot, it would need to be 720 pixels tall.
| | 00:51 | In this situation, my screen is only
540 pixels tall, for recording purposes, as
| | 00:58 | you can see by looking at the
window size indicator on the status bar.
| | 01:02 | So what I'm going to do is to grab
this screen and then adjust the image in
| | 01:06 | Fireworks to the proper height before
I reduce it to the correct dimensions.
| | 01:10 | Now it's time to fire up your screen grabber.
| | 01:13 | On the Mac, you can just press Command+Shift+4;
| | 01:16 | on Windows, the built-in screen
grabber is called the Snipping Tool.
| | 01:20 | So I'm going to go over to the Start
Menu and start to type in snip. There is my
| | 01:26 | Snipping tool I can click on.
| | 01:29 | And I want to choose a
new rectangular snip here.
| | 01:34 | And there you see my crosshairs, so
I'm going to grab just the top-left here,
| | 01:39 | and then go down as far as I can right
below the border, above the footer, and
| | 01:44 | then release, and there is my screen grab.
| | 01:47 | And now I will go to Edit > Copy.
| | 01:49 | Now, let's head over to Fireworks so
we can manipulate our screen capture.
| | 01:53 | So I'm going to create a new Fireworks
document and that will automatically pick
| | 01:57 | up the dimensions of the image on my
clipboard, which you can see is a little
| | 02:01 | bit more than 960 pixels, but that's fine.
| | 02:05 | So we will click on OK.
| | 02:06 | And now I am going to paste that in, Ctrl+V.
Let me reduce this so you can see everything.
| | 02:13 | I will choose View > Fit All. And here
you can see that it's off a little bit to
| | 02:18 | the side, so I will bring it into the
center, and let's actually move it all the
| | 02:23 | way over to the left.
| | 02:24 | If you look down at your Property
Inspector, your X and Y should both be at 0.
| | 02:30 | Now, let's go ahead and adjust the canvas size.
| | 02:32 | I will click outside of my selection,
make sure that the Canvas Color is set to
| | 02:37 | White, and then click on Canvas Size.
| | 02:41 | I'm going to set the eidth to
960 pixels and the height to 720.
| | 02:48 | The next critical thing you want to
do is change the Anchor. Rather than
| | 02:52 | anchoring it from the center, which is the
default, anchor from the top-left corner.
| | 02:57 | This will make sure that the 960
pixels start all the way on the left and
| | 03:02 | all the way on the top. Click OK.
| | 03:04 | Now, my canvas is the right size, but it
needs a little cleanup, so I'm going to
| | 03:08 | go ahead and first select the image,
and then I'm going to choose Edit > Crop
| | 03:13 | Selected Bitmap, and I'm going to
move it up a little bit, right under the
| | 03:18 | borderline. That will get rid of
that gray area down at the bottom.
| | 03:22 | So then the next section to fit is the
left-hand side, where I have a little
| | 03:26 | bit of gray added here.
| | 03:27 | So I'm going to go ahead and select
the Marquee tool and then drag out a
| | 03:31 | rectangle, and release it while I am
overlapping the bottom of the image.
| | 03:38 | I'll switch to my Paint Bucket tool,
click Fill selection, and change the
| | 03:44 | fill color to white.
| | 03:46 | Place my cursor over the marqueed
element, click, and now if we go up to
| | 03:51 | Select > Deselect, my image is complete.
| | 03:55 | There is further cleanup that you can
do, and you can add in other images if you
| | 03:58 | like, but it's pretty much done.
| | 04:00 | So now I'm going to select my Pointer
tool and then click outside of the image,
| | 04:06 | and let's resize it by clicking on Image Size.
| | 04:09 | We want this to be proportional, so I am
going to resize the image to 300 pixels wide.
| | 04:14 | And when I do, the height is
automatically adjusted to 225 pixels. Click OK and
| | 04:21 | there's our thumbnail.
| | 04:22 | So all we have to do now is export it, and
I'm going to export it as a flattened PNG.
| | 04:27 | So in the Optimize panel, I'll
choose PNG 8 and then choose File > Export.
| | 04:35 | And we want to save this in our theme,
so I am going to navigate to my site,
| | 04:39 | which is within the C drive, and because
I'm using WAMP, within the wamp folder,
| | 04:46 | the www folder, there is my DW_WP_Themes folder.
| | 04:51 | I will dive into that.
| | 04:53 | And now go into wp-content/themes/
custom. And we want to give this a specific
| | 05:01 | title of screenshot.png.
| | 05:07 | So I'll save it. All done.
Let's switch over to WordPress.
| | 05:11 | And if I hit Refresh, there is my screenshot.
| | 05:16 | Naturally, if you have a comp of
the completed design, you create your
| | 05:20 | screenshot graphic from that, but this
technique provides an alternative method
| | 05:24 | for those who build their sites
directly in Dreamweaver, and it works well for
| | 05:28 | our bare-bones custom theme.
| | Collapse this transcript |
| Testing the theme| 00:00 | Once your basic theme is completed,
it's a good idea to test what you've done
| | 00:03 | already to make sure
everything is working as expected.
| | 00:07 | To do this, you'll need to add some
dummy content in WordPress and make a
| | 00:11 | few other adjustments.
| | 00:12 | Let me show you some handy techniques.
| | 00:14 | Let's switch over to the WordPress
Dashboard, and I'm going to add a new post,
| | 00:19 | by going to Posts > Add New, enter in
a title: Yet another great post.
| | 00:28 | Now let's switch over to lipsum.com,
one of my favorite Lorem Ipsum generators.
| | 00:35 | And we'll generate, let's say, three
new paragraphs. And we'll copy those
| | 00:42 | paragraphs back to our
Dashboard, paste them in, and Publish.
| | 00:51 | So now, let's head back to Dreamweaver.
And if you're already in Live view, like
| | 00:55 | I am, turn Live view off and then
turn it on again, and here we see our new
| | 01:00 | posts being included.
| | 01:02 | So that all seems to be working.
| | 01:04 | There is good separation
between the two articles.
| | 01:07 | Let's turn on Inspect mode here
so that we can check that out.
| | 01:11 | I'll hover over one of the paragraphs
and then use the Left Arrow key to move up
| | 01:15 | the DOM. So there is the div entry,
there is the entire article, and here you
| | 01:21 | can see that there is some yellow
spacing below where it says, Posted in
| | 01:25 | Uncategorized. That's the margin
that we've added that separates it.
| | 01:29 | Everything is looking really great there.
| | 01:31 | Now, let's focus on the sidebar for a moment.
I'll just click to get out of Inspect mode.
| | 01:37 | The links to Recent Posts are definitely
working and the Archives appear to be as well.
| | 01:42 | However, we're only having one month
showing, so we can't really be sure.
| | 01:46 | Let's change to the dates
on one of the post to check.
| | 01:50 | Back to the Dashboard. And since I'm
in my second post here, I'm going to go
| | 01:54 | ahead and click on Edit next to the
Published line, and let's go ahead and change
| | 02:00 | this to the previous year.
| | 02:03 | You can't do it for the future, because
WordPress will not allow you to publish
| | 02:07 | something that's dated in the
future, so we'll click Update.
| | 02:11 | Back to Dreamweaver. So now let's
toggle on and off Live view again, and it
| | 02:16 | looks like our archives are
indeed working properly as well.
| | 02:19 | Next, you may remember that the
sidebar was set up with some default widgets,
| | 02:23 | like the Search and various
archives that we see here.
| | 02:27 | Let's customize the sidebar a bit to
make sure that's all working properly.
| | 02:31 | Back to the Dashboard, and this time
let's go to Appearance > Widgets. Let's add
| | 02:37 | in a Calendar of the site posts, and
I'll put that right below Search. Give it a
| | 02:42 | title of Calendar, click Save.
| | 02:46 | Now back to Dreamweaver and
toggle Live View on and off.
| | 02:49 | Well, it looks like that functionality is in place.
| | 02:52 | Finally, let's see where we are with
the various links built into our page.
| | 02:56 | For this I'm going to go to the Live
view options menu and choose Follow
| | 03:00 | Links Continuously.
| | 03:02 | Now, if I just go to Yet another great
post and click on its title, I see the
| | 03:06 | full post by itself.
| | 03:08 | You'll notice that it's using the
same layout, which if you remember the
| | 03:11 | WordPress template hierarchy
discussed in "Understanding the vasic WordPress
| | 03:16 | structure" video, is exactly right.
| | 03:19 | There are no additional page templates
available, so everything defaults to the
| | 03:23 | index.php theme layout.
| | 03:26 | So your basic testing shows that
everything is in order, and it also sets us
| | 03:30 | up for the next task, expanding the
theme to include additional content-
| | 03:34 | specific pages.
| | Collapse this transcript |
|
|
4. Adding Site ExtrasSetting up the single post page| 00:00 | When a site visitor clicks on a post
title on the homepage of the blog, the
| | 00:04 | expectation is that he or she will be
taken to a page that shows just that post.
| | 00:10 | This is referred to as a single post
page, and it's the first of the additional
| | 00:15 | template pages we will build in this chapter.
| | 00:17 | The basis for this and most of the
template pages is the theme's own index.php.
| | 00:23 | The easiest way to create a single post
page template is to copy the index.php
| | 00:28 | file and make a few modifications.
| | 00:31 | So let's start by going to our Files
panel, drill down to the custom theme
| | 00:36 | folder--that's found within wp-content >
themes--and I'll just double-click on
| | 00:43 | index.php to open it up. And then
immediately I am going to choose File > Save As.
| | 00:49 | And I want to make sure that I am
going into the same folder. I am.
| | 00:54 | And now I am going to save this as single.php.
| | 00:57 | Let me close out my index.php, so I
don't alter that by mistake. And now we are
| | 01:06 | ready to make changes.
| | 01:08 | First, since we've already drilled
down into the post, we no longer need
| | 01:13 | the link on the title.
| | 01:14 | So I am going to remove the anchor
tag that surrounds the title here.
| | 01:18 | Here is my title, this h2 tag, and
I am just going to select that opening
| | 01:24 | anchor tag, delete that, and
then delete the closing anchor tag.
| | 01:29 | So now just the title will appear.
| | 01:31 | Some posts can be quite long.
| | 01:33 | There is no real limit to the length of
a post, and long posts can be paginated
| | 01:38 | by the post's author by inserting
what's called a Next-Page quicktag.
| | 01:43 | That's that single word, without
spaces, within an HTML comment.
| | 01:47 | You need to enter that into HTML
mode in the WordPress dashboard.
| | 01:52 | In order to show pagination, we will
need to add a little bit of code here.
| | 01:56 | I have this code already prepped in
my single_code file that's found in the
| | 02:01 | Exercise Files folder/Chapter 4/04_01.
| | 02:06 | Let me open that up now. And I will grab
this top snippet of code here, copy it,
| | 02:13 | come back to single.php.
| | 02:16 | I want this to appear right after the content.
| | 02:19 | So I am going to place my cursor right
after the div with the class of entry,
| | 02:24 | hit Return, and then paste that in.
| | 02:26 | Now, this function that's within this
PHP code wp_link_pages, as you can see,
| | 02:33 | works with an array and
has a series of arguments.
| | 02:36 | The first argument that we see here
determines what text, if any, is output
| | 02:42 | before the pagination.
| | 02:44 | In this case, we have the word
pages, followed by a colon and a space.
| | 02:50 | The second argument, highlighted here,
determines whether the pagination should be
| | 02:54 | the word next or a number.
| | 02:57 | In this case, we are going
to make it a number. Okay.
| | 03:00 | So next up is the postmetadata, and
we have within that the tags and the
| | 03:06 | categories. That's all fine.
| | 03:08 | And let's keep the comments pop-up
link so folks can see if there are any
| | 03:12 | comments attached to it,
| | 03:14 | but now let's add some new code to
make it possible for the reader to leave
| | 03:18 | a comment themselves. And I am going to
put this code after the close of the article.
| | 03:23 | So I'll position my cursor after the
closing article tag, hit Return, and
| | 03:28 | enter in a short bit of PHP code,
calling the function comments_template.
| | 03:39 | Close that out with a semicolon,
and then let's close the PHP block.
| | 03:44 | This function calls the
built-in WordPress comments form.
| | 03:48 | This too can be customized if you
desire, by creating a new template file and
| | 03:52 | referencing that file as an
argument in the Comments Template function.
| | 03:56 | For example, you might have
comments function "mycomments.php."
| | 04:03 | But instead of taking that route, let's
add in a minimal bit of CSS to keep our
| | 04:08 | comment form looking like the other pages.
| | 04:11 | To get to that, I am going to first save
my single.php page and then go back to
| | 04:17 | the Files panel, up to where I find
index.php in the site root. Open that up,
| | 04:24 | switch to Design view and then Live
view, click Discover, so we can get our
| | 04:31 | dynamically related files.
| | 04:32 | When the Script warning dialog box
appears, click Yes, or you may have at this
| | 04:37 | point already clicked Don't warn me again.
| | 04:39 | And now we see all of our files.
| | 04:41 | Let's go to style.css.
| | 04:44 | So I have my cursor in the style.css
side of the page, and I need to find a
| | 04:50 | selector, content article.
| | 04:52 | So I'm going to use Dreamweaver's
power tool, Find and Replace, to do that.
| | 04:55 | I will press Ctrl+F on the
PC, Command+F on the Mac.
| | 05:00 | I want to look in the current document and
make sure I am searching the source code.
| | 05:05 | In the Find box, I am going
to enter-in #content article.
| | 05:11 | And then click Find Next, and there's my
selector, so I can close Find and Replace.
| | 05:17 | Now, I want to add that selector
right after the second selector in this
| | 05:22 | group, widget-area aside.
| | 05:24 | But because it is generated by WordPress,
I don't really know what that code is.
| | 05:29 | Let's use the Live Code
feature in order to find that.
| | 05:32 | So I am going to switch to Live Code
and then go over to the Design view,
| | 05:39 | hold down the Ctrl key
| | 05:41 | so I can click on yet another great
post, and it will follow that link.
| | 05:47 | And when I do, we can see our single
post page, and that's looking pretty good.
| | 05:54 | And there is our comment form.
| | 05:56 | And as you notice, down at the bottom
of the Comment form, it's hugging the
| | 06:01 | border right above the footer.
| | 06:03 | So I want to add some space there,
and that's why we're going to add that
| | 06:07 | selector to that CSS rule.
| | 06:10 | Now, I need to know what
this comment form's ID is.
| | 06:13 | So I am just going to put my cursor
inside, and over in Live Code, I can see the
| | 06:20 | form here has an ID of comment form.
| | 06:24 | So I will use that selector.
| | 06:27 | Let's go back to style.css.
| | 06:29 | I will add a comma after widget-area
aside and enter in form#commentform.
| | 06:39 | Let's save that CSS page.
| | 06:42 | Now, when I click back over into Design
view, you can see the margin has been added.
| | 06:47 | So our single page now can accommodate
lengthier content, and is open to reader feedback--
| | 06:54 | all in all, much better suited
for displaying a single post.
| | Collapse this transcript |
| Developing a page template| 00:00 | WordPress offers two major
avenues for output: posts and pages.
| | 00:04 | Whenever you create a new page,
WordPress uses the page.php template in the
| | 00:10 | activated theme, if it exists.
| | 00:12 | For me, a custom page is
very much like a single page.
| | 00:16 | There's no need for a link on the title,
the content may be paginated, and you
| | 00:21 | often want to allow comments.
| | 00:23 | So let's use the single.php
page as our starting point.
| | 00:28 | I'm going to open up the Files panel,
and then from our custom theme folder,
| | 00:33 | double-click on single.php, close the
Files panel, and now choose File > Save As,
| | 00:41 | and let's save this as page.php.
| | 00:46 | Let me close single.php, so I don't
make any changes to that by accident.
| | 00:51 | Pages stand outside of the post-
hierarchy, and so the sidebar is not directly
| | 00:56 | useful. And what's more, designers
frequently want to use the full width of the
| | 01:00 | content area for page content.
| | 01:03 | So the one big change I'm going to make
is to remove the sidebar and expand the
| | 01:07 | width of the content area.
| | 01:09 | So let's scroll down to the bottom of
the page, locate the PHP code block that
| | 01:15 | has the get_sidebar
function in it, and delete it.
| | 01:19 | I'm going to now save page.php,
and let's switch over to my style.css file.
| | 01:28 | I'll open up the Files panel again,
and double-click on style.css, close the
| | 01:33 | Files panel, and let's go down to the bottom.
| | 01:36 | Put my cursor at the last rule and
hit Return and enter in a new rule.
| | 01:41 | I'm going to use as the start of my
selector a class that WordPress always
| | 01:47 | inserts for any custom page, and that is .page.
| | 01:51 | Now, I want to target the content area,
| | 01:55 | so I'm going to enter in the ID for
the content area, which is #content.
| | 02:01 | Let's open up a curly brace. And I want
to change the width so that it matches
| | 02:06 | the width of the outer area,
| | 02:08 | so I'll enter in the width property and
set that to the same pixels as my outer
| | 02:16 | dimension, which is 940 pixels.
| | 02:19 | And now I'm going to remove the float.
| | 02:21 | If you recall, the content area was previously
floated to the right to allow for the sidebar.
| | 02:27 | So let's enter in float and set that to none.
| | 02:32 | Now, let's close off the curly brace.
| | 02:34 | Let me save this style sheet. And now
let's flip over to WordPress where we can
| | 02:40 | create a new page and see if
our new settings have taken hold.
| | 02:44 | In the WordPress Dashboard, I'm going to go
to Pages > Add New, enter in a new title here,
| | 02:54 | and then for content, let's go to
lipsum.com and pick up some Lorem Ipsum.
| | 03:00 | I'm going to go with the default
of five paragraphs. Generate that.
| | 03:08 | Now, let's select it and I'll copy it.
| | 03:14 | Back to WordPress. Paste it in.
| | 03:16 | Now, before we preview this, I want to
check and see if my pagination is working.
| | 03:21 | If you recall, in the previous video
when we developed the single page, which
| | 03:26 | page.php is based on, we added the line
that would show pagination controls if
| | 03:32 | the Next Page quickcode was added.
| | 03:35 | Let's add that now.
| | 03:37 | So at the start of this paragraph here,
I'm going to flip over to the HTML tab
| | 03:42 | and then place my cursor right in front
of the third paragraph and enter in an
| | 03:48 | HTML comment with a single word nextpage,
no spaces, close out the HTML comment.
| | 03:56 | Let's go back to the Visual tab,
and there you see an indication of the
| | 04:01 | Next Page short code.
| | 04:03 | Let's go ahead and click Publish. Okay.
| | 04:06 | My page is published. Let's take a look
at it. Click View Page and there is my
| | 04:11 | new custom page without the sidebar, and my
content, taking up the full width of the page.
| | 04:17 | You can also see pagination is right in place.
| | 04:20 | So I'll go ahead and click the
second page to see the second half of my
| | 04:25 | Lorem Ipsum content.
| | 04:26 | I think it's a testament to WordPress'
flexibility that such a major change like
| | 04:31 | this can be implemented so easily.
| | 04:33 | Now, your posts and pages
have a completely different feel.
| | Collapse this transcript |
| Archiving posts| 00:00 | An archive page is one that
displays a collection of posts related by a
| | 00:04 | particular criteria.
| | 00:06 | The criteria could be a specific month,
category, tag, or author, among others.
| | 00:11 | In this video, I'll show you how to
detect what the criteria for an archive is
| | 00:16 | and how to personalize the
archive page accordingly.
| | 00:19 | Let's start by going to the Files panel, opening
up index.php, and then saving it as archive.php.
| | 00:35 | I'll close index.php. Now, I am going
to open up my archive_code helper file
| | 00:42 | that is found in the Exercise Files/Chapter 4/
04_03, and I'll copy this first block of code.
| | 00:52 | Switch back to archive.php. And I want
to enter this right after I want to make
| | 00:58 | sure that we do have some posts to work with.
| | 01:02 | This is going to be a PHP
if elseif type code block.
| | 01:07 | So I am going to enter in the first one
by pressing Ctrl+V, and let me tab this
| | 01:14 | in just a little bit.
| | 01:15 | So now this starts off another if block.
And in this case, it's checking to see
| | 01:20 | if it is a specific category, and if
the archive is part of a category, it
| | 01:25 | outputs this h2 code, giving it an
ID of archiveTitle, which we'll see is
| | 01:31 | consistent throughout all the elseif
statements that we will do. And then the
| | 01:35 | static text Archive for the and then a
character entity, the character entity
| | 01:41 | 8216 is for an opening smart single
quote and 8217 following the PHP statement
| | 01:48 | is for the smart closing quote.
| | 01:50 | In the middle is a little PHP code
block, single_cat_title and that will pull
| | 01:57 | up whatever the category title is and
paste it there, followed by the word Category.
| | 02:04 | So if this post, we are in the clothing
category for example, the title would
| | 02:09 | read archive for the clothing
category, with clothing in quotes. All right!
| | 02:14 | Let's add the next one, which
checks to see if there are tags.
| | 02:18 | So I'll copy the lines 4 and 5 from my
archive_code file, go back to archive.php,
| | 02:27 | and let's paste it in inline
with the php if block above.
| | 02:35 | Again, let me tab this over.
| | 02:37 | If it's a tag, the h2 tag has
Posts Tagged, again with the opening and
| | 02:42 | closing quotes, and the PHP function
single_tag_title is used in order to
| | 02:48 | pull in the name of the tag.
| | 02:50 | The next elseif statement checks to
see if the archive is date-related, and if
| | 02:55 | so, we will list the actual
date that it was posted on.
| | 02:58 | So I am going to archive_code.php and
grab this next code block, copy, paste
| | 03:06 | that in, line up my h2s here. And the
php function here, thetime returns the
| | 03:14 | month, day, plus the ordinal suffix--
that's the TH or ST and seventh or first--
| | 03:21 | as well as the year. Now there are other
date-related things that we can do.
| | 03:26 | What if they just click on the month?
| | 03:28 | We want to see the archive for just that month.
| | 03:30 | So we have an elseif statement for that as well.
| | 03:33 | I will copy that from archive_code
and then paste it in archive.php.
| | 03:43 | Here we see that the_time function is used
again returning only the month and the year.
| | 03:51 | Annual archives are also possible.
| | 03:53 | So we have one more date condition that
we can bring in that will be appropriate
| | 03:58 | for annual archives. Back to archive_
code.php, copy that code, and then paste it
| | 04:06 | in below the others. Line everything up
and here you see the_time function just
| | 04:12 | now returns the year.
| | 04:14 | Another kind of archive is author-related.
| | 04:17 | So let's go get the code to check and
see if the author name has been clicked on
| | 04:22 | and then return a simple title.
| | 04:24 | I will copy that code, tab over and
paste it in, and now we are ready to enter
| | 04:35 | in our last elseif clause, which is the
default condition, if none of the other
| | 04:40 | conditions are true. It's regarded as a
general archive and the archiveTitle reflects that.
| | 04:46 | So let's go to archive_code.php for one final
time, and I will copy three lines of code now.
| | 04:53 | The last line closes out the entire php
if code block. And I will place that in
| | 05:00 | the same position and then select these two
lines and press Tab to move them all over.
| | 05:06 | Okay. Everything is in place.
Let me save the page.
| | 05:10 | Now let's go back to our Files panel,
open up our index.php file, go into Design
| | 05:18 | view and then Live view.
| | 05:20 | We will go over to our sidebar, and let
me click January 2012, under the Archives.
| | 05:27 | I am going to press down the Ctrl key
first so that I can follow the link, and
| | 05:33 | here you see Archive for
January, 2012. That's as expected.
| | 05:37 | It looks like we've got a little bit of
a space issue here, where the title for
| | 05:42 | archive is a little bit
close to the post name itself.
| | 05:46 | So let's go ahead and adjust
that with our style.css page.
| | 05:51 | I'll click the style.css up in the
Related Files toolbar and then scroll down
| | 05:56 | to where we have #content article,
.widget-area aside, and form#commentform. And I
| | 06:03 | will add another selector here.
| | 06:05 | This is targeting my h2 tag with, as
you'll recall, the id of archiveTitle.
| | 06:12 | Save the page, and then let's click
into Design view, and now some additional
| | 06:18 | space has been added.
| | 06:20 | Conditional functions is_category
or is_tag or is_day are all really useful
| | 06:26 | and can be employed in any number of
page areas like sidebars or footers to
| | 06:31 | display custom content
depending on the type of page requested.
| | Collapse this transcript |
| Handling search results| 00:00 | WordPress has a fairly robust search
engine built-in, but you need to create a
| | 00:04 | search page template to
take full advantage of it.
| | 00:07 | In this video, I'll show you how to
display excerpts instead of a full post, and
| | 00:12 | also create a custom read more link.
| | 00:14 | Let's start by going to the Files
panel and then drilling down to our custom
| | 00:20 | theme, opening up index.php.
| | 00:24 | We'll use this again as a
base for our new search page.
| | 00:29 | So, I'll choose File > Save
As and name it search.php.
| | 00:36 | Let's close index.php and
start our modifications.
| | 00:40 | Now the first thing I'm going to do is
enter in a page title, and I'll put it in
| | 00:46 | right after have_posts.
| | 00:48 | We'll make this an h2 tag with an ID of
pageTitle, so we can style it if we need to.
| | 01:00 | And I'm going to enter in some static text
here, Search Results, and then close the h2 tag.
| | 01:09 | We don't really need the meta
information that's found here,
| | 01:13 | so I'm going to go ahead and
select this div and then delete it.
| | 01:18 | Next up comes the content itself. This
is really the heart of the search page.
| | 01:24 | Rather than showing the full post, we
want to show just a small portion of it,
| | 01:28 | an excerpt in other words.
| | 01:30 | To do that, we change the_content
function to the_excerpt function.
| | 01:35 | So, I'll just select the word content
and change it to excerpt. It's that simple.
| | 01:41 | Now, let's make a few more changes to the page.
| | 01:44 | Why don't we remove the postmetadata section?
| | 01:47 | That's not really needed here either.
| | 01:49 | So, let's select the div with the class
postmetadata and to do that, I'm going
| | 01:54 | to use the Dreamweaver technique of
putting my cursor within that div and then
| | 02:00 | over in the Code toolbar,
click Select Parent Tag.
| | 02:03 | That will select the entire div.
Press Delete and that leaves us with a blank
| | 02:08 | line that we can quickly erase.
| | 02:11 | Now, if there are no results
returned, that means that there are no
| | 02:14 | Search Results found.
| | 02:15 | So let me customize this Not found
message just a bit, and instead of Not found,
| | 02:21 | I'll make it No search results found.
| | 02:24 | Okay, we're ready to check our progress,
| | 02:26 | so let's go ahead and save the
page and flip over to WordPress.
| | 02:31 | I'm going to go visit the site
and then just do a quick search.
| | 02:37 | Now, I have a lot of lorem ipsum in here,
| | 02:40 | so what I'm going to do is just
enter in a two-letter combination.
| | 02:44 | Let's look for no. Click Search.
| | 02:47 | My search results are showing up.
| | 02:50 | I have a no appearing in My custom
page and also in Yet another great post.
| | 02:55 | So the search results are looking pretty good.
| | 02:57 | We're definitely getting the look we
want, and with an excerpt, you see how
| | 03:01 | the post is cut off after 55 words.
That's the WordPress default. And an ellipsis
| | 03:07 | is added to indicate additional content.
| | 03:10 | However, the ellipsis is not linked,
| | 03:13 | so there's no way to view the text
without going and clicking on the title.
| | 03:18 | Let's change the somewhat subtle ellipsis
| | 03:21 | to a more visible read more link.
| | 03:24 | To do that, we'll need to go back
to Dreamweaver and add some code to
| | 03:28 | our functions.php page.
| | 03:30 | So, I'm opening up Files panel and then
double-click on functions.php where we
| | 03:37 | have one custom function already in place.
| | 03:40 | I'll put my cursor at the end of that,
and now I'm going to open up a helper file
| | 03:44 | that we have available to us,
functions_code.php, and it's found within the
| | 03:50 | Chapter 4/04_04 folder.
| | 03:54 | Here's my new function.
| | 03:56 | Let me copy that. And I want to
paste it within the PHP code block.
| | 04:02 | So I'm going to open up the little
extra lines here, leave one line of space
| | 04:06 | between my two different functions, and
paste that in. And then I'll just tab it
| | 04:12 | over so everything is lined up.
| | 04:15 | Let's save the file.
| | 04:16 | Now, what this code does is it creates
a new function called new_excerpt_more,
| | 04:22 | which pulls in the variable post and
then adds in a static ellipsis,
| | 04:28 | followed by a space and a link using
the post ID with the text Read more.
| | 04:34 | The final part of this is the WordPress
function add_filter, and what this does
| | 04:39 | is it looks at the existing WordPress
function excerpt_more and it replaces it
| | 04:46 | with your new function, new_excerpt_more.
| | 04:49 | Let's see it in action now.
| | 04:50 | Now that it's saved, I can go back to
the browser, hit Refresh, and there is
| | 04:56 | my new Read more link.
| | 04:58 | So if I click on that, it goes to
the single page post and shows just
| | 05:04 | that individual post.
| | 05:06 | So, as you can see now, our search
results are being displayed in an
| | 05:10 | easy-to-read, easy-to-follow format.
| | 05:13 | Of course, there's much more you
can do with CSS and customizing the
| | 05:17 | excerpt_more function, but
this should open the door for you.
| | Collapse this transcript |
| Customizing error pages| 00:00 | Error pages are a fact of the online life.
| | 00:02 | Content is moved, URLs are
typed incorrectly, bad links emerge.
| | 00:07 | To ease the user experience of
encountering a system-generated Page not found
| | 00:12 | error, a 404 in web-speak, you can
easily create a custom 404 Error page.
| | 00:18 | Again, let's start with our index.php as a base.
| | 00:21 | So, I'll open up Files panel, double-
click on index.php, and then save it using
| | 00:29 | the File > Save As command, and
give it a title of 404.php.
| | 00:36 | Now, we don't want to display any posts here,
| | 00:38 | so I'm going to delete the bulk of this
code, including all the code known as the loop.
| | 00:44 | Now I scroll down a bit to make
sure I've got everything. I do.
| | 00:49 | I want to go ahead and
get that extra line as well.
| | 00:51 | So I have all the content that's
within the content div. Press Delete and now
| | 00:58 | let's add in some static content.
| | 01:00 | I'll press Return and Tab and put in
an h2 tag with the text "Sorry, but I
| | 01:09 | couldn't find that page,"
| | 01:10 | and then close the h2 tag and save the page.
| | 01:14 | Okay, we're actually
ready to give it a trial run.
| | 01:17 | Now, let me go ahead and go to the
site, and I'll click on one of the pages.
| | 01:23 | Let's look at our Yet another great post page.
| | 01:26 | Now, you'll notice up here in the
address bar that this is p=4. 4 is the ID for
| | 01:33 | this particular page.
| | 01:34 | So, if I go in and change the p value
to 99--that should be a page that I don't
| | 01:41 | have anywhere--and hit Return,
there is my custom 404 message.
| | 01:47 | Now, obviously there's a ton
more you can do on a 404 page.
| | 01:51 | You could include links to common
site destinations, for example. But by
| | 01:55 | including even a bare-bones 404 PHP
page, you keep wandering site visitors
| | 02:01 | within the site itself and make it
easier for them to find their way.
| | Collapse this transcript |
|
|
GoodbyeNext steps| 00:00 | Thanks for taking my Dreamweaver
and WordPress Building Themes course.
| | 00:04 | I hope you have got a lot out of it and are
stoked about building your own custom themes.
| | 00:08 | If you want to dive deeper into
creating a WordPress site, check out my
| | 00:13 | Dreamweaver and WordPress: Core Concepts course.
| | 00:16 | Have a great day!
| | Collapse this transcript |
|
|
