IntroductionWelcome| 00:04 | A WordPress site can be so
much more than just a blog.
| | 00:07 | First, we'll lay the groundwork so you
understand what your options are in a
| | 00:12 | WordPress site, and then I'll show you
how to make those options a reality, one
| | 00:16 | at a time, right in Dreamweaver.
| | 00:18 | You'll see how to display your choice
of full post or excerpt, as well as how
| | 00:23 | to configure them to get the
length and number you want.
| | 00:26 | Then we'll cover WordPress pages so
you can move beyond the basic blog format
| | 00:31 | in a full multipage site.
| | 00:34 | This course takes full advantage of the
PHP and MySQL backbone of the WordPress
| | 00:40 | application to further extend the site.
| | 00:42 | You'll also see how to create new
MySQL tables and incorporate the data they
| | 00:47 | contain on your WordPress pages.
| | 00:49 | We'll leverage Dreamweaver's built-in
PHP server model support to keep the
| | 00:54 | coding to a minimum.
| | 00:55 | There is really a ton of functionality
lying under the WordPress hood, and with
| | 01:00 | Dreamweaver's help, this course will
tune it up and help you rev up your sites.
| | Collapse this transcript |
| About the exercise files| 00:00 | If you're a Premium member of the
lynda.com Online Training Library, you have
| | 00:04 | 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; however, you
may find it helpful to work with the
| | 00:16 | supplied exercise files to practice the steps
safely, and without creating your own examples.
| | 00:21 | To begin using the files from the site,
download them, extract them, and then
| | 00:26 | store those files in a
convenient location, such as your desktop.
| | 00:30 | The Exercise Files folder is organized
by chapter, and in every chapter it's
| | 00:35 | broken down into the
various videos that you'll see.
| | 00:38 | Within the video chapters,
there are a series of files,
| | 00:42 | typically assets like CSS style sheets,
images, and source code files, as well as
| | 00:48 | a practice file to work with.
| | 00:50 | In most of the movie folders,
you'll also find a final folder, and that
| | 00:54 | contains the files showing the
completed lesson, which you can open and
| | 00:58 | explore at your leisure.
| | 01:00 | Because we're working with WordPress,
which stores much of its information in a
| | 01:03 | database, it's best to follow the
course chapter by chapter in order to have
| | 01:08 | the most recent data.
| | 01:09 | However, if you would like to jump in
at a certain point, I've provided an XML
| | 01:14 | file for certain chapters, which you can
use to bring the data into WordPress's
| | 01:18 | database tables with the WordPress
Import feature, found in the Dashboard,
| | 01:23 | under the Tools category.
| | 01:25 | You'll find the XML file in the jump-in folder.
| | 01:29 | If you're a Monthly subscriber or
Annual subscriber to lynda.com, you don't
| | 01:33 | have access to the exercise files,
but you can definitely follow along with
| | 01:37 | your own assets.
| | Collapse this transcript |
| Development environment requirements| 00:00 | Because WordPress is an
application that relies on PHP and MySQL,
| | 00:05 | you'll need to setup a local
development environment to work with it.
| | 00:08 | While going through all of the steps to
create such development environment is
| | 00:11 | beyond the scope of this course, I am
going to lay out the requirements and give
| | 00:16 | you some pointers, including one to
a freely available lynda.com course.
| | 00:21 | For WordPress to run, you'll need the
following setup, whether on your hosted
| | 00:25 | site or on your local system.
| | 00:28 | You'll need a web server, like Apache
or Microsoft's Internet Information
| | 00:32 | Server, known as IIS.
| | 00:34 | You'll also need a PHP server
with a version of 5.2.4 or higher.
| | 00:41 | Finally, you'll need a MySQL
server, version 5.0 or higher.
| | 00:45 | That will cover you if you're
using any of the more recent WordPress
| | 00:50 | versions 3.2 and up.
| | 00:53 | If you're working on a legacy site
that uses WordPress 3.1, you can use a PHP
| | 00:59 | server version, 4.3 or higher, and a
MySQL server version, 4.1.2 or higher.
| | 01:05 | You'll still need a web server in either case.
| | 01:09 | Make sure that your web site host meets
these requirements before you embark on
| | 01:13 | using WordPress for a site.
| | 01:15 | You'll find that most do.
| | 01:17 | Should you need to set up a
local development environment,
| | 01:20 | there are several options.
| | 01:22 | You can install the components--the web
server, PHP, and MySQL--separately, or you
| | 01:28 | can opt to install one of the
several bundled systems that are available.
| | 01:32 | Here are three that work quite well.
| | 01:35 | WampServer for Windows is available in
both a 32- and a 64-bit version. We'll be
| | 01:40 | using the 64-bit version of
WAMP server during this course.
| | 01:44 | For Mac OS X you can use MAMP.
| | 01:47 | When you go to the MAMP homepage,
you'll see that there are two versions: a
| | 01:51 | standard and a pro version available.
For most development work, you really only
| | 01:56 | need the standard version.
| | 01:58 | Finally, if you want to use one bundled
server system for both Windows and Mac
| | 02:03 | and you're working with a
Windows 32-bit system, there is XAMPP.
| | 02:06 | Now all of the bundled systems come
with PHPmyAdmin installed to use as
| | 02:12 | a database manager.
| | 02:14 | If you're installing the components
separately, I highly recommend that you also
| | 02:19 | opt to include PHPmyAdmin or
some similar database manager.
| | 02:23 | For a detailed explanation of how you
setup your local development environment,
| | 02:28 | see the freely available course by David
Gassner, Installing Apache MySQL and PHP,
| | 02:34 | found in the lynda.com Online Training Library.
| | 02:38 | Next, you'll need to setup WordPress locally.
| | 02:41 | For a detailed explanation, see my course
Dreamweaver and WordPress: Core Concepts.
| | 02:46 | As an overview, here's what you'll need to do.
| | 02:49 | First, create a database in MySQL
with PHPmyAdmin or a similar application.
| | 02:56 | Then copy your WordPress files
to a new folder in your web root.
| | 03:00 | The web root varies according to the
type of server installation package.
| | 03:05 | Here with WAMP, the web
root will be in C:\wamp\www.
| | 03:13 | With MAMP, M-A-M-P, on the Mac, it's
in the MAMP Application htdocs folder.
| | 03:19 | Then after you've copied those files
into the web root, open up a browser and go
| | 03:24 | to localhost, whatever the folder name is.
| | 03:27 | There you'll see the start of the
WordPress installation with the query, Should
| | 03:31 | we create a configuration file?
| | 03:33 | Click Yes and you're off to the races.
| | 03:36 | You'll need to enter in your
database name, the server name--which is
| | 03:39 | often localhost, but not always--and your
username and password if any for your database.
| | 03:46 | The final step is to create
your Dreamweaver environment.
| | 03:50 | In Dreamweaver, you'll need to set up a
Dreamweaver site pointing to the same
| | 03:54 | folder that you've set up in
your local web server root.
| | 03:57 | You will also need to create a
new testing server in Dreamweaver.
| | 04:01 | Make sure you connect using the
Local/Network settings, point to that same site
| | 04:07 | folder, and on the Advanced tab
select PHP MySQL as a server model.
| | 04:12 | Make sure that you check the Testing
server checkbox in the Server list.
| | 04:17 | That can be somewhat of a gotcha,
because Dreamweaver by default will select
| | 04:22 | remote server for you.
| | 04:23 | Make sure you make that
switch to the testing server.
| | 04:26 | Once your local development
environment is established, you'll be able to
| | 04:29 | create and develop WordPress sites,
as well as work with PHP and MySQL
| | 04:34 | separately in Dreamweaver.
| | Collapse this transcript |
| Working with existing WordPress content| 00:00 | Web designers wear many hats, and from
time to time they are called on to take
| | 00:04 | over and expand upon an existing site.
| | 00:07 | If you're working with a plain HTML
site, the handover can be as simple as
| | 00:11 | copying a set of files.
| | 00:13 | However, if you're working with a WordPress
site, life just got a bit more complicated.
| | 00:19 | In this movie, I am going to show you
the steps you need to take when expanding
| | 00:23 | an existing WordPress
site that's not your design,
| | 00:26 | and along the way, show viewers who
would like to use this course's exercise
| | 00:31 | files how to set up your local site.
| | 00:34 | This course assumes that you
already have a local PHP MySQL development
| | 00:38 | environment established, as
discussed in the previous video.
| | 00:42 | Our first step is to create a new database.
| | 00:44 | I am working with WAMP server, so I'm
going to go on over to WAMPSERVER, choose
| | 00:51 | that, and then open up my
database manager phpMyAdmin.
| | 00:55 | So as I said, I want to create a new
database, so let me click on Databases, and
| | 01:02 | I'll enter in the name of my new
database, and that will be tpa, short for the
| | 01:08 | site's company, Trans Planet Airlines.
| | 01:11 | Press Tab and click Create.
| | 01:15 | Our database has been created. Great!
| | 01:18 | Now because this is a WordPress-
centric site, I am going to copy a recently
| | 01:23 | downloaded copy of
WordPress into my local site root.
| | 01:28 | So, let me go over to Windows
Explorer. Go to my Downloads.
| | 01:32 | There is my downloaded
expanded copy of WordPress.
| | 01:39 | I'll copy that, and now I am going to go
to my site root, which is C:/wamp/www.
| | 01:47 | I don't have any other sites set up
yet, so this will be the first one.
| | 01:51 | I'll just paste that in.
| | 01:54 | I'll rename WordPress to the site name,
and for this course it's DW_WP_Sites.
| | 02:07 | Okay, we're ready to bring up our
browser to handle the WordPress installation.
| | 02:11 | I'll open up a new tab and go to
localhost/dw_wp_sites. This is not
| | 02:19 | case sensitive, and then I'll hit
Return and WordPress detects that it doesn't
| | 02:23 | have a wp-config.php file.
| | 02:27 | That's exactly right.
That's the default condition.
| | 02:30 | So, let's click on Create a
Configuration File. A little informational screen
| | 02:35 | comes up, telling us what it is
we'll need to know to proceed.
| | 02:38 | I know all those things,
so let's go! All right!
| | 02:42 | Database Name, we just entered that,
that was tpa. User Name is root.
| | 02:47 | I don't have a password set on
this installation. Since it's a local
| | 02:52 | development system that only I have
access to, I think that's okay. And here my
| | 02:57 | Database Host is localhost.
| | 03:00 | That's frequently who
your host is, but not always,
| | 03:02 | so make sure you know the web
server's database host name.
| | 03:06 | All right, we'll leave the Table
Prefix at wp_ and click Submit,
| | 03:11 | run the install, and we
are close to finished here.
| | 03:14 | So I am going to put in the Site Title,
and we'll use Trans Planet Airlines, my
| | 03:20 | admin username, and I am going to
put in a password and then confirm the
| | 03:28 | password, enter my email.
| | 03:33 | Now, because I'm just using this as a
development site, I'm going to clear
| | 03:36 | the check box that will allow my site to
appear in search engines like Google and Technorati.
| | 03:41 | When you install it on your remote server,
obviously you want to leave that checked.
| | 03:46 | Okay, let's click Install WordPress, and
we're successful. Excellent. Let's Log In.
| | 03:51 | I'll go to admin, enter in my password,
click Log In, and here's our Dashboard.
| | 04:00 | Now let me dismiss the introductory
screens. Okay here is our standard
| | 04:04 | WordPress installation.
| | 04:06 | Now let's switch to
Dreamweaver to set up our site.
| | 04:09 | I'll go to Site > New Site and I am
going to name this site DW WP Sites, and
| | 04:17 | then locate that folder, which you'll
recall is in my site root in C:/wamp/www,
| | 04:26 | Your location may vary.
| | 04:28 | And then double-click on the file name to
make sure that I have DW_WP_Sites shown.
| | 04:37 | Click Select and now
let's set up a testing server.
| | 04:42 | I'll click on Servers in the left
column and then choose the Plus sign,
| | 04:46 | which is Add New Server.
| | 04:48 | We'll call this server Testing and then
connect using the Local/Network option.
| | 04:56 | For that we only need to enter in a
server folder, which I'll do by clicking
| | 05:00 | on the Folder icon, and it will default to the
previously selected site, so that's perfect.
| | 05:07 | Click Select and then enter in my web URL.
| | 05:11 | Because this is a local server, I'll
put in localhost/ and then dw_wp_sites,
| | 05:21 | just the folder name.
| | 05:22 | Now if I press Tab, Dreamweaver will put in
the slash for you, or you can put it in yourself.
| | 05:29 | One last task on this panel: click
Advanced and then from the Server model
| | 05:34 | list, choose PHP MySQL.
| | 05:38 | Click Save and you want to be sure
to deselect Remote and select Testing
| | 05:44 | under the check boxes.
| | 05:45 | Okay, let's save our site setup.
| | 05:49 | There are our files, so all of our
WordPress files installed. Excellent.
| | 05:54 | Now I have a custom theme that I am
going to incorporate, so I'm going to bring
| | 05:58 | those into my themes folder.
| | 06:00 | Let's head back to Windows Explorer,
and I'll go to my Desktop to where my
| | 06:04 | exercise files are, open that up, and
then open up the Introduction folder.
| | 06:12 | And there is only one movie folder
within that, and that's the current one, 00_04.
| | 06:17 | Open that up and here you see
some files that we'll be accessing.
| | 06:22 | The first one will be the theme,
called tpa, so I am going to right-click
| | 06:29 | and copy that, and now I am going to head back
to my wamp installation here and select that.
| | 06:38 | Themes are always stored in the
wp-content folder, so if you open that up,
| | 06:44 | you'll see a themes folder. Open that
up and there are the two default themes,
| | 06:49 | twentyeleven and twentyten. Let me go ahead
and paste in my custom theme, tpa. All right!
| | 06:55 | That's looking good.
We've got a couple of other files to transfer.
| | 06:59 | I am going to go back to Desktop/
Exercise Files/Introduction/00_04, and now
| | 07:07 | let's bring in the uploads.
| | 07:10 | These are some images that were
used in the posts of the existing site.
| | 07:13 | WordPress stores those in the
wp-content/uploads folder, in a date-
| | 07:20 | oriented folder structure.
| | 07:21 | Let me open up uploads so
you can see what I mean.
| | 07:25 | Where there is a folder for every year
and if I open up the year, there is a
| | 07:29 | folder for every month and within
that is an image and its thumbnail.
| | 07:36 | So I want to copy this entire uploads
folder here, and then I am going to bring
| | 07:43 | it in to my site, into the wp-content folder.
| | 07:49 | WordPress does not create an uploads
folder until you upload the first image or file,
| | 07:54 | so you won't see that there, so
I'll go ahead and paste in uploads.
| | 07:58 | Okay, we are finished on the
Dreamweaver and file-manipulation side. Let's go
| | 08:03 | back to WordPress Dashboard
and activate our custom theme.
| | 08:07 | You'll find the themes under
Appearance > Themes, and here you see the current
| | 08:12 | theme up top and two
available themes down below.
| | 08:16 | The one on the left is the one we want,
TPA Theme, so I'll go ahead and Activate
| | 08:22 | that, and let's take a look by going up
to Visit Site. And yes, there is my new
| | 08:29 | theme, complete with the new logo
for Trans Planet Airlines. Great!
| | 08:34 | All right, back to the Dashboard.
| | 08:36 | There is one final task to tackle, and
that's importing the data from the previous site.
| | 08:41 | We've brought in the files but not
the data from the posts and pages.
| | 08:46 | So let's bring that in using a
WordPress tool, found here under tools, called
| | 08:52 | Import. And under Import, there is
numerous things that you can import.
| | 08:57 | We are going to import a WordPress file,
| | 09:00 | so I'll click on WordPress.
| | 09:02 | Now the first time you do this, it's very
likely that you will need to install it.
| | 09:06 | This is in a constantly evolving state,
and even though it says it's not been
| | 09:11 | tested with your current version,
it seems to be working pretty well.
| | 09:15 | So click on Install Now and then
Activate Plugin & Run importer.
| | 09:22 | Okay we have a XML file that we are
going to bring in and if you click on Browse
| | 09:27 | and then go to the Exercise Files, which
are located for me on my desktop, in the
| | 09:33 | Exercise Files folder, in
the Introduction folder, 00_04,
| | 09:39 | the XML file you are
looking for is called tpa_start.
| | 09:43 | All right, you can see that's an
XML document, and let's click Open
| | 09:49 | and then Upload file and import.
| | 09:53 | Now it will give you some
options regarding assigning authors and
| | 09:56 | importing attachments.
| | 09:57 | You can leave them at your default
settings here and just click Submit.
| | 10:01 | It looks like it was successful, except
you'll notice that it did not bring in
| | 10:05 | the media. We've already transferred
that over with some files, and the fact that
| | 10:10 | it failed to create a new
user for admin is exactly right.
| | 10:13 | Okay, so let's go to Posts.
| | 10:16 | Now let's do one final test in
Dreamweaver to make sure our testing server is up
| | 10:20 | and firing on all cylinders.
| | 10:22 | So I am going to open up the index.php
file, go into Design view and then Live
| | 10:30 | view, and it looks like we've
got our theme working perfectly.
| | 10:34 | The techniques covered in this movie
are not only useful for taking over a
| | 10:38 | legacy WordPress site;
| | 10:40 | they can also be applied when moving
a site from one web host to another.
| | Collapse this transcript |
|
|
1. Planning Out the SiteUnderstanding options for a WordPress site| 00:00 | Okay. You're working with a client who
really wants to take control of their new
| | 00:05 | web site's content, and you think
WordPress might be the way to go.
| | 00:08 | So what are your options?
| | 00:11 | In this chapter, I'll give you an
overview of the different possibilities for
| | 00:14 | handling content in a WordPress-based site.
| | 00:17 | Other than material pulled in from outside a
site, there are basically two types of content:
| | 00:23 | user-contributed and developer-created.
| | 00:26 | We'll focus on user-contributed in this video.
| | 00:29 | The best known type of user-
contributed content are blog posts.
| | 00:33 | A blog post is entered through the
WordPress editor, or the user enters a title
| | 00:38 | and they post content as well
as assigning tags and categories.
| | 00:43 | Once the blog post is published,
additional meta information, like the author's
| | 00:47 | name and date of
publication, are automatically added.
| | 00:51 | WordPress users can also create new pages
through the dashboard's Pages interface.
| | 00:57 | Like blogs, a page has a title and content.
| | 01:01 | You can also assign a pager a template
to provide a different look and feel or
| | 01:05 | organize the pages on the site.
| | 01:08 | You can create WordPress pages in the
standard fashion, which is appropriate when
| | 01:12 | you've got static content that needs
to be updated infrequently. Or you can
| | 01:17 | create your page content as a post.
| | 01:20 | This works well when you want to use a
different template for specific content.
| | 01:25 | I'll show you how to set up this
technique in the "Implementing post-driven pages"
| | 01:29 | movie, found in Chapter 2.
| | 01:31 | The final way that you can bring user-
contributed content into a WordPress site
| | 01:36 | is by setting up additional database
tables and entering the information through
| | 01:40 | a separate admin interface.
| | 01:43 | This strategy is covered in the
Chapter 5 movie, "Adding MySQL database output."
| | 01:49 | As you're developing your site map,
it's a good idea to decide which pages will
| | 01:53 | be created using what strategy,
| | 01:55 | what pages incorporate blog posts,
which ones are standard custom pages, which
| | 02:01 | are post-driven pages, and which
include database-driven content.
| | Collapse this transcript |
| Handling standard pages| 00:00 | Just because you're creating a WordPress-
driven site, it doesn't mean that every
| | 00:04 | page has to contain user-contributed content.
| | 00:08 | There are often times when the client
requires pages that are expressly outside
| | 00:12 | the content contributor's reach.
| | 00:14 | In this video, I'm going to describe
a couple of ways to build such pages.
| | 00:18 | The first technique takes a completely
developer-created page and converts it to
| | 00:23 | be theme-compatible, and it
takes just a few lines of code.
| | 00:28 | Let me demo the method with a dummy
legal disclaimer page, one that would almost
| | 00:33 | never be touched by a content contributor.
| | 00:35 | So I'll go up to File > Open. And I'm
going to navigate to my exercise files, in
| | 00:43 | Chapter 1, folder 01_02, and open up
the disclaimer.php page that you see here.
| | 00:50 | Now, it says it's a PHP page, but if
we take a look at the code, you can see
| | 00:54 | that it's really just a
standard HTML page here. That's fine.
| | 00:59 | I saved it as a PHP page so that we
could take advantage of the processing
| | 01:04 | power of PHP in our WordPress application.
| | 01:07 | So I'm going to remove all the code
up top, up to, and including, the opening
| | 01:13 | body tag, so I'll be left with just
the content. And then also I'm going to
| | 01:18 | remove the closing body and HTML tags, so we
have nothing but pure content on this page.
| | 01:24 | Now, let's go up to the top of the
page, make a little space, and then I
| | 01:28 | will put in a PHP code block, and
within this code block, I'm going to
| | 01:36 | put in two lines of code.
| | 01:39 | The first will include a certain
PHP file that will start the whole
| | 01:43 | WordPress ball rolling.
| | 01:45 | So type in require, open and close
parentheses, and then within those, we'll put
| | 01:51 | a pair of single quotes, and then the
file name, which is wp-blog-header.php.
| | 02:01 | Now after your last parenthesis,
put a semicolon and hit Return.
| | 02:06 | The require function may look familiar.
| | 02:08 | Let's flip over to my
index.php page and go into Code view.
| | 02:14 | This is the opening page, and as you
can see, we have the same basic file.
| | 02:20 | Now, I'm going to save mine in the
site root, so I don't really need any
| | 02:24 | additional path information here.
| | 02:28 | So let's enter in our second
line of code, which is get_header.
| | 02:34 | This function will get the header of our theme.
| | 02:36 | Now, we need to put some corresponding PHP
code down at the bottom to get the footer.
| | 02:44 | Okay, that's actually all the code you need.
| | 02:46 | I'm going to save this, as I said, in the
site root, and to do that, I'll choose
| | 02:50 | Save As, click Site Root from my Save
As dialog box, and we'll leave it as
| | 02:55 | disclaimer. Click Save. Co not
click update links, click No.
| | 03:01 | Let's get rid of the old version of disclaimer.
| | 03:04 | Now, let's switch over to Design view
and then enter into Live view, and there
| | 03:09 | you can see my content now with the
complete framing, including navigation,
| | 03:16 | header and footer of the theme.
| | 03:18 | So visually the content fits in perfectly
with the rest of the WordPress theme pages.
| | 03:23 | I'll go back over to index.php, enter
into Design view and then Live view,
| | 03:30 | and as you can see, it's identical for
the header and the background, as well
| | 03:35 | as the footer down below.
| | 03:37 | One of the great things about this
technique is should you ever update or even
| | 03:41 | completely change the theme, those
changes will be automatically applied.
| | 03:46 | However, there is a downside to this technique.
| | 03:49 | Because the pages are created outside
of the WordPress database system, you
| | 03:53 | can't search for them with
a built-in Search function.
| | 03:56 | Also, you'll need to link to any pages
developed this way with absolute URLs,
| | 04:02 | including the site's web address.
| | 04:04 | Another way to go, and stay within the
WordPress system, avoids both of these
| | 04:09 | pitfalls, is to create pages that allows only
WordPress users with certain roles to modify.
| | 04:17 | WordPress includes five different roles.
| | 04:20 | Let's flip back over to the
dashboard and I can show you what those are.
| | 04:23 | You can see all the roles if you
choose Users > Add New, and then at the very
| | 04:28 | bottom, you'll see a line for Role.
| | 04:31 | And by default, new users are offered
a Subscriber role, but there is also
| | 04:37 | Administrator, Editor,
Author, and Contributor roles.
| | 04:42 | Honestly, by default, user roles in
WordPress aren't extremely useful;
| | 04:47 | however, they do lay a foundation for a
number of killer plug-ins that can really
| | 04:52 | enhance the feature.
| | 04:54 | One of my favorites is called
Role Scoper by Kevin Behrens.
| | 04:59 | This free plug-in goes a long way
towards making WordPress a more full-fledged
| | 05:04 | CMS by enabling you to set access
permissions for posts and pages based on role.
| | 05:11 | Let me show you how it works.
| | 05:13 | We'll go back to our Dashboard, go
to Plugins > Add New, and in the Search
| | 05:21 | Plugin field, type in Role Scoper,
click Search Plugins, and it will be
| | 05:26 | returned at the top of the list.
| | 05:28 | I'm going to go ahead and install now.
| | 05:31 | Click OK when you're asked if
you sure you want to install it.
| | 05:34 | The installation is pretty quick,
and then click Activate Plugin.
| | 05:39 | Now, keep an eye on the left-hand
column and if you notice, the menu options
| | 05:44 | changed significantly when
the plug-in was activated.
| | 05:47 | Some of the new settings as you'll find
are under Users, where now we have a Role
| | 05:52 | Groups option, under Restrictions,
that will allow you to set restrictions on
| | 05:57 | categories, navigation menus, list
categories, posts and pages and an entire new
| | 06:03 | category on roles, with a ton of options.
| | 06:07 | For the purposes of our demo, we can
leave all the settings at their default,
| | 06:11 | and let's quickly create a new disclaimer page.
| | 06:14 | So I'll go up to Pages > Add New,
give it a title of Disclaimer, as we did
| | 06:21 | before, and now I'm going to flip back to
Dreamweaver and pick up that Lorem Ipsum text here.
| | 06:27 | I'll copy that and back to
WordPress, paste that in.
| | 06:32 | Now, if you scroll down, you'll see
some additional options have been added
| | 06:38 | under the page editor.
| | 06:39 | You can restrict the readers to this.
| | 06:41 | We don't want to do that,
so I'm just going to collapse that option.
| | 06:45 | Contributors, we definitely
want to restrict this here.
| | 06:48 | So I'll choose Restrict for page. And
just in case there are some sub-pages that
| | 06:54 | come off of this, probably we
want to restrict that as well.
| | 06:58 | So we don't want anyone else to
change it except administrators.
| | 07:02 | So we're going to make our eligible
groups here and you'll notice that these are
| | 07:05 | the same roles that WordPress set up.
| | 07:08 | We want only the administrators to be
able to contribute to this item. All right!
| | 07:13 | Contributors is done. I'll collapse that.
| | 07:16 | Now Editors, I'm going to go ahead
and restrict the page and sub-pages and
| | 07:21 | again, make the administrator eligible.
| | 07:24 | Now, we have no associates, so I can
leave that alone, and let's go back up and
| | 07:29 | publish our page now.
| | 07:32 | Now, because I'm logged in as an
administrator, if I go to Pages, I'll find my
| | 07:38 | Disclaimer page here, and I can view it,
I can edit it; all that's available to me.
| | Collapse this transcript |
|
|
2. Creating Pages with WordPress PostsManaging full posts| 00:00 | With its default settings, WordPress shows
the most recent ten posts on the homepage.
| | 00:05 | If you take a look at the archives link,
you will see a listing of up to ten archives.
| | 00:11 | The same thing is true of search results.
| | 00:13 | While it's great to have a
configurable setting, showing how many posts and
| | 00:17 | archives and search results you can
show, I think it's a little bit of a
| | 00:21 | limitation that the same
setting applies across the board.
| | 00:25 | In this movie, we are going to look at
how you can limit the number of posts
| | 00:29 | displayed on the home page without
affecting the rest of your site.
| | 00:33 | So I'm going to drill into my theme, tpa,
and open up the index.php file, which is
| | 00:40 | the main content area, switch to Code
view, and I wanted to take just a moment
| | 00:45 | to show you the PHP code that's
responsible for outputting those posts.
| | 00:50 | It starts here with the code block on
line 4 and continues all the way down to
| | 00:54 | line 23, the endif that you find there.
| | 00:57 | This is known in WordPress speak as the loop.
| | 01:01 | If there are posts, while there are
posts, output the content that's found, in
| | 01:07 | this case, in an article tag, including
a link to title and an h2 tag, a div of
| | 01:14 | meta content--basically the time it was
published--the content itself, and then
| | 01:21 | another div of post metadata, which
show tags, categories, and comments.
| | 01:27 | By default, this loop will display as
many posts, up to the number available
| | 01:32 | defined in the WordPress settings.
| | 01:34 | Let me show you where that is.
| | 01:35 | So go to Settings > Reading, and here you'll
see blog pages that show at most ten posts.
| | 01:42 | So if we take a look at the site now,
if I click on Visit Site, there is one
| | 01:47 | post, there is two posts,
and you have just two there.
| | 01:49 | But let's go ahead and search
for IP, and here's one, two, three.
| | 01:57 | So it definitely shows more than two and if I
had ten results for that, it will show those.
| | 02:02 | Now, let's look what
happens if I change it to 1.
| | 02:07 | Save Changes. Now let's go back to our
site, and here we have just the one post
| | 02:14 | on the homepage. That's great.
| | 02:15 | But now, let's search for IP again, and
we only have one search result returning.
| | 02:21 | So the value that you set
here is really a global setting.
| | 02:26 | I'm going to restore it to 10
and then click Save Changes.
| | 02:30 | Now, let's go back to Dreamweaver where
we can put in a little bit of PHP code
| | 02:35 | to limit your posts just on the homepage.
And this code will go right after if
| | 02:41 | (have_posts() ) on line 4.
| | 02:42 | I am going to open up another
PHP code block, and put in the
| | 02:48 | function query_posts();
| | 02:55 | and then within the parentheses, a pair
of quotes, and we put in the property
| | 03:00 | showposts= and then the number of
posts that you want shown, in this case 1.
| | 03:07 | Now let me close off the
PHP function, save this.
| | 03:12 | With the file saved, let's
go back and take a look now.
| | 03:16 | In our site, we now have just the
most recent posts, and in our search
| | 03:21 | results, I will search for the same
two-letter combination, and now we've got
| | 03:27 | multiple results there.
| | 03:28 | You will find that the
query_posts function is very helpful.
| | 03:32 | You can actually use it to limit your
post to a specific category or tag, as
| | 03:37 | well as the number.
| | 03:38 | However, you should be aware that
because it alters the main loop, it could
| | 03:43 | affect the rest of your page.
| | 03:46 | To avoid these issues, use the
wp_reset_query function after you're done.
| | 03:51 | This code will go after the endif.
| | 03:54 | Let me scroll up a little bit so you
can see it better. Another code block,
| | 04:01 | wp_reset_query, and then just an open
and close parenthesis and a semicolon.
| | 04:10 | Close the code block, and this
page is done. So let me save it.
| | 04:14 | Let's try it out in Dreamweaver.
| | 04:16 | I'll open up the index.php page from
the site root, go into Design view and
| | 04:22 | then Live view, and now I should have just the
single post here on the homepage. It looks good.
| | 04:29 | Let's try our search, and I'll enter in
a value and then hold down the Ctrl key
| | 04:34 | while I click Search.
| | 04:36 | So I get the search results that
follow that link, and here's our
| | 04:40 | multiple search results. Okay.
| | 04:42 | So we have successfully limited our
index page to showing just the most recent
| | 04:47 | posts while displaying multiple entries on
other WordPress pages throughout the site.
| | 04:52 | Now that you've got a handle on
managing full posts, you are ready to tackle
| | 04:56 | partial posts, or excerpts.
| | Collapse this transcript |
| Controlling post excerpts| 00:00 | When a client frequently updates the
blog, sometimes it's better to show just
| | 00:05 | a portion of several posts with an
option to read the full post just a click
| | 00:09 | away rather than the WordPress default, which
is to show several posts in their entirety.
| | 00:15 | In WordPress, these post
portions are known as excerpts.
| | 00:20 | Setting up your blog page to show
excerpts rather than full posts is
| | 00:24 | actually dirt simple,
| | 00:26 | but getting WordPress to display your
excerpts the way you want them to, that
| | 00:30 | takes a little bit more effort.
| | 00:32 | However, you can handle all
the coding right in Dreamweaver.
| | 00:36 | First, let's take a look
at the default behavior.
| | 00:40 | I have opened my site root
index.php file here in Live view.
| | 00:45 | If we scroll down, we
see we've got one big post.
| | 00:48 | Now, there's just one post here, and
that's because in the previous video
| | 00:54 | we used the query_posts function, which you
see here on line 5, to limit the post just to 1.
| | 01:00 | I'm going to expand that to 3, save the
file, and now let's go back to index.php
| | 01:09 | and refresh Live view.
| | 01:13 | Now, when I scroll down the
page, I have a number of posts.
| | 01:17 | Now, I only have a couple of posts in
here, so my limit of three is not reached.
| | 01:23 | Now let's go back to the index.php.
That's located in the Themes folder.
| | 01:28 | You maybe wondering if you've got a
number of different index.php files opened,
| | 01:33 | how do you tell the difference from them?
| | 01:34 | Well, on the coding toolbar,
there is the Open Documents button.
| | 01:38 | If you click that, you'll see a list of
all your opened documents with complete
| | 01:43 | path names and the check mark next to
the one that's currently being displayed.
| | 01:47 | It's a really handy feature and
sometimes when I have multiple index pages
| | 01:52 | opened, which you will, in
WordPress, this is invaluable. Okay.
| | 01:56 | So as I said, we are in
the themes index right here.
| | 02:00 | Now, let's switch the blog
page from full post to excerpt.
| | 02:05 | As I said, it couldn't be simpler.
| | 02:07 | Here in the center of the page, in the
div with a class of entry, we have the
| | 02:13 | PHP function the_content.
| | 02:14 | I'm going to change that to the_
excerpt, and save it, and voila!
| | 02:20 | as the French will say. Let's go back
to our index.php from the site root,
| | 02:25 | refresh, and now we see
just excerpts of the files.
| | 02:30 | Now, this is the default
presentation for excerpts.
| | 02:33 | You will notice that there is a limit
of a specific number of words. It's 55,
| | 02:39 | in case you are wondering. And it displays
an ellipsis in the square brackets at the end.
| | 02:45 | Now, you might think that the
ellipsis would be clickable, but it's not.
| | 02:49 | To see the full post, you have
to go up and click on the title.
| | 02:52 | You should also realize that there's
something else that's happening that may
| | 02:56 | not be immediately obvious, but one
result of using the excerpt function is that
| | 03:01 | all HTML tags are stripped from the text.
| | 03:04 | Now, let's see how we can
customize the excerpt in a couple of ways.
| | 03:08 | We will start by modifying
the links of the excerpt.
| | 03:11 | To do that, we will need to open up
the function.php page that's found
| | 03:16 | within our theme folder.
| | 03:17 | I'll open it and then go into code.
| | 03:22 | Now I already have one custom function
here that registers the sidebar, so we
| | 03:26 | are going to add another one.
| | 03:28 | Make sure you position your cursor
right within the same PHP code block. And
| | 03:33 | now to help me do this, I'm going to
go and open up a file from my exercise
| | 03:38 | files that is called functions_code.php, and
that is found in the Chapter 2, 02_02 folder.
| | 03:50 | So let's open up the functions code
there, and we are going to select
| | 03:54 | function new_excerpt_length.
| | 03:56 | Make sure you get the line that
says add_filter if you're working from
| | 04:00 | the exercise files.
| | 04:02 | I'm going to copy that, switch back
over to functions.php, and paste it in.
| | 04:07 | Now, what this code is doing is
it's setting up a new function called
| | 04:12 | new_excerpt_length with an argument variable
of length and it's returning the value of 7.
| | 04:18 | That's the number of words that will be
used for the excerpt. Let's try it out.
| | 04:23 | So I'm going to save functions.php, go
back to my index.php file, press Refresh,
| | 04:32 | and there is my seven words in
each excerpt. All right!
| | 04:36 | Seven might be just a little bit too short,
| | 04:40 | so let's head back to functions.php
and change that 7 to let's say 40.
| | 04:48 | Okay, so we will save that value and
back to my index.php, refresh Design view,
| | 04:55 | and I am not going to count
them, but it looks like forty words.
| | 04:58 | So the other thing we might want to
change is this unclickable ellipsis here.
| | 05:03 | Let's add a custom trailing phrase to
replace the easily overlooked ellipses
| | 05:08 | that we see here, and at the
same time, make that linkable.
| | 05:11 | Let's head to functions_code.php and
pick up this top function along with the
| | 05:20 | add_filter line, copy that, and move
to our functions.php file. And then I'll
| | 05:26 | add a new line return, and
paste it in, select, and tab over.
| | 05:33 | What this code is doing is creating
a function called new_excerpt_more.
| | 05:37 | It pulls in a global variable, post, and
then it returns what will appear at the
| | 05:43 | end of the excerpt. And what will
appear at the end of the excerpt now is an
| | 05:48 | ellipsis followed by a space, followed
by an anchor tag with a target of the
| | 05:54 | permalink of the post's ID, so you
can click on Read more, which is the text
| | 05:59 | you see within the anchor tag
and it will go to that post.
| | 06:02 | We will cover how add_filters work in a
later video, but here you can see that
| | 06:07 | we have the add_filter function
that is filtering the default function
| | 06:11 | excerpt_more with our new
function new_excerpt_more.
| | 06:15 | Again, save, head back to
index.php and refresh Design view.
| | 06:20 | So let's scroll down, and
there is our new Read More link.
| | 06:25 | I'm going to go ahead and press
Ctrl and then click on it to follow the links.
| | 06:32 | We go to our full-page post.
| | 06:35 | This same type of customization is
applied wherever excerpts are used, as on the
| | 06:40 | search results page.
| | Collapse this transcript |
| Implementing post-driven pages| 00:00 | Posts generally appear on a site's
homepage or in a separate blog page, and are
| | 00:05 | all stored separately, and can be
displayed chronologically or categorically.
| | 00:11 | Pages, on the other hand, can have a
custom design, but there generally is only
| | 00:15 | one entry, which can be easily updated.
| | 00:18 | But what if your client
requires a hybrid of these two types of
| | 00:22 | user-contributed content?
| | 00:24 | A page with a custom look and feel that
can display multiple posts. I call this
| | 00:29 | the post-driven page, and I'll show
you how to build them in Dreamweaver and
| | 00:33 | WordPress with the help of a free
plug-in called List Category Posts.
| | 00:38 | So let's flip over to
WordPress and install that plug-in.
| | 00:42 | I'll go to Plugin > Add New, and search for
lists category posts that you see there.
| | 00:51 | Click Search Plugins and it
comes up at the top of the list.
| | 00:55 | I'll click Install Now. I do indeed, so
I'll click OK. And let's activate the plug-in.
| | 01:01 | Now this plug-in was developed by
Fernando Briano, and you can see his work at
| | 01:07 | his site picandocodigo.net.
| | 01:10 | It's a very flexible plug-in
with a good number of parameters.
| | 01:15 | As the name implies, with it you can
easily create lists of posts by categories.
| | 01:20 | But you can also expand those lists to
show excerpts or even full post content.
| | 01:26 | Here's how it works.
| | 01:27 | We'll go to Posts >
Categories to create a new category.
| | 01:31 | I'm going to call this Working the future.
| | 01:35 | Now the slug, as it explains here, is the
URL-friendly version of the name, and you
| | 01:39 | need to put hyphens or underscores in it;
| | 01:42 | I'm going to use hyphens.
| | 01:43 | That's the standard way that
WordPress handles separate words.
| | 01:47 | So working-the-future.
| | 01:51 | We have no parent here, so let's scroll
down a little bit and click Add New Category.
| | 01:57 | And now you see my category in addition
to the default category of Uncategorized.
| | 02:03 | Now my category is defined, but before
I leave this page, I need one more bit
| | 02:07 | of information, and that's the ID that
WordPress has assigned to that specific category.
| | 02:13 | So the way you find that ID is to just
hover over the name of the category and
| | 02:18 | then look down in the Status Bar where
you'll see the path to the file that will
| | 02:23 | give you that category. And one of the
URL arguments is tag_IDm and you can see
| | 02:29 | that that is set to 4.
| | 02:31 | So that's our ID for the
category Working the future.
| | 02:35 | Okay, with that in mind, we can
now go in and create a new page.
| | 02:40 | I'll choose Pages > Add New, and we'll
enter in a future working title. And I'm
| | 02:48 | going to set my template to a new
template that I had created that's part of
| | 02:52 | the theme called Working-the-Future.
| | 02:55 | Now we're ready to bring the plug-in we
installed, List Category Posts, into play.
| | 03:00 | Instead of entering the standard text
into the editor for this page, we'll use
| | 03:04 | the plug-in's shortcode.
| | 03:06 | And that is a square bracket, catlist.
That's the keyword for the shortcode, short for category list of course,
| | 03:14 | and then an argument of id=4, which you'll recall
is the ID for the Working-the-future category.
| | 03:23 | So we close this off with another square bracket
| | 03:27 | and we're ready to publish this page. And let's
take a look at it. And there's Working the Future;
| | 03:35 | however, it's just presented as a list item.
| | 03:38 | So let's head back to the Dashboard and
amend our shortcode to add another argument,
| | 03:43 | and that is space, content=yes.
| | 03:48 | You can find all of these parameters
in the documentation for this plug-in.
| | 03:52 | So now I'll click on Update and View
page, and there is the full list.
| | 03:59 | All right! It looks pretty good.
| | 04:03 | Let's head back. Let's take one
more step to make my custom page easily
| | 04:07 | accessible, by adding it to the menus.
| | 04:11 | So I'll go down to Appearance > menus.
| | 04:13 | Now I've already created a main menu
here, but I'm going to select that one and
| | 04:20 | then add it to the menu.
| | 04:22 | And rather than have the full Working
the Future title, let's go ahead and just
| | 04:27 | shorten that somewhat to
Working with an ellipsis.
| | 04:31 | Click Save menu and now
let's take a look at the site.
| | 04:36 | There's Planets and there's
our Working menu. All right!
| | 04:39 | It's looking pretty good.
| | 04:40 | You'll find that WordPress is a very
flexible system, that through its core
| | 04:45 | extensibility, has become even more
adaptable, so that you can work with posts,
| | 04:50 | pages, and even hybrids of the two.
| | Collapse this transcript |
|
|
3. Building Page TemplatesCoding a basic template| 00:00 | The ability to create custom page
templates is one of the key features that
| | 00:04 | makes WordPress suitable for building
web sites that are more than just a blog.
| | 00:09 | A basic custom template is
almost ridiculously easy to create,
| | 00:14 | and in this video, we'll do just
that, as well as customize the content to
| | 00:19 | distinguish the custom
page from our default page.
| | 00:22 | Later in this chapter, you'll see how
to modify the header, sidebar, and CSS of
| | 00:27 | a custom page template to further set it apart.
| | 00:30 | But let's start with the core page first.
| | 00:33 | So now I'm going to go to my tpa folder,
which is within themes, and open up index.php.
| | 00:42 | We'll use that as my base, starting in
Code view. And now I'll move my cursor to
| | 00:47 | the top of the file, click Return,
and then enter in a new PHP code block.
| | 00:53 | And then within that PHP code block,
enter in a PHP comment in the style of /* */.
| | 01:03 | Now all I need to add within that
comment is a simple name-value pair.
| | 01:09 | The name, actually a name phrase, is
the term Template Name, both titlecase--
| | 01:15 | that's important--followed by a colon,
and now the name of our template,
| | 01:19 | which I'm going to call Explorers.
| | 01:22 | Now let me save this as explorers.php.
And I mentioned before that I was going to
| | 01:32 | customize the content page a little,
| | 01:35 | so what I'm going to do is remove my
query_posts function, which limits the post
| | 01:40 | to 3, and the
corresponding wp_reset_query function.
| | 01:47 | Okay, let me save explorers.php again.
| | 01:51 | Now we're ready to go over to
WordPress's Pages section and create a new page
| | 01:56 | based on this template.
| | 01:57 | From the Dashboard go to Pages > Add New.
| | 02:02 | Explorers is the frequent flyers club of TPA.
| | 02:06 | So I'm going to put in a Welcome page
here and then just a bit of text: "Welcome
| | 02:11 | to TPA Explorers, where
your space miles go further."
| | 02:22 | Now we want to change the template from
the Default Template to Explorers, which
| | 02:28 | was just dynamically added by
WordPress, and click Publish.
| | 02:34 | Now let's take a look at that page by
Viewing Page, and there's our page, in
| | 02:39 | pretty much the standard layout.
| | 02:41 | You can see, in very simple
text, the single entry here.
| | 02:45 | So that's basically
identical to the home page right now.
| | 02:48 | Let's take a little time to change
the contents section, starting with the
| | 02:52 | title, which we no longer need to make a link.
| | 02:55 | So back to Dreamweaver. On my Explorers
page, I'm going to remove the anchor tag
| | 03:02 | that surrounds title,
both the opening and closing.
| | 03:07 | Next, let's make sure that we're showing
the content instead of just an excerpt,
| | 03:14 | so I'll change the excerpt to the content.
| | 03:16 | Now because this content could spread
over multiple pages, let's add in the
| | 03:22 | wp_link_pages function to add
navigation for longer paginated posts.
| | 03:28 | So right after the div with the class of
entry and before the div with the class
| | 03:33 | of postmetadata, I'm going to
enter another PHP code block,
| | 03:39 | and within that code block, put in a
function wp_link_pages with an open and
| | 03:47 | close paren, followed by a semicolon.
| | 03:50 | Now this function takes an array of arguments,
| | 03:53 | so we'll enter in array and then open
and close paren. And the arguments
| | 04:00 | within that ren, there are two,
| | 04:03 | the first one sets up the text that
will display before the pagination
| | 04:08 | elements are shown.
| | 04:09 | So that's entered as the word before,
in single quotes, followed by equals,
| | 04:16 | and then a greater than sign, and
then again in single quotes, the word Pages.
| | 04:24 | I'll put a colon there and a space.
| | 04:27 | So that will be the static text that
will appear before the paginated elements.
| | 04:31 | Now after the closing single quote, put
a comma for the second argument, and
| | 04:37 | this argument determines the
form of those paginated elements.
| | 04:40 | Will it be the word "next" or will it
be a series of numbers, like 1, 2, 3
| | 04:45 | for pages 1, 2, and 3?
| | 04:48 | So again, single quotes with the key
phrase next_or_number and then a equals
| | 04:56 | sign and greater than and opening
single quote, the word Number, close the
| | 05:03 | single quote, and we're done.
| | 05:06 | So just to refresh, the
function name is wp_link_pages.
| | 05:12 | It takes an array of arguments.
| | 05:14 | There are two arguments:
before and next_or_number.
| | 05:18 | Now finally, since most of the
pages in this section are going to be
| | 05:22 | policy-oriented about a specific service
for our frequent space fliers, we won't
| | 05:27 | need the post meta information:
| | 05:30 | the tags, categories, and so on.
| | 05:32 | So let's remove the div with postmetadata in it.
| | 05:37 | I'll place my cursor within the div
and then click the Select Parent Tag from
| | 05:41 | the Coding toolbar and then
press Delete to remove it entirely.
| | 05:45 | Let me clean up that little extra line.
| | 05:47 | Now there's one more thing I need to
do before we can go preview the file,
| | 05:52 | and that is to go down to the get_
sidebar function and add in the name of the
| | 05:57 | sidebar that I want to insert here.
| | 05:59 | So I'll put in a single quote, and
when I do that, Dreamweaver CS5.5
| | 06:04 | automatically puts in two single quotes
for you. And then type in the ID of the
| | 06:09 | sidebar, which is explorers.
| | 06:14 | Okay, I'm ready to save my page with
a Ctrl+S or a Command+S, and now let's
| | 06:20 | preview it in the browser.
| | 06:21 | So I have the same page up. I'll
just hit Refresh, and you can see other
| | 06:26 | information is now gone, all the postmetadata.
| | 06:30 | You can also tell it's not an excerpt
because there is no Read More link at the end.
| | 06:34 | Of course, you can do tons more
customization, but the foundation for the custom
| | 06:39 | page template has now been created and
you're ready to further customize the
| | 06:44 | page with a unique header.
| | Collapse this transcript |
| Changing a template header| 00:00 | While the same header across all
pages in a web site is fairly common,
| | 00:05 | sometimes you need to modify the header to
make a particular site section really stand out.
| | 00:10 | In this video, I'll show you how to
change the code in the header.php file in
| | 00:16 | Dreamweaver to accommodate any
number of custom page templates.
| | 00:20 | So let's open up header.php from our
theme folder, tpa. I'll switch to Code view.
| | 00:27 | As you can see, the header area has actually
already been adapted once with an if-else clause.
| | 00:33 | So I'll scroll down a little bit here
so you can see the entire body area.
| | 00:38 | This is set up now so that if there is
a page template named working_future.php,
| | 00:44 | as you can see on line 31, it
will insert two specific images:
| | 00:49 | logo_working.png and working_name.gif.
| | 00:53 | Otherwise, if it's not this specific
page template, show us the default images:
| | 01:00 | logo.png and tpa_name.gif.
| | 01:04 | Let's expand the conditional
statement to check for another template,
| | 01:08 | our new Explorers template.
| | 01:10 | The easiest way to do that is to copy
this if statement that we see here all
| | 01:16 | the way down to, but not
including, the closing PHP bracket.
| | 01:20 | Then I'm going to just add a
little bit of whitespace here so we can
| | 01:24 | concentrate on the code we're
working on, paste that right in the middle,
| | 01:27 | and I'm going to change this else
statement to an else-if statement, and we'll
| | 01:33 | have it check the condition within the
parentheses using a WordPress function
| | 01:39 | called is_page_template,
| | 01:41 | as you see employed in the if
statement up above. And the name we're
| | 01:47 | looking for here is the name of
our template file, explorers.php.
| | 01:53 | Now let's change one of the images
to identify our page more clearly.
| | 01:58 | We'll keep the same logo, but
let's change the underlying name,
| | 02:02 | so instead of spelling out Trans
Planet Airlines, it says explorers.
| | 02:07 | So I'll change it from tpa_
name.gif to explorers.gif.
| | 02:13 | Now I happened to know that this
has a different height as well,
| | 02:16 | so I'm going to change the height from 37 to 48.
| | 02:21 | Okay, let's get it rid of our additional
spaces here, save our page, and let's preview it.
| | 02:33 | So I'll move back to my index.php page and
toggle in and out of Live view to make
| | 02:39 | sure that we have the most recent version.
| | 02:41 | There you can see my new
Explorers navigation item.
| | 02:46 | So I'll press the Ctrl key, Command
key on the Mac, and click on that, and now
| | 02:52 | you can see that our header has
changed specific to this template. And we
| | 02:56 | have TPA Explorers now.
| | 02:59 | If I go back to any of the other
pages, like Planets, you'll see different
| | 03:05 | headers for those as well.
| | 03:07 | You can see that the default header is
showing and if I click on the default
| | 03:11 | header to go back to my
homepage, it's there as well.
| | 03:16 | So it's only when we go into
Explorers that we get the custom header here.
| | 03:20 | Of course you can do whatever you
need to to transform your header to work
| | 03:25 | with your custom page using
this conditional technique.
| | 03:28 | Just add your code in the proper if or
else-if clause and you're good to go.
| | Collapse this transcript |
| Adding a custom sidebar| 00:00 | Just as you can create custom content
and headers for a page template, you can
| | 00:05 | also make a specific sidebar.
| | 00:07 | While you could use the if-else
conditional technique demonstrated in the
| | 00:11 | "Changing a template header" video when it
comes to sidebars, the WordPress widget
| | 00:17 | functionality offers another way to go.
| | 00:19 | In this video, I'll show you how to
define another sidebar and display it only
| | 00:25 | in a specific custom template.
| | 00:27 | Then I'll show you how to fill
it with content from within the
| | 00:31 | WordPress dashboard.
| | 00:32 | To start, we need to open up the
functions.php page in order to register another sidebar.
| | 00:39 | So here's my functions.php page within my theme.
| | 00:43 | I'll double-click and go to code. And
basically, what we're doing is exactly the
| | 00:49 | same thing as we do in this
very first function up here.
| | 00:52 | So I'm going to copy this code here
and then create another line or two and
| | 01:00 | place it in the middle by pasting it
in and just change a couple of values.
| | 01:04 | So we're still checking to see if the
register sidebar function exists and if it
| | 01:10 | does, we're going to register our sidebar.
| | 01:12 | Now let's change the name and ID of the sidebar.
| | 01:16 | We'll make the name Explorers with an
uppercase E, and the ID we'll make
| | 01:26 | explores with a lowercase e.
Everything else we leave the same.
| | 01:30 | So I'm going to save this page.
| | 01:33 | The new sidebar will pull its structure
from a page called sidebar-explorers.php,
| | 01:41 | which we can create from
the existing sidebar.php page.
| | 01:46 | So let's go over to our Files panel
again, open up sidebar.php, and I'm going to
| | 01:54 | save it by choosing File > Save As.
And we're calling it sidebar-explorers.
| | 02:03 | This is a standard WordPress convention.
| | 02:08 | I'll click Save and now again, I
just need to make one small change.
| | 02:13 | We'll keep everything the same
except I'm going to change the dynamic
| | 02:17 | sidebar that we see here, from Sidebar
Widgets to our ID, which is, you'll recall, Explorers.
| | 02:26 | Okay, all of the code's in place. Now
let me save my new page and we're ready to
| | 02:31 | work on the content.
| | 02:33 | So let's create one more page in WordPress so
that you can see the effect we're going for.
| | 02:38 | From the Dashboard, I go to Pages >
Add New, and we'll give this a title of
| | 02:43 | Membership Benefits. And let's
quickly enter in some content.
| | 02:51 | Now let's change the default template to
our Explorers template and publish that page.
| | 02:57 | Next we need to create some specific
content that will go into our sidebar, and
| | 03:02 | that content will be a custom menu.
| | 03:04 | So let's go to Appearance > menus, click
the plus button to add a new menu, and
| | 03:12 | we'll call this Explorers.
| | 03:16 | Create the menu and then scroll down a
little bit here to our Pages option and
| | 03:22 | check both Membership Benefits and
Welcome, and add those to the menu.
| | 03:28 | Now it comes in alphabetically, but you
can drag and drop them to reorder. And
| | 03:32 | let me save the menu.
| | 03:34 | So how do we get this new menu into our sidebar?
| | 03:37 | Well, we have a widget
that's built-in that can do that.
| | 03:41 | So we go to Appearance > Widgets, and
here you see the first sidebar, which is
| | 03:47 | named Sidebar Widgets.
| | 03:48 | So I'll collapse that, and here you see the
custom one we've just added called Explorers.
| | 03:52 | I'll expand that. And now let's bring in
our Custom menu widget, and we'll give it
| | 04:00 | the title of Explorers. And make sure
that we are selecting the menu, Explorers,
| | 04:08 | which happens to be
alphabetically the first one listed,
| | 04:11 | so that's by default but you might
want to check that. And then click Save.
| | 04:16 | Okay, let's head on over to
our site and there's my homepage.
| | 04:21 | Now, let me click on Explorers, and
there is our new Explorer page, complete
| | 04:26 | with custom sidebar.
| | 04:28 | We can, of course, now add any other
widget we might want to our Explorers sidebar.
| | 04:33 | And now you're ready to see how you can
add custom CSS styling into the mix for
| | 04:37 | your page templates.
| | Collapse this transcript |
| Setting template styles| 00:00 | In the earlier videos in this chapter
you've seen how to specify the content,
| | 00:04 | header, and sidebar for a custom
page template. But how do you style it?
| | 00:09 | There are a number of techniques
available, but we're going to concentrate on
| | 00:13 | one based on WordPress-generated code.
| | 00:16 | Let me show you what I mean
by going into Live Code view.
| | 00:20 | I'm going to go ahead and enable
Follow Links Continuously from the Live view
| | 00:24 | options dropdown. And now let me
scroll over a bit and collapse this panel so
| | 00:32 | we can see what's going on.
| | 00:34 | I'm going to click onto the Explorers
link here and once I do, you'll see in
| | 00:41 | the body tag that's on line 19,
one of the classes that is added is
| | 00:46 | page-template-explorers-php.
| | 00:50 | If we look at a standard page, like the
homepage, that body class is not there.
| | 00:59 | So what we want to do is use this class
as our lead selector, so I'm just going
| | 01:05 | to select it and then copy.
| | 01:07 | Now let's go to style.css from our
Related Files toolbar, and I'm going
| | 01:16 | to scroll down all the way to the
bottom where I have some styles for
| | 01:19 | another template file.
| | 01:21 | And I'm going to put it in one for Explorers.
| | 01:24 | I like to add in a CSS comment here
to make it easy to find these styles,
| | 01:29 | so /* call this Explorers */ close that out.
| | 01:36 | Now I'm going to put a period
| | 01:38 | as the class indicator and then paste
in my copied selector. And now I want to
| | 01:44 | target the content area first.
| | 01:47 | What we're going to do is we're going
to float both the content area and the
| | 01:53 | widget area left, and this will have
the effect of moving the sidebar over to
| | 01:58 | the right-hand side.
| | 02:00 | So I'll further target the selector by
entering in #content, and that's my main content area.
| | 02:07 | Now we want to do a second selector
in the same group, so I'm just going to
| | 02:11 | copy the page-template-explorers-
php portion of that and then paste it in.
| | 02:18 | And now we want to target the sidebar, which
you might recall has a class of widget-area.
| | 02:25 | So I'll open a curly brace, put in
by property, choose float:left. And let's
| | 02:34 | close the curly brace.
| | 02:35 | Now you'll notice that when my screen
refreshes, there is my sidebar over on the
| | 02:40 | right, but there's a little bit of an issue:
| | 02:43 | the bullets of the list item are
expanding beyond where I want them to.
| | 02:47 | So let's go ahead and put in a
margin-left property to handle that.
| | 02:52 | Let's head back to our Split view. And I'm
going to add in another targeted area, but I
| | 02:57 | am going to continue to use this page-
template-explorers-php selector. And I
| | 03:04 | also want to grab widget area, because
I'm going to target the unordered list
| | 03:10 | within that widget area,
so you might as well have them both.
| | 03:13 | I'll copy that and then press Return
after the closing curly brace, paste in
| | 03:19 | the start of my selector, and add a ul.
| | 03:22 | So let's open the curly brace,
press Return, and then enter in margin-left:
| | 03:27 | and let's make it 20 pixels, okay.
| | 03:33 | We'll close off the curly brace.
| | 03:34 | Now let's click back into Live view, and
it looks like it's lining up pretty well.
| | 03:39 | All right! All I need to do now is save my
style sheet, and we're good to go.
| | 03:44 | There's really no limit to the degree
you can style a custom page template.
| | 03:49 | Just remember to incorporate the
dynamically added body class, which you can
| | 03:53 | uncover via Dreamweaver's Live Code view.
| | Collapse this transcript |
|
|
4. Integrating PHP CodeWorking with WordPress functions| 00:00 | So far in this course, we have mostly
focused on page structure and styling.
| | 00:04 | Now it's time to take a closer look at
the engine that makes WordPress go, PHP.
| | 00:10 | WordPress is so robust
| | 00:11 | it's easy to forget that it is, top to
bottom, just another PHP application.
| | 00:17 | To keep it flexible and extensible,
most of WordPress' power comes from an
| | 00:22 | impressive series of functions.
| | 00:23 | In this movie we will look at
WordPress' built-in functions, as well as the main
| | 00:28 | pathway for adding custom code.
| | 00:31 | Let's look at an example taken
from our own theme's index.php page.
| | 00:36 | So I will open that up, go into Code view.
| | 00:40 | Notice the very first function
call here are on line two, get_header.
| | 00:44 | There are numerous other built-in
ones, like have_posts on line five or
| | 00:49 | posts_class in the article tag on line
eight, as well as the id, which is used to
| | 00:56 | provide the id for that article tag.
| | 01:00 | To understand more about the built-in functions,
let's go to WordPress.org and do a quick search.
| | 01:06 | So if I click into the Search
WordPress.org box and enter in "get_header," click
| | 01:12 | Go, the very first entry in the
response will give us all the details that we
| | 01:18 | need to know about it.
| | 01:19 | And this is part of
WordPress' function reference.
| | 01:24 | So when I click on it you can see that
the page is broken down into a General
| | 01:28 | Description, Usage, Parameters, and Examples.
| | 01:33 | If you're really curious about how a
function is coded, go down a little bit
| | 01:38 | further until you find the Source File
header and there you will see the path to
| | 01:42 | where the function is located
in your WordPress installation.
| | 01:46 | So you can look it up in
Dreamweaver or click on it here.
| | 01:50 | Investigating the functions
is almost always rewarding.
| | 01:53 | For example, when I was preparing for
this course I looked up the post_class
| | 01:58 | function, which is responsible for
inserting pertinent classes into a tag.
| | 02:05 | And under the Parameters I found a way
to inject a custom class into a post tag
| | 02:11 | just by passing an argument.
| | 02:12 | I think that's awesome.
| | 02:14 | Built-in functions are great, but they
don't always do what you want them to.
| | 02:18 | And it's not a good idea to customize
the built-in functions, for two reasons:
| | 02:23 | first, you may not be sure what other
areas you are impacting, and second,
| | 02:28 | because your changes will be
overwritten the next time you update WordPress.
| | 02:32 | However, WordPress makes it possible
to add custom functionality on the theme
| | 02:36 | level via the cleverly named file functions.php.
| | 02:40 | If you've been following the course
linearly, you've already seen us add code to
| | 02:45 | the functions.php file.
| | 02:47 | So let's take a closer look at how it works.
| | 02:50 | I'll go to the Files panel, locate
functions.php, and double-click to open it.
| | 02:57 | The functions.php file in your
theme is used to add or modify existing
| | 03:02 | elements like sidebars.
| | 03:04 | Here you can see right up top that the
register_sidebar function is used twice
| | 03:09 | for adding two custom sidebars.
| | 03:12 | Notice on line 2 and line 14 that the
first step is often to verify that the
| | 03:17 | function in question exists.
| | 03:19 | This is highly recommended, as it will
eliminate any function-doesn't-exist
| | 03:24 | errors should a file not load properly.
| | 03:27 | In this case the new arguments
are passed to a built-in function,
| | 03:31 | register_sidebar, to create the custom sidebars.
| | 03:35 | Similar functions exist for
registering settings, post types, taxonomies, and
| | 03:40 | widgets, among others.
| | 03:42 | Now that you have seen how to explore
the built-in functions and begin to use
| | 03:45 | the functions.php file to customize
your own, you're ready to investigate
| | 03:50 | WordPress hooks for actions and filters.
| | Collapse this transcript |
| Hooking into PHP functions| 00:00 | WordPress functions are coded to have
what are referred to as hooks, so that they
| | 00:05 | can be easily customized.
| | 00:07 | There are two basic types
of hooks: actions and filters,
| | 00:11 | the latter of which we've used
repeatedly in our functions.php file so far.
| | 00:16 | Let's take a closer look at the code
to create a filter hook first and then
| | 00:20 | add an action hook.
| | 00:22 | As the name suggests, a filter shifts
and frequently modifies the data before
| | 00:28 | it's displayed in the browser.
| | 00:30 | I have opened now my functions.php file
as you find within the tpa theme folder,
| | 00:36 | and I am going to scroll down.
| | 00:39 | Here you see two filter hooks.
| | 00:41 | A filter hook has two parts: the
function and the add_filter statement.
| | 00:47 | The filter function is often used to
define new settings for a built-in function.
| | 00:52 | Let's take a look at the new_excerpt_
length function that we see starting on line 27.
| | 00:57 | This is a pretty basic function
that changes the length of the excerpt.
| | 01:01 | By default it's set at 55.
| | 01:04 | With the function new_excerpt_
length, we are changing that value to 40.
| | 01:10 | Right after we define the new function, we
call the add_filter to hook it into place.
| | 01:15 | add_filter takes two arguments: the
first argument names the WordPress function,
| | 01:20 | while the second specifies the
custom function that's going to filter it.
| | 01:25 | The same basic concept can be
applied to our second custom function
| | 01:28 | new_excerpt_more, which changes the
output at the end of an excerpt from being a
| | 01:34 | bracketed unlinked ellipsis to, in
this case, a linked phrase read more.
| | 01:40 | Again, the add_filter function on
line 36 names the built-in WordPress
| | 01:45 | function excerpt more and then the new
function that's going to filter it, new excerpt more.
| | 01:51 | An action hook is different from a
filter hook in that the function is triggered in
| | 01:56 | response to a particular event,
| | 01:58 | like a post being published for
example, as opposed to changing how data is
| | 02:03 | presented, which is what filter hooks do.
| | 02:06 | We don't currently have any action hooks in
our functions.php file, so let's add one.
| | 02:12 | If you've ever looked at the code
for a homepage generated by WordPress,
| | 02:16 | you'll notice that WordPress by
default injects a good number of meta-type
| | 02:21 | code in the head section.
| | 02:23 | Not all of them, in my
estimation, totally necessary.
| | 02:26 | Let me show you what I mean.
| | 02:27 | Let's go over to our index.php from
the site root. We are in Live view and I
| | 02:33 | want to enter into live code now.
| | 02:37 | Then here's a perfect example right up
top, a wlwmanifest-type link, and then
| | 02:44 | right after it is the
meta tag with the generator.
| | 02:48 | Well, I think I want to
get rid of both of those.
| | 02:51 | So let's create an action
hook that will remove them.
| | 02:55 | Go back to our functions.php page, and
I'll go right after the last add_filter,
| | 03:01 | staying within the PHP block, Tab in,
and start my new function with the keyword
| | 03:07 | function, and then give it a name
remove_header_info, put our opening and
| | 03:17 | closing curly braces, and then in
the middle of it I'm going to use another
| | 03:23 | WordPress function called remove_action.
| | 03:27 | This takes two arguments. The first
argument is the name of the WordPress
| | 03:31 | function that inserts the code.
| | 03:33 | In this case, it's wp_head,
which we put in single quotes.
| | 03:38 | Then after the closing single quote put a
comma to enter your second argument.
| | 03:44 | This is the code that you want to remove.
| | 03:46 | All of the names like this are
listed for you in the WordPress Codex.
| | 03:51 | So I'm typing in wlwmanifest_link. And
let's close our parentheses and put a semicolon.
| | 04:00 | We are going to repeat
that same line. Very similar.
| | 04:03 | So remove_action(wp_head), followed by the
code we want to remove, which is wp_generator.
| | 04:17 | Close off our parentheses and semicolon.
| | 04:19 | And I would just like filter hooks
have an add_filter to activate them,
| | 04:23 | we have an add action
function that we need to bring in.
| | 04:27 | Within its parentheses, again, there are
two arguments. The first is what is the
| | 04:33 | trigger for this action? And the trigger
for this is a function called init, and
| | 04:38 | it's encased in single quotes, followed
by a comma. And the second argument
| | 04:44 | is the name of the
function that should be added.
| | 04:47 | Of course, it's going to be our new
custom function name remove_header_info.
| | 04:51 | All right, we will close our parentheses
and semicolon and save our page.
| | 05:01 | Now let's head over to index.php. Here are
the two tags that we are hoping to get rid of.
| | 05:09 | Let's refresh the page
and the tags are now gone.
| | 05:14 | How do you know which actions
or functions can act as triggers?
| | 05:18 | The WordPress Codex has a great list
called the Action Reference and once you
| | 05:22 | go to that page, you can scroll down
and you'll see just tons of available
| | 05:27 | actions that you can use.
| | 05:29 | The more you investigate them, the
more you'll find that filter and action
| | 05:33 | hooks can take you a long way towards
creating just the site you and your
| | 05:37 | client are looking for.
| | Collapse this transcript |
| Inserting PHP code in posts| 00:00 | So far in this chapter, we've examined
how to use custom PHP functions on the
| | 00:05 | backend of WordPress.
| | 00:06 | But what if you need to include PHP-
generated output on the front end, in a post or page?
| | 00:13 | For that degree of control you'll
need to turn to one of the many plug-ins
| | 00:17 | written for that purpose.
| | 00:19 | In this video we will take a look at
one of them that turns WordPress Visual
| | 00:23 | Editor into a PHP engine.
| | 00:25 | However, before we can include
our PHP code, we need to write it.
| | 00:30 | Dreamweaver is perfect for setting up
your initial PHP code and testing it.
| | 00:34 | Now I have just such a code in the
exercise files and I will open it now. It's
| | 00:40 | called php_example.php.
| | 00:44 | And you can find it in
the Chapter 4/04_03 folder.
| | 00:49 | Now I have some text here that
I'm going to be using in my message.
| | 00:53 | I just included it in my PHP file.
But the real workhorse part of this is this
| | 00:59 | custom PHP function that you see here.
| | 01:02 | Let me just walk you through it very quickly.
| | 01:05 | It sets up a series of variables.
| | 01:07 | The first is theTarget on line 11, and
theTarget is set using the php mktime, or
| | 01:15 | make time function. That sets
the target as March 31, 2022.
| | 01:21 | Today is set to PHP's basic time function.
| | 01:25 | The difference between the two
is set to the target minus today.
| | 01:30 | Then the days, which will calculate
the number of days, uses the formula that
| | 01:34 | you see here, using a PHP number
format function to format the number when
| | 01:40 | it's returned, where we take theDiff,
that is, the number of days, and divide it
| | 01:45 | by the number of seconds, times the
number of minutes in an hour, times the
| | 01:49 | number of hours in a day.
| | 01:51 | Finally, there is a print statement
that outputs our texts when Venus tanning
| | 01:57 | sessions will be available, and they
will be available on March 31 in 2022.
| | 02:02 | So it would give you an idea of how
many days you have to wait before you can
| | 02:06 | take advantage of that.
| | 02:07 | So let's go to Design view here, and I am
going to save this file in my PHP site.
| | 02:15 | So I will choose File > Save As, go to
the site root, and just save it there.
| | 02:21 | No need to update any links.
| | 02:24 | Now let's enter into Live view to make
sure that our PHP code is working, and
| | 02:28 | there you have it. Venus tanning
sessions are a mere 3,717 days away.
| | 02:35 | So we have our code.
| | 02:36 | All right, looking good code-wise.
| | 02:38 | Now let's switch over to
WordPress and install our plug-in.
| | 02:42 | So I'll go to Plugins > Add New, and we are
going to search for one called exec-php,
| | 02:49 | short for execute PHP.
| | 02:56 | Once the search results are
returned, click Install Now.
| | 02:58 | OK to install it and then activate the plug-in.
| | 03:03 | Now before we can use this plug-in, we need
to temporarily switch off the Visual Editor.
| | 03:09 | Unfortunately, you can't just use the
HTML tab of the WordPress editor; you to
| | 03:14 | actually disable the Visual Editor
for whoever is putting in the code.
| | 03:19 | That is handled through the user profile.
| | 03:21 | So I will go up to the upper-right
corner here and click Edit My Profile.
| | 03:26 | You can also get to this
through the Users option.
| | 03:30 | The very first selection is Visual Editor,
| | 03:34 | Disable the visual editor when writing.
| | 03:36 | Let's just select that, and then I am
going to scroll down to the bottom and
| | 03:40 | click Update Profiles.
| | 03:42 | We are ready to create our PHP-based posts.
| | 03:48 | Let's get the code from Dreamweaver.
| | 03:50 | I'll switch over to Code view, and I just
want a copy the code that's in the body here.
| | 03:56 | Now let's head back to the dashboard,
add a new post, put in our title of Venus
| | 04:03 | Launch Date Announced, and
we will paste in the code.
| | 04:10 | Now you'll notice that on the right
there are no separate tabs anymore
| | 04:14 | for visual HTML.
| | 04:16 | That's to be expected because of
course we disabled that in the profile.
| | 04:19 | Now let's publish this and
view the posts. Well, there it is.
| | 04:26 | I've added some CSS to make it stand out,
but as you can see, it's working perfectly.
| | 04:32 | Once you've inserted your code, you
can always go back to profile and
| | 04:35 | re-enable the Visual Editor.
| | 04:38 | The only time you need to disable it
is when you're writing a post that is
| | 04:41 | just PHP, which you can develop and test
in Dreamweaver before bringing it into WordPress.
| | Collapse this transcript |
|
|
5. Adding MySQL Database OutputExtending the WordPress database| 00:00 | All of the posts, pages, settings
and even user details for a WordPress-
| | 00:05 | driven site are stored in a MySQL database,
established when you first install WordPress.
| | 00:11 | For the most part, this is a
seamless invisible operation,
| | 00:15 | so much so you may forget that you've got a
fully functioning database at your disposal.
| | 00:20 | In this chapter, we'll take a look at
one of the ways you can leverage that
| | 00:24 | database and Dreamweaver's code-
writing prowess to include dynamic data from
| | 00:30 | your own database tables
in your WordPress pages.
| | 00:33 | Let's start with creating a new
table in the WordPress-created database.
| | 00:38 | So, I am going to switch over to
phpMyAdmin, which I've invoked from WAMP server,
| | 00:44 | and I'll choose my
database, tpa, and then select SQL.
| | 00:50 | Now I can paste in any SQL here that I want.
| | 00:54 | I had previously developed a SQL
table and then exported that file.
| | 00:59 | It's now stored as planets.sql, located in
the Exercise Files, under Chapter 5, 05_01.
| | 01:06 | So let's go into Dreamweaver and pick that up.
| | 01:09 | Now you could import it, but I want to
show you the code first before we bring it in.
| | 01:17 | There is the code.
| | 01:20 | When you're moving from one database
to another it's always better to copy
| | 01:24 | the code and paste it into your SQL
field rather than inserting an entire
| | 01:29 | file, because quite often the database names
that you see here on line 19 are different.
| | 01:35 | In this case, they're the same, but
I've stumbled on that block many a time.
| | 01:39 | So I am going to select everything,
doing a Ctrl+A, Command+A on the Mac, and
| | 01:44 | then copy it, and now let's head back to
phpMyAdmin and do a Ctrl+V or Command+V to paste it in.
| | 01:51 | Now I am going to scroll back up to the
top. And just as a reminder, this is the
| | 01:58 | value that you want to double-check.
| | 02:01 | You'll see up here it will say "Run SQL
query/queries on database" and then the
| | 02:05 | name of the database.
| | 02:06 | And if it's not the same, you'll need to
change this value where it says database tpa.
| | 02:13 | I think we're good.
| | 02:13 | Let's go ahead and click Go.
It's in the lower right here.
| | 02:18 | After you've clicked Go, click on
Structure and you'll see planets listed
| | 02:23 | there as the new table.
| | 02:24 | You can also go over to the little
refresh here and reload your navigation frame
| | 02:28 | and you'll see planets there.
| | 02:30 | With the data in a new database,
we're ready to create a new database
| | 02:34 | connection in Dreamweaver.
| | 02:36 | So back to Dreamweaver.
I'll close my planets.sql file.
| | 02:40 | Now I'll need to drop out of Live
view in order to access the proper panel.
| | 02:45 | So I'll toggle Live View off and then
go to Window > Databases, and once I have
| | 02:52 | that, I'll click on adding a new connection.
| | 02:55 | Select MySQL Connection and then I
am going to give it a name of connTPA,
| | 03:00 | because we can use this connection to
access all the tables that we'll need for
| | 03:05 | the site, not just the single one we inserted.
| | 03:08 | In the MySQL server field,
enter the name of your server--
| | 03:12 | in our case, it's localhost--and
then the user name, which is root.
| | 03:15 | You'll call that there was no MySQL
password set up. And now let's choose our database.
| | 03:21 | There is tpa. Click on OK.
| | 03:25 | You can go ahead and click Test if you like.
| | 03:28 | Dreamweaver will pick up on the fact
that we haven't specified a password.
| | 03:31 | In this case it's okay because we
are not a production environment at the
| | 03:35 | moment. And I'll click OK. And there is
our new connTPA. And if I expand that
| | 03:41 | and then expand Tables, we'll see
our planets table, along with all of the
| | 03:46 | other WordPress tables.
| | 03:47 | Now also, if I expand my Files panel
and scroll up to the top, you'll see the
| | 03:55 | Connections folder that we have here.
| | 03:57 | This is the standard way the
Dreamweaver works with connections.
| | 04:00 | It puts a folder in the site root.
| | 04:03 | There are a couple of ways that we
can use this connection in our WordPress
| | 04:06 | template pages, but the
standard technique isn't one of them.
| | 04:11 | The quickest way I've found is to
simply copy the connections folder, with the
| | 04:15 | PHP file that was created
within it, to our theme folder.
| | 04:18 | So I am going to right-click on
Connections, choose Edit > Copy, and then go down
| | 04:27 | to our theme folder and
right-click again, Edit > Paste.
| | 04:32 | Of course, you can use the
keyboard shortcuts if you want.
| | 04:36 | You should see down at the bottom there
for the moment, the Connections folder.
| | 04:39 | If I expand it, there is our connTPA.php file.
| | 04:44 | Dreamweaver has just refreshed,
so it's put it back up at the top.
| | 04:47 | Now that the Connections folder has
been transferred, you're ready to create a
| | 04:50 | recordset and apply it to
a WordPress template file.
| | 04:54 | I'll show you how in this
chapter's video "Including a recordset."
| | Collapse this transcript |
| Including a recordset| 00:00 | Dreamweaver offers robust support for
building dynamic applications with, among others, PHP.
| | 00:06 | While some may complain that the code is
outdated, the truth is that it still is
| | 00:11 | completely functional
and very easy to work with.
| | 00:14 | In this video, I'm going to show you
how you can use Dreamweaver to create a
| | 00:18 | basic recordset, complete
with URL-driven dynamic data.
| | 00:23 | Ultimately the goal in this exercise
is to create what's referred to as a
| | 00:26 | detail page that outputs the
results of one database table record.
| | 00:31 | Let's start by creating a simple
database-driven page in Dreamweaver.
| | 00:36 | One of the best ways to do this is to
create a comp page that has the static
| | 00:42 | values in it, which you'll
replace with dynamic values.
| | 00:45 | Now I have just such a static page
found in the Exercise Files/Chapter 5/05_02,
| | 00:52 | called planet_comp.php. I'll open that now.
| | 00:57 | And as you can see, it's a very basic
table, with a series of placeholders.
| | 01:01 | We created a database connection in
the first video of this chapter, "Extending
| | 01:05 | the WordPress database."
| | 01:07 | In order to take advantage of that
connection, I am going to need to save this
| | 01:11 | file into our local site root.
| | 01:13 | So I'll choose File >Save As, Site
Root, and then just click Save.
| | 01:22 | No need to update the links.
| | 01:25 | Okay, we're ready to start
work on our recordset,
| | 01:27 | and we do that by opening up the
Bindings panel and then clicking the plus sign
| | 01:32 | and choosing Recordset (Query).
| | 01:34 | Now this is going to be a very basic recordset,
| | 01:37 | so we can just use
Dreamweaver's simple Recordset interface.
| | 01:40 | I am going to call it rsPlanet, and
you'll note that it defaults to the one
| | 01:45 | connection that we have, conTPA.
| | 01:48 | Remember, we kept a copy of that in
our site root, and that's the file that
| | 01:52 | Dreamweaver is now referencing.
| | 01:55 | The table we're looking at is called
"planets," and here are all the other tables
| | 01:59 | that you also have access to.
| | 02:01 | We'll accept all of the columns,
because we are going to be using all of that
| | 02:05 | information, but I do want to set the filter.
| | 02:07 | So I am going to define this record
set to filter by the id, set to the
| | 02:13 | URL Parameter, also id.
| | 02:16 | And since we are pulling in a single record,
there's no need to do any sorting. All right!
| | 02:21 | Let's click OK and save our page, and
now we are ready to bind the dynamic data
| | 02:26 | to its proper place in the comp.
| | 02:29 | So I am just going to double-click
on placeholder next to Planet here.
| | 02:33 | Let me close down the Files panel a
bit and expand our Bindings panel.
| | 02:38 | And now I can choose planetName and
then just click Insert and it will
| | 02:43 | replace the selection.
| | 02:45 | Let's do the same thing with the
Distance from the sun placeholder, and that's
| | 02:51 | planetFromSun. Click Insert.
| | 02:53 | The number of Moons is listed in the
database table as planetMoons. Click Insert
| | 03:01 | again. And the last one is the Length of
the Orbit (in Earth Years) and that is,
| | 03:07 | of course, planetOrbit.
| | 03:09 | Okay, so all of our placeholders have
been replaced with dynamic data, but
| | 03:13 | there's one more piece of the puzzle
we need to bring in before the page is
| | 03:16 | ready to display data.
| | 03:18 | If you'll recall, we set up the
recordset to filter according to a URL value
| | 03:23 | for the variable id.
| | 03:25 | In Dreamweaver, you can test both
URL variables through the HTTP Request
| | 03:31 | Settings dialog, and that's found under
the Live View Options button, all the way
| | 03:36 | down at the bottom. So let's open up
that dialog box and then click on the
| | 03:42 | plus button to add a new URL
request. The name is the variable id.
| | 03:48 | And now we can give it a value, any
of the dynamic values that we have.
| | 03:53 | Let's go ahead and start it at 1,
which should return the first planet.
| | 03:58 | I'll click OK and let's go into Live view.
| | 04:03 | Let's save those changes, and
there is the first planet, Mercury.
| | 04:07 | It has no moons and it's a
very short orbit. All right!
| | 04:12 | You can change those values either
through the HTTP Request Settings--let's do
| | 04:18 | that now. And let's go to change it to four,
which should give us Mars. There is Mars.
| | 04:26 | You could also change it
directly in the address bar.
| | 04:29 | Let's see what Saturn looks like.
| | 04:32 | Saturn is the sixth planet, and it has
more than enough moons to go around.
| | 04:37 | Okay, looks like we've got our dynamic
Dreamweaver page ready, and now you're
| | 04:42 | ready to integrate that into a
custom template WordPress page.
| | Collapse this transcript |
| Outputting data| 00:00 | Once you have working dynamic code in
Dreamweaver, it's basically a series of
| | 00:04 | straight-ahead copy-paste operations
to integrate that code into a WordPress
| | 00:09 | template page, with one possible exception.
| | 00:13 | I will point out that exception, but
let's start by bringing in a basic template.
| | 00:18 | So I am going to go my Exercise Files/
Chapter 5/05_03 and open up planet.php.
| | 00:25 | Let me switch to Code view, where you
can see that I already have this set up as
| | 00:32 | a template with the name of planet,
and it's a basic page that has the
| | 00:36 | WordPress loop in it.
| | 00:37 | I am going to go ahead and save this,
so I can put it within my theme, click
| | 00:44 | Site Root in the Save As and drill
down to wp_content/Themes/tpa. And we can
| | 00:53 | still keep it as planet.php. No need
to update the links. And let's close out
| | 00:59 | that initial PHP file.
| | 01:02 | So now, I'm am going to open up the
planet_comp page that we worked on in the
| | 01:06 | previous video, and that's located in my
site root, so let me open that up. This
| | 01:12 | has all of my PHP code that you'll
recall we used to set up the dynamic data
| | 01:18 | here that's in this table.
| | 01:20 | So first I'm going to copy the PHP code
and paste it from the planet_comp file
| | 01:26 | to my planet.php template file.
| | 01:30 | So let's go into code, go up to the
top of the page, and I am going to grab
| | 01:35 | everything from the top all the way
down to the DOCTYPE. Make sure I get that
| | 01:40 | last PHP closing bracket there, copy
all of that, switch to planet.php. And
| | 01:49 | normally on a PHP page, the PHP server-
side code appears above everything else.
| | 01:55 | With WordPress template files it has to
be after the template name, so let's go
| | 02:00 | past that. And because the header has
some opening information as well, let's put
| | 02:05 | it after the header, so I will paste that in.
| | 02:08 | Now before we bring in the content, we have one
more bit of structural PHP code to integrate.
| | 02:14 | So I am going to go ahead and move
down to the bottom of the page and switch
| | 02:18 | back to planet_comp.php, and move
down to the bottom of that page.
| | 02:23 | And here you see the code that Dreamweaver
inserts to close out the opened record set.
| | 02:28 | So let's copy that final code block,
head back to planet.php, and we will put it
| | 02:34 | in at the bottom of the page.
| | 02:36 | Okay, our structure is now in place.
Let's go back and get some content.
| | 02:40 | Head back to planet_comp.php, and I am
going to go to Split view to make this
| | 02:45 | a little bit easier. In this case I want just
a table; I don't want my little header there.
| | 02:51 | So I am going to put my cursor
within the table. Here it is, on line 60.
| | 02:56 | I want just the table. I don't want the
H1 tag. So I am going to put my cursor
| | 03:01 | within the table tag and then use the Select
Parent Tag option to grab all of that code.
| | 03:07 | You want to make sure to grab this in
Code view because you are going to be
| | 03:12 | pasting in the code.
| | 03:14 | I'll copy it, move over to planet.php,
and I want to put this after the loop ends,
| | 03:21 | which is right after endif here.
Paste that in and there is our table.
| | 03:26 | By pasting the dynamic data below the
WordPress post code, we make it possible
| | 03:31 | to include any bit of static text we want,
just by entering it into the WordPress page.
| | 03:37 | Okay, we are ready to save
our template and test it.
| | 03:41 | Let's head over to WordPress and add a new page.
| | 03:47 | So let's enter Planetary 411, and
for now I am just going to put in some
| | 03:52 | placeholder content, "Intro goes here..."
| | 03:55 | I am going to set the Template
to Planet and then click Publish.
| | 04:03 | Okay, let's take a look at our page.
| | 04:07 | Well we see now that we have our basic
information, our intro, and the start of
| | 04:13 | our table, but no dynamic data.
| | 04:15 | Remember the recordset filter?
| | 04:17 | Let's add the URL variable and value
to the web address and see what happens.
| | 04:23 | So I will click into the address bar and
then add an ampersand, because this
| | 04:28 | is another name value pair that we are
adding to the URL parameters, and type in
| | 04:33 | id=, let's go with 4.
| | 04:37 | Looks like our record set data is
fully integrated into the template page.
| | 04:42 | Now you're ready to see how to link
to these dynamic pages from within
| | 04:46 | the WordPress site.
| | Collapse this transcript |
| Linking to dynamic pages| 00:00 | If you've been working your way
through the chapter, you've seen how we can
| | 00:03 | include dynamic content in
a WordPress template page.
| | 00:07 | In this video I am going to show
you two ways to link to that content.
| | 00:11 | First, we'll take a look at the
technique for creating a static link from a
| | 00:15 | post or other page.
| | 00:17 | We'll need one bit of information
before we can code that link, the page ID.
| | 00:21 | We will find that in the
Dashboard's Page section.
| | 00:25 | WordPress gives you a variety of
options for discovering that value.
| | 00:29 | So let's switch back to the
Dashboard and then go to Pages.
| | 00:33 | Now if you hover over any of the pages
here, down in the bottom of the screen
| | 00:37 | in the Status Bar, you'll see the path to
the page, and it includes post= and a number.
| | 00:45 | In this case, for the All Planets page, it's 78.
| | 00:49 | For the Disclaimer page, it's 93.
And for the Membership Benefits page, it's 130.
| | 00:55 | Now if I go in to edit that page, you will
also see it listed here, where the page_id=130.
| | 01:03 | It's the same value, and that's the
identification number for the page within
| | 01:06 | the WordPress system.
| | 01:08 | It's important to keep in mind that
the page_id on your testing server may be
| | 01:12 | different from the one on your live server,
| | 01:15 | especially if like me, you
create a fair amount of dummy posts in
| | 01:19 | the development phase.
| | 01:20 | Always verify the page_id on the live
server before entering final links, when
| | 01:25 | you're using this static link technique.
| | 01:28 | So, how do we link to a specific
page? Keep in mind that WordPress does
| | 01:32 | everything off the basic homepage.
| | 01:35 | So essentially you link to the homepage and
add appropriate URL arguments. Let's try it out.
| | 01:41 | I am going to go back to my pages.
| | 01:43 | Now let's say we want to create a link
to our Planetary 411, and we want to show
| | 01:50 | the information from, say, Mars.
| | 01:52 | So first I need to get the page_id for
Planetary 411, so let me just click on it.
| | 01:57 | It's a little easier to see up
here in the center of the page.
| | 02:00 | And we see that the page_id is 142.
| | 02:04 | Okay, so let's head on over to Posts
and choose Mars is Open for Business!
| | 02:11 | And then we will add some text in
right at the end of the first paragraph.
| | 02:16 | See detailed info on Mars.
| | 02:20 | Now I am going to double-click on
Mars to select it and go up to my little
| | 02:25 | toolbar where I can click Insert/edit link.
| | 02:29 | And although by default WordPress puts in an
http:// prefix, we don't need to go with that.
| | 02:36 | We can just put an index.php, which is
the homepage, and then a question mark
| | 02:42 | for following arguments, and the key term
page_id= and our page value, which was 142.
| | 02:52 | Now, this will get us to the basic page,
but it doesn't pass the needed argument
| | 02:56 | to populate our recordset.
| | 02:58 | So let's add that id=4 string, because
Mars is the fourth planet in our database,
| | 03:04 | as well as in our solar system.
| | 03:06 | So &id=4. All right let's add that link,
update the page, and let's view that post.
| | 03:17 | Okay, Mars is Open for Business!
| | 03:19 | There is our link. Click on the link
and there is our Planetary 411 page with
| | 03:25 | the information from Mars.
| | 03:26 | That technique works well for static
links, but how do you handle a more
| | 03:31 | dynamic situation, where you have a list of
links generated from the database on the fly?
| | 03:36 | Dreamweaver has the answer.
| | 03:38 | We'll first create a page that lists all
the planets and to do that, I am going to
| | 03:43 | start with my planet.php that we
developed in a previous video, and I am going to
| | 03:48 | save it as planets.php.
| | 03:51 | So File > Save As, and let's just add an
s.php there, click Save. And now we want to
| | 04:00 | change the template name from planet to planets,
| | 04:03 | so add an s there and now we are
ready to do some work on the dynamic side.
| | 04:07 | The cool thing is, once you've set up
the database connection and recordset in
| | 04:12 | one template, you can very
easily adapt it in all the others.
| | 04:16 | Let's modify a record set so
that we see all the planets.
| | 04:21 | So let's open up the Server Behaviors
panel and double-click on the recordset.
| | 04:26 | You can ignore this splat that you see there.
| | 04:28 | That's because we have our PHP
template name up top and typically Dreamweaver
| | 04:33 | prefers to have its PHP code upfront.
| | 04:36 | But it can handle it.
| | 04:38 | So double-click on Recordset to open
up the dialog box, and let's remove the
| | 04:43 | filter by setting Filter to None so that
all of the records in our database, all
| | 04:48 | of the planets in other words, are returned.
| | 04:51 | And let's go ahead and change the
sort order so that it's sorted by
| | 04:55 | planetName. Click OK.
| | 04:59 | Next, let's change our data output from
a table representing info about a single
| | 05:03 | planet to a list of planets.
| | 05:06 | So I am going to go down to find my
table by going into Split view for a moment
| | 05:12 | and then locate the code for the table.
| | 05:15 | Use Select Parent Tag to grab it all
and delete it, and now we are ready to
| | 05:21 | insert our dynamic data.
| | 05:23 | So let's switch to the Bindings
panel and choose planetName > Insert.
| | 05:30 | And there you see the PHP
code for the planetName.
| | 05:33 | I am going to replace my cursor right
after that and then do a Shift+Return,
| | 05:38 | which will bring in a line break tag.
| | 05:41 | You could of course just also type in
the code, but that's a little faster.
| | 05:44 | Okay, so now I want to select all
this new code and then one more time
| | 05:50 | switch over to the Server Behaviors panel and
from the dropdown list choose, Repeat Region.
| | 06:00 | Now the Server Behaviors panel will
not work with Code view, so you have to
| | 06:04 | click in to Design view.
| | 06:06 | But once you do, you'll see your
dynamic information there, and we can extend
| | 06:11 | the selection to include the line break by
holding down Shift and pressing your right arrow once.
| | 06:18 | So now all that new code is selected and
we can click on Add Server Behavior and
| | 06:24 | choose Repeat Region.
| | 06:25 | We only have one recordset on the page.
If there were multiple ones, you can
| | 06:29 | choose the one you want from the list,
unless of course get all of the records,
| | 06:33 | in case we go over 10
planets in some future date.
| | 06:36 | I will click OK and our repeat region is added.
| | 06:40 | Now unfortunately, Dreamweaver is
not without a little gotcha here.
| | 06:45 | Several times it's happened to me that
after I've changed a recordset or added
| | 06:49 | a repeat region, if I go back up to the top of
the code, I would find another require once here.
| | 06:55 | Now while it doesn't happen all of the
time, it does seem to be something that
| | 06:59 | you want to keep an eye out for.
| | 07:00 | We are ready to test our new template page,
to make sure we're getting all of our planets.
| | 07:06 | So I am going to go ahead and save it,
and let's head over to WordPress, and let's
| | 07:11 | create a new page. Enter a title.
| | 07:20 | After entering the title, you can, if
you want, also enter in some intro text--
| | 07:24 | I will put in a little placeholder here--and
change our template from Default to Planets.
| | 07:35 | And now let's publish the page.
| | 07:39 | Okay, we are ready to view it,
| | 07:41 | so I will click View Page. And
there is my intro text and all of our
| | 07:46 | planets alphabetically.
| | 07:51 | Looking pretty good. All
that's left is to create a link.
| | 07:54 | So let's head back to Dreamweaver. I am
going to select the planetName code, and
| | 07:59 | let me open up my Property
Inspector and choose Browse for File.
| | 08:05 | And then I am going to navigate to the
index.php file, which is in our template
| | 08:11 | folder, not the one on the site root.
And then let's add our parameters.
| | 08:16 | Click the Parameters button, and the
first parameter is going to be page_id,
| | 08:21 | page_id, and the value is, if you recall, 142,
which was a page_id for our dynamic page.
| | 08:31 | Press Tab again, twice, to go
and enter another parameter.
| | 08:35 | So now we'll enter id in the Name column,
press Tab twice, and this time click
| | 08:42 | on the lighting bolt, because
we are going to add dynamic data.
| | 08:46 | And from the recordset choose id.
Click OK and then OK once more to close out
| | 08:52 | the Parameters box, and there you can
see the entire string is built up for us,
| | 08:57 | and click OK one more time.
| | 08:59 | Okay, let's save that page, and now let's
head back to our browser. I'll click refresh.
| | 09:06 | Now we have links for all of our
names, and let's see if we can get to
| | 09:10 | Neptune. There is Neptune.
| | 09:13 | All right, it looks like
everything is working perfectly.
| | 09:17 | You can use this technique to build
master detail page sets right within WordPress.
| | 09:21 | How's that for cool?
| | Collapse this transcript |
|
|
GoodbyeNext steps| 00:00 | Thanks for taking my Dreamweaver
and WordPress Building Sites course.
| | 00:04 | I hope you found it helpful and are
ready to start creating your own WordPress-
| | 00:08 | based sites in Dreamweaver.
| | 00:10 | If you want to dive deeper into
creating a WordPress site, check out my other
| | 00:14 | Dreamweaver and WordPress courses in
the lynda.com Online Training library.
| | Collapse this transcript |
|
|
