IntroductionWelcome| 00:03 | Hi, I'm Joe Lowery. Welcome to
Dreamweaver and WordPress: Core Concepts.
| | 00:08 | In this course, I'll demonstrate how to
set up WordPress locally and integrate it into a
| | 00:14 | Dreamweaver site for more efficient development,
| | 00:17 | as well as the basics of working in WordPress,
Adding and Editing Blogposts, Creating New
| | 00:23 | Site Pages, Inserting Images, and other Media.
| | 00:27 | I'll also show you how to convert the
default WordPress theme into a custom Dreamweaver
| | 00:32 | design layout that fits
perfectly in a full-featured site.
| | 00:36 | We'll dive deeper into the Dreamweaver WordPress workflow
and create responsive pages for tablets and phone layouts.
| | 00:43 | In addition, I'll show you how to publish
your Dreamweaver work online to make sure
| | 00:48 | you've got the final results up and running.
| | 00:50 | I hope you are as jazzed as I am to start
exploring this exciting workflow between WordPress
| | 00:55 | and Dreamweaver. Let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium Member of the lynda.com
online training library, you have access to
| | 00:05 | the exercise files used throughout this title.
| | 00:08 | Naturally, the information in this course is
ultimately intended to be applied to your own web pages.
| | 00:14 | However, you may find it helpful to work
with the supplied exercise files to practice the
| | 00:18 | steps safely and without
creating your own examples.
| | 00:23 | You can either follow the whole course,
chapter by chapter, or you can jump in at any point.
| | 00:28 | All the assets you'll need for a
particular lesson are found in the Chapter folders.
| | 00:33 | To begin using the files from the site,
download them, extract them, and then store those files
| | 00:39 | in a convenient location, such
as your Desktop, as I have here.
| | 00:45 | The Exercise Files folder is organized by
Chapter and every Chapter is broken down into
| | 00:50 | the various lessons that you'll see.
| | 00:53 | Within the lessons chapter there are a series
of files, typically assets like CSS style-sheets,
| | 01:00 | images, and sometimes PHP
code, as in this lesson.
| | 01:05 | In many lessons, you'll also find a final
folder, and that contains the CSS and PHP
| | 01:10 | and other files that show the completed lesson,
which you can open up and explore at your leisure.
| | 01:16 | Because we're working with WordPress, which
stores much of its information in a database,
| | 01:20 | it's best to follow the course chapter by
chapter in order to give the most up to date database.
| | 01:25 | However, if you need to jump in at a
certain point, I've provided an XML file for most
| | 01:31 | chapters, which you can use to bring the data
into WordPress' database table with the WordPress
| | 01:36 | import feature, found in the
WordPress Dashboard, under the Tools category.
| | 01:41 | You'll find this XML file in the Jumpin folder.
| | 01:44 | If you're a Monthly subscriber or Annual
subscriber to lynda.com, you don't have access to the
| | 01:49 | exercise files, but you can
definitely follow along with your own assets.
| | Collapse this transcript |
| A word about updates| 00:00 | The web is constantly evolving and
WordPress and Dreamweaver are no different.
| | 00:05 | Before we get started, I wanted to take a
moment to explain how updates to these programs are
| | 00:09 | handled in terms of this course.
| | 00:11 | WordPress issues minor updates on a regular
basis, not too long ago they published a major
| | 00:17 | release 3.4, which was followed up with a
couple of minor version updates, 3.4.1 and 3.4.2.
| | 00:26 | These so-called dot releases are
mostly bug fixes and security refinements.
| | 00:32 | The course materials should be fine
with all of these program updates.
| | 00:36 | However, if the course is affected by any
release, we will first put out an FAQ that
| | 00:41 | details the issues and any workarounds.
| | 00:44 | If the issue is significant
enough, I'll update the videos.
| | 00:47 | Changes also come to Dreamweaver, it's less
likely that Dreamweaver will issue major updates
| | 00:53 | on a regular basis like WordPress does, although,
with the addition of the creative cloud, that
| | 00:58 | remains to be seen.
| | 01:00 | However, if they do release any significant
enhancements, I'll cover those first through
| | 01:04 | the FAQ, and then if need be, update the videos.
| | 01:09 | Bottom line, don't worry, we've got you covered no
matter how WordPress and Dreamweaver are updated.
| | Collapse this transcript |
|
|
1. Setting Up WordPressOverview| 00:00 | Before you can start integrating WordPress
and Dreamweaver, you'll need to make sure
| | 00:04 | that you have the proper development
environment, as well as the most current files.
| | 00:09 | There are four main components
for developing with WordPress.
| | 00:12 | A Local Web Server, a PHP Server, a
MySQL Server, and the WordPress PHP files.
| | 00:18 | Luckily, the first three can easily be
installed in one fell swoop, on either the Mac or the PC.
| | 00:25 | On the Mac, you can use MAMP, which
stands for Mac, Apache, MySQL, and PHP.
| | 00:31 | Apache is a powerful open source web server.
| | 00:34 | MySQL is the database server and PHP is the
server-side language, which Dreamweaver calls a server model.
| | 00:43 | PC users can use WampServer, which
installs of the same components on the PC side.
| | 00:49 | The final component is WordPress itself.
| | 00:52 | WordPress is essentially a PHP
application that stores data in a MySQL database.
| | 00:58 | Like the others, WordPress is
open-source and freely available.
| | 01:03 | Unlike the others, WordPress is
a set of files and not a server.
| | 01:07 | So you'll just need to uncompress these
files and put them in the proper place prior to
| | 01:11 | running the installation, which sets
up the connection to the MySQL database.
| | 01:16 | Once all these pieces are in place,
we can integrate it into Dreamweaver.
| | 01:20 | If you need to set up a local development environment,
I strongly suggest you check out David Gassner's
| | 01:25 | excellent free course right here in
the lynda.com online training library.
| | 01:31 | It's called Installing Apache, MySQL, and PHP,
and it includes a terrific overview as well
| | 01:37 | as very specific steps for
handling the installations.
| | 01:41 | If you already have a development
environment in place, go on to creating the database in
| | 01:45 | this chapter, where you'll see, how to
establish the necessary database for WordPress.
| | Collapse this transcript |
| Creating the database and the initial site| 00:00 | So, now you're ready to create the
database for WordPress and set up the general site.
| | 00:05 | Creating a database is a snap with phpMyAdmin,
a component of both MAMP and WAMP server.
| | 00:11 | So, let's open up
phpMyAdmin--because I'm on a Mac
| | 00:15 | I'm using MAMP--and let me bring that window
to the front, and then click Open start page.
| | 00:22 | If you're using WampServer on Windows,
you'll need to go to the system tray, left click
| | 00:27 | on the WampServer icon, and
then choose phpMyAdmin from there.
| | 00:32 | In either case, you'll be able to access
phpMyAdmin right from your default browser.
| | 00:38 | With MAMP we have a number of options.
| | 00:39 | So, to get to phpMyAdmin, I'll just
click it from the tab navigation up top.
| | 00:45 | You could also just put in localhost/MAMP
and get the same start page here.
| | 00:50 | So, now we need to create a new database.
| | 00:53 | If you're using an older version of
phpMyAdmin, you'll go directly to the database page.
| | 00:59 | With newer versions, you'll need to
click on the Database's tab first.
| | 01:04 | So, click into the Create database field,
and enter in the name of the database.
| | 01:09 | For us, it's going to be roux_blog.
| | 01:13 | Now, press Tab to lock
that in and then click Create.
| | 01:18 | You'll get a message that the
database roux_blog has been created.
| | 01:22 | There's no need for us to
create any tables at this point.
| | 01:26 | WordPress is going to put in all the
tables we need during the installation process.
| | 01:30 | I do want to point out that if you're
following along with the exercise files, then make sure
| | 01:34 | that you use the same name
that I used here, roux_blog.
| | 01:39 | If you don't do that, the
exercise files won't work properly.
| | 01:42 | Now, if you already had a site developed and
stored in a different folder, you bring that
| | 01:47 | into your local web server root folder, and
that's exactly what we're going to do with
| | 01:51 | our exercise files.
I'll hide my browser as well as MAMP.
| | 01:56 | And then let's open up exercise files, and
go into Chapter 1/01_02, and there you'll
| | 02:04 | see a folder called roux_academy.
| | 02:07 | This has all of the files for the standard
website we're going to be working with except
| | 02:11 | the WordPress files.
| | 02:12 | So, let's copy that, and I'll copy it by right
clicking on it and then choosing Copy roux_academy.
| | 02:19 | Now the eventual goal is to put our
WordPress files in the local site and whatever folder
| | 02:24 | is used by the Web Server as the localhost root.
So, we're going to set up those site files first.
| | 02:30 | Now, your localhost root is
different for Mac and Windows.
| | 02:35 | With MAMP on the Mac, that will be in the
Applications folder, and then we drill down
| | 02:40 | to MAMP, and there you'll see the htdocs folder.
That's the localhost root folder for MAMP.
| | 02:50 | On Windows under WAMPServer, you'd find that
on your C-Drive under WAMP/www. All right.
| | 02:57 | I have my localsite root folder selected, htdocs,
and let's go ahead and Paste in our copied folder.
| | 03:05 | Now let's try that out in the browser.
| | 03:07 | I'll open up a new tab, and I'm just going to
enter in the full URL just so you see everything,
| | 03:15 | http://localhost/roux_academy/.
| | 03:24 | Now, in most modern browsers you don't
have to enter in the http://, you can just put
| | 03:29 | in localhost, but just so
you see the entire thing.
| | 03:31 | And then we'll hit Return, and there's our
website, running under the local web Server MAMP.
| | 03:38 | Now that we have our database created and
our basic site set up, everything is prepped
| | 03:42 | to integrate the WordPress files.
| | Collapse this transcript |
| Configuring WordPress| 00:00 | Okay, our database is created, the basic site
has been placed in the local Web Server root,
| | 00:06 | and we're ready to move on to the next step
where we finally get to install WordPress.
| | 00:10 | So, you want to get the latest version.
| | 00:12 | So let's go to wordpress.org--not wordpress.com, .org--
and then click the orange download WordPress
| | 00:19 | link you see over here on the right.
| | 00:22 | That will take you to the Download page where
you can click Download WordPress and whatever
| | 00:27 | the version number is.
| | 00:29 | As you can see,
currently we're on version 3.4.2.
| | 00:32 | Now, it's entirely possible that WordPress
will have released a minor bug fix version
| | 00:38 | by the time you take this course.
| | 00:39 | Don't worry though, the techniques I'm
demonstrating will work fine with any sort of minor upgrade
| | 00:44 | for security and other bug fixes.
| | 00:47 | Now, I've already downloaded the
WordPress .zip file and uncompressed it.
| | 00:53 | And now, I have it stored on my Desktop.
| | 00:55 | Now, I'm going to copy this entire folder of files,
there's quite a few, about 835 in this particular version.
| | 01:04 | So I'm going to right-click,
and then choose Copy WordPress.
| | 01:08 | You could also of course select
it and choose Ctrl+C for Copy.
| | 01:11 | Now, I want to navigate to my local Web
Server root, and for that I'm going to go to File >
| | 01:17 | New Finder Window, drill down into the
Applications, locate the MAMP folder, and then I'm going
| | 01:27 | to be working with the htdocs folder.
| | 01:29 | And because I'm going to be working with it
quite a bit, let me pull it over into Favorites here.
| | 01:36 | And then I want to go into the roux_academy
folder, and I want to paste that WordPress
| | 01:41 | folder right in there.
| | 01:43 | So, again I'm just going to right-click, and
choose Paste Item, and there is my wordpress folder.
| | 01:49 | Now, I tend to like to obfuscate the
technology a little bit, and instead of using WordPress,
| | 01:55 | which is going to appear in your path to the files.
| | 01:58 | I'm going to change wordpress to blog,
which is basically how we're using it.
| | 02:04 | So I'm going to click it twice and then
enter in the new name and hit Return or Enter.
| | 02:10 | And now we're ready to
complete the installation.
| | 02:12 | So for that we need to go back to the
Browser, and I'm going to open up a new tab.
| | 02:18 | Go to my local web Server, which is localhost/,
and we want to put in the name of the website
| | 02:26 | that we are working with,
and that is roux_academy/.
| | 02:32 | To get to the installation we actually have
to drill into the wordpress folder, which you'll
| | 02:36 | recall we renamed blog, so blog, and now we
want to go into the admin section of WordPress
| | 02:43 | which is found in the folder wp-admin, and the
exact file we are looking for is install.php.
| | 02:51 | So, I'll hit Return.
| | 02:54 | Now, you'll get a message that says it
can't find the wp-config file, that's fine.
| | 03:00 | That's exactly what we expected,
so we want it to create one.
| | 03:03 | I'll go ahead and click the Create a
Configuration File button, and we'll get a brief welcome
| | 03:08 | message from WordPress, informing us that it needs
some more information about the database to continue.
| | 03:13 | Now, we actually have all that information.
So I'm going to go ahead and click Let's go.
| | 03:19 | And we'll enter in our Database
Name which you'll recall was roux_blog.
| | 03:26 | The MySQL username which on a default MAMP
installation is root, which is also the password.
| | 03:35 | Keep Database Host and Table Prefix both at
their default settings and click Submit, and
| | 03:41 | there's that fabulous
response, All right sparky.
| | 03:44 | So now since WordPress can communicate with
the database, we'll go ahead and click Run
| | 03:48 | the install, and we need a little bit more
information, the site title, which is Roux Academy.
| | 03:58 | Let's keep the admin username for our
administrator, and I'll enter in a password, and repeat it
| | 04:07 | to make sure I got it in right.
Put in my E-mail address.
| | 04:14 | Let's keep the Privacy option
selected and choose Install WordPress.
| | 04:19 | Now, I'm going to have Google Chrome go ahead
and save my password, so I won't have to keep
| | 04:23 | re-entering it, and we're ready to log in.
I'll click the Log In button.
| | 04:28 | And since it has remembered
the password we're good to go.
| | 04:31 | So, here's the official log in page.
| | 04:33 | I'll click Log In, and there is the
WordPress Dashboard, including a bright and shiny new
| | 04:39 | welcome screen with lots of information on it.
| | 04:41 | If you're just starting out, there is
lots of great links here for you to follow.
| | 04:45 | But since I'm going to be guiding you
here let's go ahead and click Dismiss.
| | 04:49 | And that will take you to
the actual Dashboard page.
| | 04:52 | We're going to spend a good amount of time
exploring, and even modifying the dashboard
| | 04:56 | in the remainder of this course, but for now
let's partake of a little immediate gratification
| | 05:01 | by taking a look at the current site.
| | 05:03 | Go over to the upper left and click on the
title name for your site, and your site will
| | 05:08 | open up in the Browser
Window with some sample content.
| | 05:11 | So this is the site with the blog title
that we entered earlier, Roux Academy.
| | 05:16 | The subtitle, Just another WordPress site, is one
of the default entries that we can clear out later.
| | 05:22 | Of this particular WordPress theme--it's the
default one that's called 2011--uses a random
| | 05:28 | background picture.
| | 05:29 | So you may have a different one than
the one that is shown on my screen.
| | 05:33 | Let's go ahead and click Refresh, and you
can see another image popup each time, always
| | 05:37 | have guaranteed one.
| | 05:39 | So, everything that you see here is the
default setup, which we will customize and change
| | 05:45 | throughout this course.
| | 05:47 | Now that you have all the essential elements
of WordPress setup, you're ready to move on
| | 05:51 | to integrating Dreamweaver into the workflow.
| | Collapse this transcript |
| Establishing a Dreamweaver site| 00:00 | To make sure your WordPress Dreamweaver workflow
is smooth you'll need to set up your Dreamweaver
| | 00:05 | site with the appropriate testing server.
| | 00:08 | Dreamweaver's New Site dialog
box makes it very straightforward.
| | 00:11 | So, there are a couple of ways you
can open the Site Setup dialog box.
| | 00:15 | You can either go to the Site menu up here
and choose New Site, or if you have the Welcome
| | 00:22 | Screen open like I do, choose
Dreamweaver Site under the Create New column.
| | 00:27 | Now, if you're just setting up a standard
HTML site, all you would need to do is to
| | 00:32 | enter the two values on this initial screen.
We'll have to do a bit more.
| | 00:36 | But let's start there by naming our site.
I'm going to call this one Roux Academy.
| | 00:44 | Of course, that's just a name that's
going to appear within Dreamweaver.
| | 00:47 | So you do want to name it
something that's easy to recognize.
| | 00:50 | So now we're going to
choose the Local Site Folder.
| | 00:52 | I'll click the Folder icon.
| | 00:55 | Then browse to my htdocs folder which is the
local site root, and select the roux_academy folder.
| | 01:00 | Now, be careful that you don't want to choose
blog because we want to get the entire site,
| | 01:05 | not just the blog portion of it.
| | 01:07 | So, I click Choose, and there is the
path to our local site root folder.
| | 01:12 | Now that I have that identified, all I
need to do is to add a testing server.
| | 01:16 | So, I'll click on servers in the left column.
You can add as many servers as you like.
| | 01:21 | To define a server, click on the Add button.
| | 01:24 | We'll start the process by entering
in a Server Name in the top field.
| | 01:29 | We'll call this Testing.
| | 01:32 | We want to connect using,
not FTP, but Local/Network.
| | 01:36 | That will change what you see on the screen.
| | 01:40 | All we have to do now is
select the Server Folder.
| | 01:44 | That's going to be the exact
same folder we've been working with.
| | 01:46 | So again, I'll go to htdocs >
roux_academy, and click Choose.
| | 01:52 | Now, I want to enter in my local web URL.
| | 01:56 | So, I'll put in after the
http://localhost/roux_academy.
| | 02:06 | You can put in the trailing slash or not.
| | 02:08 | If you don't, Dreamweaver will put it in for you.
Let's switch over to the Advanced Tab.
| | 02:12 | I'm going to choose my Server Model
from the list here down at the bottom.
| | 02:17 | I'm going to select PHP
MySQL of course, and click Save.
| | 02:21 | There you see our server
listed in the Server panel.
| | 02:25 | Dreamweaver has a tendency to always assume
that the first server defined is a Remote server.
| | 02:30 | We want to switch that to Testing.
| | 02:32 | So, clear the check box under the Remote
column, and click the check box under Testing.
| | 02:38 | If you don't do this, Dreamweaver will not
recognize the server when you try to access
| | 02:42 | it during live view. Let's click Save.
| | 02:47 | Once Dreamweaver updates the site cache, we
can see all of our files in the Files panel
| | 02:52 | over on the right, including the blog folder.
| | 02:56 | Let's go ahead and open up that blog folder,
and I will expand the listings here so we
| | 03:00 | can see the various names.
| | 03:02 | Then I'm going to double-click on index.php,
the very first file listed here.
| | 03:08 | Let me go ahead and go into Split view.
| | 03:11 | You may be a little surprised if this is
the first time you've ever seen a dynamically
| | 03:14 | related file, to notice that
Design view is completely blank.
| | 03:19 | And what's more over in
Code view there's very little code.
| | 03:24 | That's because of the way that
WordPress constructs its pages dynamically.
| | 03:28 | So, let's take a look at how this page might
actually look in the browser by switching to Live view.
| | 03:36 | I'll go to design.
| | 03:38 | Here's the same page that we saw in
the browser with yet a different image.
| | 03:42 | Let me go ahead and click Refresh to see
how that random header image functionality is
| | 03:45 | still working, and it is.
There's the rest of our page.
| | 03:49 | So, it's the exact same page
that we see in the browser.
| | 03:52 | Now, your WordPress site is set up within
Dreamweaver, and it's ready to be customized.
| | Collapse this transcript |
|
|
2. Exploring a WordPress Site in DreamweaverAccessing dynamically related files| 00:00 | One of the key features for working with CMS systems
like WordPress is known as dynamically-related files.
| | 00:07 | The related files feature, which was introduced
in Dreamweaver CS4, made directly linked files
| | 00:12 | like CSS, JavaScript, and
PHP just one click away.
| | 00:17 | Now with dynamically-related files you
can access nested PHP files just as easily.
| | 00:24 | For example, let's open up the index.php
file from the blog root, and here I am in Design
| | 00:31 | view because we were last working in the Designer
workspace, and you'll notice that, as before, the page is blank.
| | 00:37 | So I'm going to switch over to Split view
and then broaden the code window a little
| | 00:43 | bit, and you'll see that this is comprised
of a fair number of PHP comments right up
| | 00:49 | front, as well as two
other little code snippets.
| | 00:52 | The first one defines a variable as
true and the second one requires one file.
| | 00:58 | And you can see up here in the related files
toolbar I do have that file included wp-blog-header.php,
| | 01:06 | and if I click to that--let me lower the
Properties Inspector here so you can see a bit more code.
| | 01:12 | There's not a whole lot of code to see.
| | 01:14 | It's just a kind of switch statement that
allows WordPress to load in one file or another.
| | 01:19 | Without the dynamically-related files
feature this is as far as you could go.
| | 01:23 | The way that WordPress works is that it will
continue down this path of bringing in nested
| | 01:29 | PHP files one after the other.
| | 01:31 | As you'll soon see there are over 70
different files related to just this one page.
| | 01:36 | Now we can expose all of those files and get access
to them through the dynamically-related files feature.
| | 01:43 | Up here in the Info bar you'll see a message
that says this page may have dynamically-related
| | 01:48 | files that can only be discovered by the server, and
a couple of link options, Discover and Preferences.
| | 01:54 | In Preferences, you can set the
options so that this happens automatically.
| | 01:58 | I tend to like it so that you have to do it
manually each time because then if I'm not
| | 02:03 | interested in seeing the additional files
I don't have to worry about them, but where
| | 02:07 | the real magic is is by clicking
on Discover, which I'll do right now.
| | 02:12 | Now you'll get a script warning from
Dreamweaver saying that it was going to run this through
| | 02:16 | the server, and if you
want to proceed click Yes.
| | 02:19 | Well, we definitely do, so let's click Yes,
and you can see in the Related Files Toolbar
| | 02:25 | that stretches across the top of the page
that there's a whole range of files which
| | 02:29 | have been dynamically discovered.
| | 02:31 | In fact, there is so many that
they have extended off the page.
| | 02:36 | I can click the Scroll button here and the files
will scroll across, and I can also go back if I need to.
| | 02:43 | Sometimes this is handy for locating a
specific file, but in this case, there's an awful lot
| | 02:48 | of files, and you can see them all, well as
many as will fit on the screen by clicking
| | 02:53 | the Show More option here in the
right-hand side of the document window.
| | 02:58 | And there you see the first group of files.
| | 03:00 | I'll go down and hover over the Scroll button so
we can go all the way down to the bottom of them.
| | 03:05 | As you can see, there are just an amazing
number of files that are interconnected here.
| | 03:09 | WordPress, as I said, uses about 70 different
files in its default page, all of which are
| | 03:14 | available to you in Dreamweaver.
| | 03:17 | You can access them directly just by clicking
on any of the files here, and they'll show
| | 03:21 | up right in Code view.
| | 03:23 | Let's go to media.php, and here's
the WordPress API for Media display.
| | 03:30 | If you want to dive in for a closer feel,
feel free to click on Code view to expand
| | 03:35 | the page and then start to look for various
PHP functions that you could find on the page.
| | 03:39 | I'll just scroll down a little bit and the
first function that we see here constrains
| | 03:43 | the image size for the editor.
There are many other types of pages as well.
| | 03:47 | There is CSS, scroll back to the very top
of the file we should see a CSS one close
| | 03:52 | to the start, and here's our CSS page.
| | 03:58 | And there are also XML files, all of them are
immediately accessible through dynamically-related files.
| | 04:03 | So now that you know how to access some of
the deeply linked files used in WordPress,
| | 04:08 | you'll be able to customize
your site easier than ever.
| | Collapse this transcript |
| Filtering files| 00:00 | In some ways the dynamically-related
files feature is too good.
| | 00:05 | Once you've loaded a primary WordPress page
into Dreamweaver, like this one picked up from
| | 00:09 | the previous lesson, you'll get
links to an overwhelming number of files.
| | 00:14 | The Related Files Filter can help you
narrow those down to just the ones you want.
| | 00:20 | So now we have, as I said before, a little
over 70 different files. Let me show you how to
| | 00:24 | hone in on just the ones you want.
| | 00:27 | This icon over on the top-right opens up the
Filter Related Files dropdown where initially
| | 00:35 | you can see All Files Type.
| | 00:37 | Now there are three different file types
that are included here, CSS, PHP, and XML.
| | 00:44 | This list is populated dynamically depending
on what the initial PHP file is related to.
| | 00:50 | Not all will have XML files, for example,
so we can disable that XML option if we like,
| | 00:57 | as I deselect the XML option it disappears.
| | 01:03 | Of course the file is not trashed, it's just
hidden from view, and you can narrow the displayed
| | 01:08 | files even further.
| | 01:10 | You of course have access to all the other
PHP files like the wp-blog-header.php file.
| | 01:17 | Let's say that you want to narrow the displayed
files even further, and that you're only really
| | 01:22 | interested in the CSS file.
| | 01:24 | So I'll go back to my filter and deselect
the PHP file type, and we're left with just
| | 01:32 | the one PHP file that I
currently have opened and style.css.
| | 01:37 | You may be wondering why didn't the PHP file,
that we're looking at disappear as well?
| | 01:42 | Well, that's because we have it open, and Dreamweaver
wants to be sure that you're finished working with it.
| | 01:47 | So to make it go away all you need
to do is select the style.css file.
| | 01:53 | Let's go back, and I'm going to show all the
file types again, by choosing the top option
| | 01:57 | in the filter Show All File Types.
| | 02:00 | Now they're all back, because I want to
show you another way to filter your files.
| | 02:04 | Sometimes what you're looking for cannot be
easily divided by file extension, you might
| | 02:09 | be looking for a specific file.
For this we go to the Custom Filter option.
| | 02:15 | Let's open up the Filter dropdown one more time,
and the last option on the list is Custom Filter.
| | 02:21 | So I'll select that, and
a new dialog box opens up.
| | 02:25 | Let's say we're looking for a file called
header.php--that I happened to know the file
| | 02:29 | name of--so I can type that directly
into the field here and then click on OK.
| | 02:36 | And again, because I'm on the style.css file
that remains but here's my header.php file,
| | 02:41 | and all the other files are gone, and
once I select that style.css goes away.
| | 02:47 | Now if I wanted to work with a series of files, I can
easily do that through the Custom Filter option as well.
| | 02:52 | Let's reopen it, again go to the Filter icon,
choose Custom Filter, and right after header.php
| | 03:00 | I'm going to put in a
Semicolon and enter in style.css.
| | 03:07 | I'll click OK, and there's our two files.
| | 03:10 | And this time when I click on style.css it
shows up, and if I switch back to header,
| | 03:17 | style.css is still available to me.
| | 03:19 | The Custom Filter option also
allows you to use wildcards.
| | 03:23 | So let's say I want to look for a file
called footer, but I'm not sure if it's footer.php
| | 03:29 | or wp-footer or some other file name.
So I'm going to reopen Custom Filter again.
| | 03:37 | Add another Semicolon after style.css,
and this time I'm going to put in Asterisk
| | 03:43 | which is the wildcard, footer, and then
follow that with another Asterisk so that
| | 03:49 | will get any file that has footer in its name.
| | 03:52 | I'll click on that and here we see a couple
of footer files have shown up footer.php and
| | 03:59 | sidebar-footer.php.
| | 04:02 | And now when you're ready to go back to
seeing all the file types just simply click on the
| | 04:08 | Filter icon one last time
and choose Show All File Types.
| | 04:12 | Now that you know how to filter through the
related files, it makes using these dynamically-related
| | 04:17 | files as a whole lot easier, doesn't it?
| | Collapse this transcript |
| Following links| 00:00 | Live view is great for checking the page
or working on it in Dreamweaver to make sure
| | 00:04 | that your CSS and other aspects
are just the way you want them.
| | 00:08 | But wouldn't it would be great if you could
verify that the links to other pages in your
| | 00:12 | site, or away from your site even, work as well?
| | 00:15 | Well, you actually can, by
working with the Follow Links feature.
| | 00:19 | Let me show you how it works.
| | 00:21 | So here we are in Live view that will open
up our blog page, and there's just a few links
| | 00:26 | down below, if I scroll down that we can access.
| | 00:31 | Now normally in Dreamweaver if I go up to
a link, and I'm in Live view, you can see
| | 00:36 | where I hover it, and you can see the
underline up here as well as the pointer turn into a
| | 00:42 | hand, indicating that it's a link.
However, if I click on it nothing happens.
| | 00:48 | Oh, well that's not quite true.
| | 00:50 | Clicking on it does allow me to inspect the
current styles over here in the CSS Styles panel.
| | 00:57 | Now say I wanted to see how this linked
page look in comparison to the Homepage.
| | 01:02 | Notice the Location field that you see up
here in the Toolbar available to us now that
| | 01:08 | we're in Live view.
| | 01:10 | As you can see, it goes through the URL
address that we set up earlier and pointing to our
| | 01:15 | blog, starting with a localhost, our web server, the
Roux Academy, the folder, and blog our WordPress folder.
| | 01:23 | Now because we're looking at this blog page
I can use this address bar to go to any other
| | 01:29 | page within the site directly.
| | 01:31 | So if I wanted to go to the homepage of
the site I can get rid of the blog folder and
| | 01:36 | type in index.htm, and hit Return or Enter,
and there is the homepage for the site.
| | 01:43 | This is the site that we're
going to be converting the blog to.
| | 01:47 | Now if I want to go back to where I was to
the initial page that open I can click on
| | 01:51 | the homepage icon and the URL changes in
the address field. In this situation, the Home
| | 01:59 | icon will take you to the page that
you originally opened in Dreamweaver.
| | 02:03 | If you want to follow a link, you have two
options, and those can be found here in the
| | 02:08 | Live view options list.
| | 02:11 | The first option Follow Link
(Command-click Link) is the default.
| | 02:19 | On the PC you will see Ctrl-click Link, so
let me demonstrate that by going down, and
| | 02:24 | I'll hover over this
Comment link, which says 1 Reply.
| | 02:28 | This time, although you can't see it, trust
me on this, I'm going to press the Command
| | 02:31 | key and Click, and now it goes to another
blog page that has the comment that you see
| | 02:39 | here, and as you can see, up in the
address field, especially when the tooltip opens up,
| | 02:46 | there is a unique URL there.
| | 02:49 | It's not a specific page, but it is
passing arguments to the PHP server.
| | 02:53 | And, as you can see, scrolling up just a
little bit, we have our Header area, is the same,
| | 03:00 | but the content has changed.
| | 03:01 | I'll return by clicking the Back button,
and it works just like the browser.
| | 03:08 | So now let's change that option under the Live
view options so that we follow the links continuously.
| | 03:16 | For this we won't have to hold down the
Command or Ctrl key, so now I'll scroll down again
| | 03:22 | to where the links are, and this is another
trust me situation where I have my hands away
| | 03:27 | from the keyboard, and I'm just going to
click on the mouse on the comment one more time.
| | 03:34 | And again we go directly
to that link. All right.
| | 03:38 | Let's head back one last time, and
I want to show you another feature.
| | 03:43 | Here is a link to WordPress.org and even
though this is not one of the local pages on your
| | 03:49 | web server, I can click on it, and we'll go
to the WordPress.org site, which you could
| | 03:54 | if you wanted to explore at your leisure.
| | 03:57 | Now let's go back to our original
page by clicking on the Home icon.
| | 04:01 | This ability to follow links within Dreamweaver
not only ensures that your pages are connected
| | 04:06 | properly but as you'll see it will also
allow you to make changes to the linked pages as
| | 04:13 | you grow your WordPress site.
| | Collapse this transcript |
| Employing Live Code| 00:00 | Once you start working with dynamic
applications like WordPress, you quickly realize that
| | 00:05 | the HTML in your source code is only
the starting point for what the user sees.
| | 00:10 | Dreamweaver's Live Code feature allows you
to explore the server processed code so that
| | 00:16 | you can debug your pages with the final output.
| | 00:19 | To illustrate this, let's take a look
at our index.php file one more time.
| | 00:24 | So, here we are in Live view, and let me
switch to Split view here so that we can see both
| | 00:31 | the code and the page itself.
| | 00:35 | The Design side over on the right renders
fine, but Code view doesn't really change
| | 00:40 | when we go into Split view, as
it's just as minimal as it was before.
| | 00:44 | However, if I go into Live Code--which you
see up here listed just to the right of Live
| | 00:51 | view--I'll get the entire page from the
DOCTYPE declaration, which I'll scroll to all the way
| | 00:58 | up top, all the way down to the
closing HTML tag here at the bottom.
| | 01:03 | Now, let me go ahead and go into Full Code view,
so we can explore this a little bit more easily.
| | 01:11 | Now you may be wondering what's the yellow
background all about, and that's to indicate
| | 01:16 | that the page is not editable.
| | 01:18 | So, you can't make any changes in Live Code
just like you can't make any changes in Live
| | 01:24 | view, but you can get an
awful lot of information from it.
| | 01:28 | With Live Code we can actually pinpoint
sections of the page that we want to work with.
| | 01:33 | So, let's say that we want to work
with the top section of the page.
| | 01:38 | So, now I'm going to scroll down a bit, so I
get to about line 23, and here you see this
| | 01:44 | is where of the body tag begins.
| | 01:47 | And, as you can see, here
are a number of classes set up.
| | 01:51 | There is home, blog, single-author,
two-column, and right-sidebar.
| | 01:57 | Let me go ahead and I'm going to go back into
Split view, and now I'm going to go to a single
| | 02:07 | page, Recent Post, and
I'm going to click the link.
| | 02:12 | In the previous lesson we enabled continuous
link clicking, so I won't have to hold down
| | 02:17 | Ctrl or Command key, and
that will go to that page.
| | 02:22 | And now let's take a look in Live Code view, and now on
line 26 we see the body class has changed significantly.
| | 02:30 | And now, there are a number of different classes
that were dynamically assigned, single, single-post,
| | 02:37 | postid-1, and so forth.
| | 02:40 | Knowing what these classes are named can
help you track down elusive CSS bugs when you're
| | 02:45 | trying to fine tune your pages.
| | 02:47 | Live Code can give you a real under the hood
peak at your WordPress pages during runtime.
| | Collapse this transcript |
| Enabling site-specific code hinting| 00:00 | As noted throughout the course,
WordPress is at its heart a PHP application.
| | 00:05 | More importantly, it is a highly evolved PHP
application with hundreds of its own functions
| | 00:11 | and methods built-in.
| | 00:12 | Dreamweaver includes a feature that can open
the door to this WordPress specific code to
| | 00:17 | make it very straightforward to apply.
Let me show you how to put it to work.
| | 00:22 | So I have opened the index.php file from my
basic WordPress set of files, and I've discovered
| | 00:28 | all of the dynamically-related
files shown here in Split view.
| | 00:32 | Let's say that I want to add a bit
of PHP code to my sidebar.php file.
| | 00:37 | First, I'll use the Custom
Filter to isolate that file.
| | 00:42 | So I'll go over, click on the Filter icon,
choose Custom Filter and then in the field
| | 00:48 | in the Custom Filter dialog box enter sidebar.php,
click OK, and there's my sidebar.php file.
| | 00:59 | Let me go ahead and switch over to Code view.
| | 01:04 | So I'm just going to place my cursor above
the div that you see here, and I'll start
| | 01:09 | to enter in some code.
| | 01:11 | I'll start with a PHP code block, and once
I do that I trigger standard code hints for
| | 01:18 | PHP, and if they don't show up right away I
can invoke them by pressing Ctrl+Spacebar,
| | 01:27 | and there is a slew of functions,
including various PHP functions.
| | 01:32 | Many, but not all, WordPress functions start
with the initials WP, so watch what happens
| | 01:39 | when I enter those initial letters with
code hints being displayed. W--so there's W--
| | 01:45 | and, as you can see, there is a lot of
information about various PHP information that we see
| | 01:50 | here, and if I hit the p character, well there
are no code hints, because WordPress functions
| | 01:56 | are not part of code hints generally,
the code hints toolbar disappears.
| | 02:01 | Now you can however bring them in by turning
on what's called site-specific code hinting,
| | 02:08 | which is found under the Site menu.
| | 02:11 | So I'll go up to Site and
choose a Site-Specific Code Hints.
| | 02:17 | Now there's an awful lot of power built into
this little dialog box, but one of its best
| | 02:22 | features, as far as WordPress is concerned, is
how you don't have to do anything but turn it on.
| | 02:28 | So let me just go ahead and click OK, and
then we'll come back into that dialog box.
| | 02:36 | Although it's not immediately obvious
a new file has been added to the site.
| | 02:40 | Let me close up the CSS Styles panel so we
can expand the Files panel, so let me collapse
| | 02:46 | the blog folder and here right below that folder
you'll see a cloaked file, called dw_php_codehinting.config.
| | 02:55 | Now this file is to be used within
Dreamweaver only, and because it's cloaked it will never
| | 03:01 | be sent up to your server by accident.
| | 03:05 | So now that I have this file added, let's
go back to my code, and this time I'll invoke
| | 03:11 | the code hinting one more time by pressing
Ctrl+Spacebar and type in WP, and this time
| | 03:19 | we have access to
hundreds of WordPress functions.
| | 03:23 | So I'm going to complete this by
entering a little bit more code.
| | 03:26 | Let's say that I wanted to show a list of
pages in the site, so I'll enter wp_list,
| | 03:32 | I'll put in the P for pages there, and
you can see the code hinting narrow down.
| | 03:40 | And once I get to this point I can go ahead
and hit Return and let code hinting do its
| | 03:45 | magic and then I'll just finish off the function
with a closing parenthesis, a Semicolon, and
| | 03:52 | let's close off the PHP code block.
| | 03:55 | So now if I go to Design view, and I'll
click Refresh, and then scroll down, you'll see
| | 04:02 | a list of the pages that we have here.
| | 04:05 | This is the output for the code that we
just put in the sidebar, wp_list_pages, it is
| | 04:13 | of course unstyled and not something we want
to keep so I'm going to go ahead and delete
| | 04:18 | that, and we save sidebar.php.
| | 04:20 | And that's just a small
example of what's possible.
| | 04:24 | Well, Dreamweaver is a Site-Specific Code
Hints features won't teach you everything
| | 04:29 | you need to know about WordPress' function,
it can provide a significant leg up and one
| | 04:34 | that we'll take
advantage of later in this course.
| | Collapse this transcript |
|
|
3. Creating ContentAdding blog posts| 00:00 | In a WordPress/Dreamweaver workflow, you'll want to
take advantage of the strengths of both platforms.
| | 00:06 | One of the key uses of
WordPress is its ease of adding content.
| | 00:10 | As a web designer, it's important to
understand the user experience, so you can create sample
| | 00:15 | content, and control the
look and feel of typical posts.
| | 00:19 | Let's start by opening up
exercise files for Chapter 3.
| | 00:23 | Let's drill down into the 03_01 folder.
Here you'll find a number of documents.
| | 00:29 | If you have Microsoft Word installed, double-click
the Roux Academy Art Conference.doc file.
| | 00:36 | If you don't have Word, you can use the
corresponding Rich Text File with the RTF extension.
| | 00:41 | We have Word installed here, so I'll just
double-click the .DOC file to open it up in Word.
| | 00:46 | Now, in Word, I'm going to
highlight the two paragraphs.
| | 00:50 | I'll leave the title separate because that
goes into WordPress individually, and now
| | 00:55 | that they're highlighted, I'll press Command+C
to copy them, Ctrl+C on the PC of course.
| | 01:01 | Before we flip out of here, notice that we
have two different paragraphs here, as well
| | 01:05 | as some text that's formatted with bold. With that
copied, let's go back over to the WordPress dashboard.
| | 01:11 | Now, if you aren't logged in, open up the index page
for the blog by putting in localhost/roux_academy/blog,
| | 01:22 | and then scrolling down a bit
until you see the login link.
| | 01:25 | Let me show you where that is.
| | 01:28 | Where I have Log out, you would have
Log in obviously, I'm already logged in.
| | 01:35 | So click that, and that will
take you into your Dashboard.
| | 01:38 | Let's bring in a new post.
| | 01:40 | There's a number of ways that you can get
to it, one of the easiest is just go to Posts
| | 01:45 | and then choose All Posts, and then
choose Add New from the flyout menu.
| | 01:52 | And now we're ready to enter in a title, and
I'll put in Roux Academy Art Conference, and
| | 01:58 | once we do that and press Tab, WordPress
creates what's called a Permalink or Permanent link,
| | 02:02 | which you can edit if you want to,
but let's leave it like this for now.
| | 02:06 | Permalinks are very valuable because you
can use them to link from within WordPress or
| | 02:11 | from other programs or other sites.
| | 02:13 | So now I'm in the Editor, and you'll notice
here that there are actually two tabs, one
| | 02:17 | for Visual and one for HTML.
| | 02:19 | We're going to go ahead and stay
in the Visual one for right now.
| | 02:22 | Now I could go ahead and just paste in my
content, but I want to show you a little trick.
| | 02:27 | So when you first come into the Dashboard
for the first time, you'll see one row of
| | 02:32 | buttons in the toolbar editor.
| | 02:34 | There actually is a second row which you
can access by clicking this last button on the
| | 02:39 | left, which is labeled Show/Hide Kitchen Sink.
| | 02:43 | Now on that second row are a couple of clipboard
icons, one for Plain Text and one for Pasting from Word.
| | 02:52 | Let's click on the Paste from Word icon, and
that will open up a dialog box, and now we're
| | 02:58 | ready to paste the text that we had
copied from Word into the dialog box.
| | 03:02 | I'll press Command+V and then click Insert.
| | 03:06 | Now, notice that it came in, and it's
two paragraphs, and the text is bolded.
| | 03:12 | Now one thing I want to point out is that
not only does it add the formatting and all
| | 03:16 | the content, but it actually
converts it to HTML syntax properly.
| | 03:20 | So, if I put my cursor in the seven days and
seven night text here, you'll see down where
| | 03:26 | the path is indicated that we go
from a paragraph to a strong tag.
| | 03:32 | We can verify that by going over to the HTML tab,
and here you'll see the strong tag surrounding
| | 03:39 | that text, as it does also at the bottom.
| | 03:44 | Using strong rather than bold is the proper way to
handle bolding in a web standard compliant website.
| | 03:49 | Now, something else I want to point
out while we're here in the HTML tab.
| | 03:53 | While we have the strong tags clearly present,
you'll notice that there are no P tags or
| | 03:58 | paragraph tags surrounding the paragraphs.
| | 04:01 | Filtering out the P tags is standard
WordPress behavior, and while there are workarounds
| | 04:06 | you could put in place, they can
be more trouble than they're worth.
| | 04:09 | In my view, you're better off just
getting used to this particular WordPress style.
| | 04:14 | When published, WordPress
will put the P tags back in.
| | 04:17 | Now, let's switch back to Visual,
and we're ready to publish the text.
| | 04:22 | So, I click the big blue
Publish button over here on the right.
| | 04:28 | And once that's published, you'll see a
little note up above, Post published, and we have
| | 04:33 | the option for viewing the post.
| | 04:35 | So let me click that, and then I'll scroll down,
and there is our title and our two paragraphs
| | 04:43 | all placed into the existing theme.
| | 04:45 | As you can see, WordPress makes
adding new content extremely easy.
| | 04:49 | It's really no wonder that WordPress is among the
world's most popular content management systems.
| | Collapse this transcript |
| Editing blog posts| 00:00 | Nobody is perfect, and almost every blog post
entered needs to be modified at one point or another.
| | 00:06 | Luckily, editing the WordPress
post is just as easy as creating one.
| | 00:10 | If you're logged in, you can actually enter
into Editing mode right from the blog itself.
| | 00:15 | Right up top in the Admin Bar,
you'll see a link marked Edit Post.
| | 00:20 | Click that, and you'll be taken back
to the dashboard in Edit Post mode.
| | 00:25 | The Admin Bar is a relatively recent addition to
WordPress, and only shows up when you're logged in.
| | 00:30 | Standard site visitors will not see it.
| | 00:33 | Let's go ahead and make a
few changes to the post.
| | 00:36 | I'll add in a paragraph return right before
in addition in the second paragraph and then
| | 00:41 | I'll highlight some of the words in the post.
| | 00:43 | So, let me select 500 hundred here, and
rather than using bolding, let me use Italics this
| | 00:49 | time, and you can see down below that the
em tag is used, emphasis tag, which is the
| | 00:56 | web standard method for emphasizing something
that typically results in a italicized font.
| | 01:02 | Of course, you can control that.
Now, let's do one more.
| | 01:05 | I will do the same thing
for not-to-miss conference.
| | 01:09 | Okay, I've made my changes.
| | 01:12 | Notice that the big blue button
has changed from Publish to Update.
| | 01:16 | And that's because we're doing edits, and
once I do that, we'll get a notice that our
| | 01:24 | post was updated, and I can check that out.
So I'll click on view Post, scroll down.
| | 01:30 | Now, I have three paragraphs
as well as some emphasized text.
| | 01:35 | Okay, let's head back to the dashboard.
| | 01:37 | Now, if you've just left the dashboard, you
can also hit the Back button in the browser.
| | 01:42 | So, that will take us back to Edit Post, and
let's click Dashboard to go to the admin section home.
| | 01:49 | There are several other ways
that you can get to editing posts.
| | 01:52 | From here, you'll see
that I have 2 Posts listed.
| | 01:55 | Now, if I click on post there, it will show
both of my posts, and if I hover over Roux
| | 02:01 | Academy Art Conference, I will have an Edit
option, and then I can click that and go to Edit.
| | 02:08 | Let's go back.
| | 02:09 | I can also just double-click on the title,
which is a nice shortcut for editing your posts.
| | 02:14 | Let's go back one more time.
Now, I also have a Quick Edit option.
| | 02:19 | When I click on that, I don't have the body
of the post available to me, but I do have
| | 02:23 | pretty much everything else.
| | 02:24 | I can change the title, I can
change what's known as the slug.
| | 02:28 | Later on, we'll work with the Categories to change
those up, and I can perform various other actions.
| | 02:35 | So, I'll cancel that operation.
| | 02:38 | Inevitably, there are times
when you want to remove posts.
| | 02:41 | You can do that from the Posts screen as well
as editing or quick editing by hovering over
| | 02:45 | the item you want to get rid
of, like I have Hello world!
| | 02:49 | here, and you'll see a
Trash option listed there.
| | 02:52 | This is a default content,
and we don't need it anymore.
| | 02:55 | So I'll go ahead and trash that.
| | 02:58 | Notice that WordPress does not offer you a
confirm option, it will just immediately delete it.
| | 03:03 | However, you do have the option to undo that
action, should you so choose, which is listed
| | 03:09 | up here right where the message is
that it has been moved to the trash.
| | 03:13 | Before long, you'll find that editing blog
posts will quickly become second nature to
| | 03:17 | you and your clients.
| | Collapse this transcript |
| Adding new pages| 00:00 | Adding new pages to a blog is different from
adding a new page to a standard Dreamweaver site.
| | 00:06 | All of the action takes place in the WordPress
Dashboard instead of the Dreamweaver Files panel.
| | 00:12 | Let me show you how that works.
| | 00:14 | Here in the dashboard, you'll see
over on the left a Pages category.
| | 00:17 | Now if I hover over the term Pages, you'll
see that I have the option for editing the
| | 00:23 | existing ones by clicking All
Pages here or adding new ones.
| | 00:29 | WordPress, by default, starts off with just
one page, as you can see here in the All
| | 00:34 | Pages menu, but I can add as many as I like.
| | 00:38 | Let's start by clicking Add New,
and the first thing is to add a title.
| | 00:44 | I'm going to call this
Conference Schedule At-A-Glance.
| | 00:49 | When I press tab, WordPress
automatically creates the Permalink.
| | 00:54 | All of this information has been recorded
and is being stored in the MySQL database.
| | 00:59 | Now, for the initial content of this page,
I've already created some text that's sitting
| | 01:03 | in the Exercise Files folder.
| | 01:05 | So let's head back over to Finder or Windows
Explorer, open up the Exercise Files folder,
| | 01:12 | and then open Chapter 3 and
03_03 is where we're at now.
| | 01:18 | So again, I have both a DOC and an RTF, so
you can use it whether you have Word or not.
| | 01:24 | Let's double-click on DOC to open it up in
Word, and then again, I'm going to go and
| | 01:29 | select everything except for the title because
we've already put that in, copy that with a Command+C.
| | 01:36 | Now let's head back to our
browser where we can paste it in.
| | 01:41 | And again, I'm going to take advantage of
this Paste from Word option that I have here.
| | 01:46 | Once I open that up, I'll press Command+V,
and it looks a little wonky in the formatting,
| | 01:52 | don't worry about that,
that's just this dialog box.
| | 01:55 | Go ahead and click Insert.
And there is all of our text.
| | 02:00 | Now, let's just go ahead and
publish it and see how it looks.
| | 02:05 | Once it's published, I can click on view Page,
and then scroll down, and there's our new page.
| | 02:13 | Notice that different styles for the bullets,
the filled-in squares are being applied here
| | 02:18 | instead of the standard
unstyled circular bullet.
| | 02:21 | That's just part of the default theme styling.
Well, let me head back to the Edit Page screen.
| | 02:27 | And again, I just want to point out this
Permalink that's automatically created.
| | 02:31 | You might remember that a similar one was
created for the initial blog post that we wrote.
| | 02:37 | WordPress also creates one for every page.
| | 02:40 | You can use this Permalink to make the
connection from other pages on your site.
| | 02:44 | The Page feature in
WordPress is very impressive to me.
| | 02:48 | The more you work with it, the more you'll
come to appreciate the ability to create pages
| | 02:52 | so quickly and easily, and if you're like me regard
it as one of WordPress' most powerful features.
| | Collapse this transcript |
| Including images| 00:00 | Naturally, you could
include images in your blog posts.
| | 00:04 | You'll need to make them available to insert,
and you can do that right from the WordPress
| | 00:08 | dashboard, either one at a
time or in small batches.
| | 00:12 | Let's start with a single image.
| | 00:14 | I'm going to go back to my Pages, and then
reopen Conference Schedule At-A-Glance, and
| | 00:21 | let's add an image right to the top of the
page, right next to the opening paragraph here.
| | 00:27 | So, I'll put my cursor there, and then
choose Upload/Insert, which is above the toolbar.
| | 00:34 | You can also click the small icon if
you want, it doesn't really matter.
| | 00:37 | And then let's choose Select Files.
| | 00:40 | Now we're going to navigate to our
exercise files Chapter 3 in the 03_04 subfolder.
| | 00:48 | And within that is another subfolder called
images, and let's pick up conference_venue.jpg.
| | 00:55 | There's a small preview of it.
| | 00:57 | You can see it's already sized to
180x180 pixels. It looks good.
| | 01:02 | But as you'll see later, that's
not really an issue for WordPress.
| | 01:05 | So, I'll click Open.
| | 01:07 | And once I do that, you'll
see the information down below.
| | 01:12 | I can make some changes to it.
| | 01:15 | There is of course a
possibility for changing the title.
| | 01:18 | So, rather than a lowercase title that has
an underscore in it, let's make it uppercase,
| | 01:25 | or initial uppercase anyway,
and get rid of that underscore.
| | 01:30 | And I'll put in some alt text.
Let's call it Roux Academy Art Conference Venue.
| | 01:40 | You can also add a caption
and description if you like.
| | 01:43 | We'll pass that for now.
| | 01:45 | Now, notice down here below those two
fields, there's a link to the image.
| | 01:51 | WordPress, when it uploads the file, has
taken it and put it within the wp-content/uploads
| | 01:57 | folder, and then it creates several new
folders which are named according to the year and
| | 02:02 | the month that it was uploaded.
| | 02:04 | Right now, when I'm recording
this, it's September of 2012.
| | 02:09 | So it goes into that folder.
| | 02:11 | Now we can also, at this point, go ahead and choose
whether we're going to align it left, center, or right.
| | 02:16 | Let's go ahead and put it onto the left, and we
also have the options for changing the size of it.
| | 02:23 | Since full size is not
that big, it's only 180x180.
| | 02:27 | Let's leave it at those dimensions.
| | 02:29 | Before we insert into the post, I want to show
you that there are some other options that you have.
| | 02:33 | So, let me scroll back up.
| | 02:36 | And right under the image
thumbnail is an Edit Image option.
| | 02:39 | Let's click that for a moment.
| | 02:41 | And, as you can see, there's a whole range
of possibilities here, including cropping,
| | 02:45 | rotating in one direction or another,
flipping vertically, flipping horizontally.
| | 02:50 | And once you do an action, you also have
the ability to undo the action, so these arrows
| | 02:54 | will become active then.
| | 02:56 | You can also scale or
crop the image if you want.
| | 02:59 | Moreover, you'll notice that for large images,
there are thumbnails that are automatically created.
| | 03:05 | These are brought into play for very large
images, and you can either apply the changes
| | 03:09 | that you've just specified to both of the
full-size images, and the thumbnails, a thumbnail
| | 03:13 | by itself, or everything
but the thumbnail. Okay.
| | 03:17 | It looks like we're ready to go.
| | 03:19 | Let's go ahead and cancel the Edit options, and then
I'll scroll back down, and choose Insert into Post.
| | 03:29 | And because we chose Aligned Left, if I select
it here, you can see down below in the little
| | 03:35 | tag selector like bar, there is my image tag
with a class of alignleft applied to it, as
| | 03:41 | well as several other classes.
| | 03:43 | Let's go ahead and update the page, and
then take a look at it in the browser.
| | 03:50 | So, that's working with images one at a time.
| | 03:53 | But what happens if you want to make a
series of images available for your client?
| | 03:58 | You can upload several images at a time to
what's known as the media library without
| | 04:03 | putting them into any posts.
| | 04:05 | Let's head back to the Edit Page screen,
and this time, I'll click the Media icon.
| | 04:12 | If I click it here, the Select Files dialog will
allow me to choose more than one file at a time.
| | 04:19 | So, I can select the first one, and then hold
down the Shift key, and select the other two.
| | 04:25 | Now, we have all three selected, I'll
click Open, and it quickly imports them all.
| | 04:33 | To make any modifications, you click the
associated Show link that you see here.
| | 04:38 | So, let's do that for the first one here,
artwork1, and that will open it up to the
| | 04:43 | screen that we saw before.
| | 04:46 | I'm going to change the title of it here from
the generic artwork1 to something more specific.
| | 04:51 | So, let's call this Self-Portrait by J. Jerome.
| | 04:58 | Now, instead of inserting the image into a post, I'm
just going to scroll down and click Save all changes.
| | 05:09 | So that will now show me what
images are in my media library so far.
| | 05:13 | And here you can see the four that I've added
to the library, the one that I renamed which
| | 05:18 | was from artwork1 to Self-Portrait by J.
Jerome, artwork2, and artwork3.
| | 05:24 | Now, let me show you how to add an
image from your media library into the post.
| | 05:28 | So, I'll close the Add Media dialog box, go
back to my post, and I'm going to put my cursor
| | 05:36 | right between the two days that we have here.
So again, I'll go and click the media icon here.
| | 05:43 | Now, instead of choosing Select Files again
which will allow me to upload files, let's
| | 05:49 | go to Media Library, and then I'll
choose Show right next to the Self-Portrait.
| | 05:55 | Again, you've got the possibility for making
all kinds of updates to title, caption, et cetera.
| | 06:00 | So, let's go ahead and add a caption
here, so you can see how that works.
| | 06:03 | I'm going to copy the title, and then paste it in
the Caption field, and let's add a date in parentheses.
| | 06:11 | Now, I want this image to be centered and
not left, so I'll choose that alignment option,
| | 06:16 | and let's scroll down and see about our sizing.
| | 06:19 | Again, I still think it's still okay size-wise,
and now we're ready to choose Insert into Posts.
| | 06:25 | Now, I have my image
there complete with caption.
| | 06:30 | Let's go ahead and click
Update, and view the page.
| | 06:35 | Now, there's my initial image, and there's
my second image, centered as I requested,
| | 06:42 | complete with a little caption that we see here.
| | 06:45 | Now, the caption can be
easily stylized with CSS as well.
| | 06:50 | You'll find that with
these demonstrated techniques.
| | 06:52 | You can either add images to the site one at
a time, or upload any number to be inserted
| | 06:57 | as needed by your clients.
| | Collapse this transcript |
| Adding videos to posts| 00:00 | An embedded video can really
make a blog post jump off the page.
| | 00:04 | However, you can't use the same techniques
you would in Dreamweaver to make it happen.
| | 00:09 | Let me show you a quick way to embed a
YouTube video in a blog post without resorting to
| | 00:14 | plug-ins or other add-ons.
| | 00:17 | We'll start by creating a new Post and give
it a title Video Production Project Online.
| | 00:26 | Now before I go any further I want
to show you the path not to take.
| | 00:31 | You might think that Upload/Insert link that
we see here is the way to go, especially because
| | 00:37 | when I open it up, and I go to From URL,
there is a Audio, Video, or Other File option.
| | 00:45 | However, if you follow this process all
WordPress will do is add a link to that video or any
| | 00:52 | other media that you're
inserting onto your page.
| | 00:55 | While that might be right in some cases, in
this particular scenario that's not what we want.
| | 01:01 | So let me go ahead and cancel this, and now
I'm going to add a bit of text here into the
| | 01:08 | post, I'll highlight our
Video Production 201 course.
| | 01:13 | Now I want my video to appear below the text,
so I'll create a new line, and now we're ready
| | 01:17 | to go out and get our code for the video.
| | 01:20 | Let's switch over to YouTube where I have
a Explore California Weekly podcast queued
| | 01:26 | up that I've published.
| | 01:27 | Let me play little bit of
that so you can see what's like.
| | 01:31 | (video playing)
All right, that's looks pretty good.
| | 01:39 | Now I'll scroll down a bit here.
| | 01:44 | If I click on Share another window opens up with a
number of various options, including the short URL.
| | 01:50 | That's already selected, so all I have to do
is press Command+C, Ctrl+C of course to copy it.
| | 01:57 | And that's really all I need from YouTube.
You don't need the embed code or anything else.
| | 02:01 | So let's hit back to WordPress, and I'll
paste that in and add extra line Return after it.
| | 02:09 | Now you won't see a representation of
the player in the editor just the URL.
| | 02:14 | So let's publish a post and then
take a look at it in the browser.
| | 02:24 | There is my title, my text, and my video.
Let's check it out by playing it a little bit.
| | 02:30 | (video playing)
Same friendly people in California.
| | 02:38 | Everything's looking pretty good.
| | 02:41 | This code, by the way, use HTML5
compliant with a Flash fallback.
| | 02:45 | So you're covered cross
browser and cross-platform.
| | 02:48 | Pretty sweet, aye.
| | 02:49 | So there you have it, a quick and easy way
to embed a video on your WordPress page.
| | Collapse this transcript |
|
|
4. Working with WordPress ThemesUnderstanding WordPress structure| 00:00 | One of the real strengths of
WordPress is its flexibility.
| | 00:04 | You can easily switch the look and feel of your site to
one totally different by activating a different theme.
| | 00:10 | New pages can be quickly
added for any special purpose.
| | 00:14 | Content can be grouped by custom
tags are categories added on the fly.
| | 00:18 | However, all this flexibility comes at a price.
WordPress is a pretty complex application.
| | 00:24 | In this video I'm going to explain just how
WordPress works so that you can get a better
| | 00:30 | grasp of what your options
are when creating a custom blog.
| | 00:34 | So the first thing that happens is a visitor
requests an initial WordPress page: index.php.
| | 00:41 | This starts the whole ball
rolling as in viewing any web page.
| | 00:45 | Next, WordPress activates the themes.
| | 00:49 | This is actually the first line of
executable code in the WordPress index.php file.
| | 00:55 | Then WordPress works with a series of template
files that are dynamically assembled together
| | 01:00 | to create the desired page.
| | 01:03 | So it must check to see
which template files are present.
| | 01:07 | Then it gathers the settings
that are stored in the database.
| | 01:10 | This includes all default settings and any ones
that have been customized like the title of the site.
| | 01:17 | Next to it retrieves the
specified number of most recent posts.
| | 01:21 | The default is 10, but you can set how many posts
you want to show through the dashboard settings screen.
| | 01:28 | Then WordPress stores the
post data in a variable.
| | 01:32 | This includes data about the posts like
the title, the author, the date of the posts,
| | 01:37 | and links to comments--all of this otherwise known
as metadata--as well as the content of the post itself.
| | 01:44 | Then it outputs the data onto a theme page
according to the coded layout and CSS styles are applied.
| | 01:51 | When you customize a theme this
is where most of the work lies.
| | 01:55 | As you can see, there's a lot going on here,
and it all happens in the blink of an eye,
| | 02:01 | and this is just for the homepage.
| | 02:04 | WordPress is capable of displaying all
types of pages, including those for single post,
| | 02:09 | archives, post under a particular
category, or with a specific tag.
| | 02:13 | One of the key paths to developing custom
WordPress blogs is to understand what happens
| | 02:20 | when these and other
types of pages are requested.
| | 02:23 | Remember this step where WordPress checks
to see which template files are present?
| | 02:28 | A theme doesn't have to have a
specific file for every type of page.
| | 02:34 | WordPress has a template hierarchy built-in that
determines what to do if a needed file is missing.
| | 02:41 | Let me give you an example.
| | 02:43 | Let's say the site visitor clicks on the
author's name--mine, in this example--to see all the
| | 02:49 | posts that he or she have written.
| | 02:51 | First WordPress looks to see if there's a
template that combines the author prefix with
| | 02:57 | the author's so-called nice
name and uses that if there is.
| | 03:01 | If there's not, it looks for one with a user id.
| | 03:06 | If that's not there, it tries to
display the generic author.php template.
| | 03:12 | Should that template be unavailable it looks
for a theme specific archive.php, and if that's
| | 03:18 | not there, it uses the index.php
template, the original one.
| | 03:24 | The WordPress template hierarchy
covers all the different use cases.
| | 03:29 | You can see a complete
diagram in the WordPress.org site.
| | 03:33 | The template hierarchy gives web
designers a tremendous degree of control.
| | 03:37 | You can basically decide how much you want
to fine-tune the structure and layout of your
| | 03:41 | WordPress blog on a page by page basis.
| | 03:44 | Now that you have a better understanding of
how WordPress works in general you're ready
| | 03:48 | to see how themes fit into that picture.
| | Collapse this transcript |
| Activating a theme| 00:00 | In this lesson I'll show you how to work with
different themes in WordPress completely altering
| | 00:05 | the look and feel of your
blog with just a quick click.
| | 00:09 | A WordPress theme controls the layout as
well as the styling of a WordPress site.
| | 00:14 | There are a great many WordPress themes
available and customizing one is a terrific way to learn
| | 00:19 | how WordPress works, as well as developing
your own custom site, but before you can gain
| | 00:24 | access to the theme you'll need to activate it.
Let me show you how that's done.
| | 00:29 | So here we are in the WordPress Dashboard, and
I am going to expand the Appearance category,
| | 00:35 | and you see the very first option is Themes where
there are two tabs, Manage Themes and Install Themes.
| | 00:43 | On the Manage Theme side you'll see two
themes ship by default with WordPress.
| | 00:49 | Twenty Ten listed down below here under Available Themes
and Twenty Eleven, which is the currently activated theme.
| | 00:58 | I could activate Twenty Ten, but honestly there's not
a tremendous difference between these two themes.
| | 01:04 | So that you can get a good sense of the power of
themes, let me install and activate another theme.
| | 01:10 | We'll go to Install Themes, here, where you
can, if you like, search for a theme with
| | 01:16 | specific characteristic as you see
here, Colors, Columns, Width, and so on.
| | 01:20 | You can also browse the Featured Themes
or the Newest Themes or Recently Updated.
| | 01:27 | As I said there are
thousands and thousands of themes.
| | 01:31 | But I am going to kind of cut to the chase
here, and let's go to Search, and we are going
| | 01:36 | to search for a theme called Motion that I
thought was kind of really nice and very,
| | 01:41 | very different from the default themes.
| | 01:43 | So let's take a look at
how that looks in preview.
| | 01:46 | I'll click the Preview link below that.
| | 01:51 | And you can see the thumbnail over on the
left, and this is just the generic preview
| | 01:57 | text and setup that is
used at every WordPress theme.
| | 02:01 | As you can see, it has a very different
background and a very different feel to the navigation.
| | 02:06 | Now as I scroll down you can see how the various
headings are handled as well as basic paragraphs,
| | 02:14 | the different list types, forms, and so on.
| | 02:19 | So I am going to go ahead and click Install
and WordPress will download the install package,
| | 02:26 | unpack it, set it up, install it, and now
that it's installed we could do a Live Preview
| | 02:32 | which would show you what your
content look like with this theme.
| | 02:35 | But let's go ahead and just
activate it so we can see it very quickly.
| | 02:39 | You will notice that the previously
currently active theme, Twenty Eleven, has now been moved down
| | 02:45 | to Available Themes.
| | 02:47 | So let's take a look at our existing content
for the Roux Academy site in the Motion theme.
| | 02:52 | I'll go ahead and just click Roux Academy
here, and there is the Roux Academy titled
| | 02:58 | there as well as our video production blog
and here is our video, and actually it looks
| | 03:06 | quite nice sitting there.
| | 03:09 | Let's take a look at the standard
blog entry that we had put in here.
| | 03:13 | Here is the Roux Academy Art
Conference with its styling.
| | 03:17 | I'll go ahead and click on
that to go to the single page.
| | 03:20 | As you can see, it's really a different style,
all the way through, including your links
| | 03:25 | which even have a dotted
border below it. Very stylish.
| | 03:29 | Next, I want to show you one other way to
bring in a theme and along the way introduce
| | 03:34 | you to the simple theme we'll be
customizing to create our site-specific blog.
| | 03:40 | So let's head back to the
Dashboard, go back down to Themes.
| | 03:45 | Here is another way to get to it just roll over
Appearance and then choose Themes from the flyout menu.
| | 03:53 | Now again we'll go to Install Themes, and this time
choose the Upload link that you find near the top.
| | 04:02 | And we'll choose a file, we'll navigate to
your exercise files, Chapter 4, and select
| | 04:11 | the custom.zip file.
| | 04:14 | Themes are stored as zip files, so you want
to make sure that you choose that one rather
| | 04:18 | than the uncompressed
custom folder that you see there.
| | 04:22 | Click Open and then back in
WordPress choose Install Now.
| | 04:27 | It looks like it's installed
successfully. Let's activate it.
| | 04:32 | Now this is a very stripped-down
theme that was created from scratch.
| | 04:37 | If you're interested in how that was done, check out
my course from the lynda.com online training library.
| | 04:43 | Now let's take a quick look at
the site with the theme applied.
| | 04:46 | Again, I'll go up and click Roux Academy.
| | 04:50 | As you can see, it's very bare bones which makes
it ideal for applying your own custom look and feel.
| | 04:56 | Here is my video, let's go to the Roux
Academy Art Conference. There's that.
| | 05:01 | Here is the Conference Schedule At-A-Glance.
| | 05:03 | It looks like we need some
styling there to take care of that.
| | 05:08 | Let's head back to the Home page.
| | 05:11 | Now you may be wondering how themes
fit into the overall site structure.
| | 05:15 | Let's head back over to Dreamweaver
so you can see exactly how it works.
| | 05:20 | I am going to expand the Files
panel here so you can focus on that.
| | 05:31 | Now let's open up the blog folder, which you
will recall, of course, is our WordPress folder,
| | 05:36 | and there within the blog folder
is another folder called wp-content.
| | 05:40 | So let me open that up and scroll down.
| | 05:45 | Let me open up the names a little bit here,
because it is going to be expanding into that
| | 05:51 | area and here we see several
subfolders under wp-content, including themes.
| | 05:58 | So if we expand that one, you'll see a
different folder for each of the themes.
| | 06:04 | There are the two default themes twentyten
and twentyeleven and the themes we brought
| | 06:09 | in, motion and custom.
| | 06:11 | When you're first working with WordPress,
you will probably download and try out a bunch
| | 06:15 | of themes just to see
what's available. That's fine.
| | 06:18 | However, there will come a time when you want
to remove any unused themes, especially when
| | 06:23 | you're turning over a custom site to a client.
| | 06:26 | Now you can via the Manage Themes area
in WordPress delete any unwanted themes.
| | 06:31 | Let me show you where that is go back to
Dashboard > Themes, and if I go down to the Available
| | 06:39 | Themes here, each of them has a Delete option.
| | 06:43 | Now you also have the ability to
remove themes right from Dreamweaver.
| | 06:46 | So I'll head back to Dreamweaver where you
will see that all you really need to do is
| | 06:51 | to go in the themes folder and
delete the related subfolder.
| | 06:54 | So let's get rid of motion here.
I'll select that and press the Delete key.
| | 06:59 | Dreamweaver asked for confirmation, I'll
click Yes, and now that, that file is gone let's
| | 07:05 | head back to WordPress, and once I refresh
the page, you will see that Motion is no longer
| | 07:13 | one of my Available Themes.
| | 07:15 | With basic theme management under your belt
you are ready for the next step, child themes.
| | Collapse this transcript |
| Setting up a child theme| 00:00 | In this lesson, I'm going to show you
how to set up a WordPress child theme.
| | 00:05 | As the name implies, a child theme is one based on
another theme known naturally as the parent theme.
| | 00:11 | A child theme can inherit styles from
the parent while also establishing its own.
| | 00:17 | Child themes allow you to make any and all
necessary changes for a custom blog site while
| | 00:22 | maintaining the parent theme.
| | 00:24 | This latter point becomes really important if the
parent theme has ever upgraded, as they often are.
| | 00:30 | So let me start by opening up the
style.css for our current theme, custom.
| | 00:36 | I'll go over to my Files panel and drill
down into blog > wp-content > themes, the custom
| | 00:45 | folder there, and expand that and then scroll
down just a little bit more until you find style.css.
| | 00:52 | Let's double-click that and open it up.
| | 00:54 | At the top of the file you can see a comment that
WordPress uses to get its theme information from.
| | 01:01 | Here is the name of the file on line 2 as
well as the URI of the developer, a short
| | 01:07 | Description, the Author, and Version number.
So we'll use a similar comment for our theme.
| | 01:14 | Now you know when you install a new
WordPress theme it's maintained in its own subfolder
| | 01:19 | found within wp-content themes just like the
Twenty Eleven or the Custom theme we are using now.
| | 01:26 | So to create a child theme, you need to
create a new folder in the themes folder.
| | 01:31 | So I'm going to right-click on themes and
choose New Folder, and I am going to name
| | 01:40 | this new folder roux, R-O-U-X.
| | 01:44 | All a child theme actually needs to be recognized
by WordPress is its own style.css file, although
| | 01:50 | you can also, as you'll see, add images, functions,
separate pages just like you would any other theme.
| | 01:57 | So let's create that CSS file now.
| | 02:00 | I'll go to File > New and then from
Page Type choose CSS and click Create.
| | 02:09 | Well, let's go ahead and
save this in our roux folder.
| | 02:13 | So I'll choose File > Save.
So here we are in the site root.
| | 02:18 | We'll drill down into blog > wp-content >
themes, and there's our roux folder, and we want to
| | 02:27 | save this using the default name used by
WordPress, style.css, and once that's saved we want to
| | 02:36 | get rid of the code that's up top here that
Dreamweaver puts in because in order for it
| | 02:41 | to be properly recognized as a style sheet
for theme we have to start with a CSS comment
| | 02:46 | that is correctly structured for WordPress.
| | 02:49 | so let's switch back over to our custom.style.css,
and I just want to point out if you ever get
| | 02:55 | confused when you have multiple style.css
files open, you can always hover over the
| | 03:01 | tab and Dreamweaver will show you the
entire path, and you can see in there that I have
| | 03:06 | this as the roux folder and here is the
custom one, if you look at the third to last word
| | 03:12 | there on the right.
| | 03:13 | Now you also have this option, in Open
Documents, which will show you the full path and allow
| | 03:18 | you to switch from one to the other very easily.
So here we are in the Custom Theme.
| | 03:25 | Let's go ahead and copy
this opening comment here.
| | 03:29 | I'll just select that and press Command+C, then
switch back over and Command+V to paste it in.
| | 03:37 | Most of this stays the same, but you
do want to make a couple of changes.
| | 03:41 | We'll need to change the names.
| | 03:42 | So instead of Custom Theme, let's just call
it Roux, and everything else can stay the same
| | 03:48 | if it's still accurate, but you will need
to add one more line, and that's the template
| | 03:53 | line which indicates which parent to use.
| | 03:56 | So you want to put in the
keyword template, followed by a colon.
| | 04:00 | So let's put it right below Author here,
Template, colon, and a space, and now you want to
| | 04:07 | right in not the name of the theme as you
might expect like Custom Theme, but rather
| | 04:12 | the theme's folder name.
| | 04:15 | So in this situation we are going to be linking to the
theme that's in the folder custom with a lowercase c.
| | 04:21 | So here I'll just put in
custom and save my file.
| | 04:25 | A child's theme style sheet completely
replaces the style sheet of the parent.
| | 04:31 | So if you're not doing a complete overhaul
and one of the benefits of doing a child theme
| | 04:35 | is that you have to, the first thing you
want to do is import the parent style sheet.
| | 04:41 | So now I am going to add my @import statement,
and we'll use the URL parameter to point to
| | 04:47 | the style.css file located
in the Custom Theme folder.
| | 04:51 | And I'll place that right below the comment.
| | 04:55 | So @import url, open parentheses, starting my quote here,
and we're going to be going up a folder,
| | 05:04 | so dot-dot slash, the name of the folder we're going
into, which is custom, another slash to go back into
| | 05:12 | that folder, and then style.css. Close the quote, close
the parentheses, and put a semicolon at the very end.
| | 05:21 | Okay, we'll save our file, and we are ready for the last
step in setting up our child theme, activation.
| | 05:29 | So let's go back to the Dashboard, and
we'll go to our Themes category, and now you see
| | 05:36 | there's a new theme
that's available to us, Roux.
| | 05:40 | You will notice that, of course, this doesn't
have a graphic, that's because we don't have
| | 05:44 | an image named screenshot within the
Roux Theme folder, but that's okay for now.
| | 05:49 | We don't really need one.
| | 05:51 | So now if I go over the Details option,
here, and click on that, you'll see some of the
| | 05:57 | information that's pulled in from the comment,
our version number, our short description,
| | 06:02 | and it also tells you, and this is kind of
important exactly where the template files
| | 06:07 | are located and right now because this is
a child theme, template files are located
| | 06:12 | in themes/custom and the stylesheet files
style.css, in other words, are in themes/roux.
| | 06:21 | It goes onto say that roux uses templates
from Custom Theme making it very clear that
| | 06:25 | this is a child theme working
with the parent custom. All true.
| | 06:31 | So all we need to do now is click Activate,
and now our new theme is active, and if we
| | 06:37 | were to preview it, we'd see exactly what we
saw before with custom, because we're using
| | 06:43 | its exact stylesheet.
| | 06:45 | But the important thing is now that this
part of the work is done we are ready to move on
| | 06:50 | to complete customization.
| | 06:52 | You'll find that child themes are pretty
straightforward to set up, and as you'll see it's a perfect
| | 06:57 | vehicle for your custom designs.
| | Collapse this transcript |
|
|
5. Customizing a ThemeUpdating the page structure and the background| 00:00 | In this chapter we're going to work with
the child theme setup in the Chapter 4 lesson--
| | 00:05 | which was appropriately named setting up a
child theme--so that our basic WordPress page
| | 00:10 | fits in with our existing site.
| | 00:12 | We'll take an outside-in approach starting with
the page background and the basic page structure.
| | 00:18 | When I'm working on a project like this,
I always develop a comp in HTML first.
| | 00:22 | The comp will give us the precise CSS
declarations we'll need to replicate a design, as well
| | 00:29 | as clues to the required underlying structure.
| | 00:32 | Let's open up the blog comp for this site,
which you'll find in the website files within
| | 00:37 | the _source folder you see here,
and it's called blog_comp.htm.
| | 00:43 | So let's go into Live view so you
can just take a quick look at it.
| | 00:48 | And if I open up the index page from the site,
you see that it's, basically, kind of the same thing.
| | 00:53 | Let me actually go and choose another page,
that's a little bit more basic like about.htm,
| | 01:01 | and I'll go into Live view there.
| | 01:05 | So here's the basic look and feel of the site,
and you can see there's a big footer down
| | 01:09 | at the bottom, a sidebar over on the
right-hand side, header graphic, and so on.
| | 01:14 | Now my blog_comp looks very similar.
| | 01:16 | I've got a specialized header graphic, main
content area over on the left, and a sidebar
| | 01:22 | over on the right, and this is styled to
be uniform rather than having multiple boxes.
| | 01:27 | But that's just a design that we chose here,
and we have the same kind of large footer
| | 01:32 | area at the bottom.
Now let's open up index.php from the blog site.
| | 01:40 | So I'll go to blog and double-click on index.php
and enter into Live view and then let me dynamically
| | 01:48 | discover all the files.
| | 01:50 | Again, Dreamweaver will put up a
script warning for us, we just click Yes.
| | 01:55 | Okay, it's found all of our files.
| | 01:57 | Now let me close about.htm so we
can compare our Apples to Apples here.
| | 02:02 | We're in a Live Design view in both of them.
| | 02:05 | So here's our existing blog page
and here's what we're aiming for.
| | 02:09 | As you can see, we have
quite a bit of ways to go.
| | 02:13 | Let's scroll down so we can look at what
constitutes the footer, and it's very basic down at the
| | 02:17 | bottom whereas I have a
much more elaborate footer.
| | 02:22 | The other major difference is, of course, that
the sidebar appears to be over on the right
| | 02:26 | in the blog comp, and it's on
the left in our current page.
| | 02:31 | We'll eventually get to working out all of
those details, but as I said, I want to start
| | 02:36 | from the outside in, and this will be a little
bit more noticeable if I close off my panels here.
| | 02:44 | So the first thing that I notice is a
big difference is the background color.
| | 02:47 | Here, on this page, we have a basic light gray
and then, here, on this comp is a much darker
| | 02:55 | gray, obviously a very specific color.
| | 02:58 | So let's open up the Styles panel again,
because we're going to be using those quite a bit,
| | 03:02 | and I'm going to open up my CSS Styles panel,
expand that just a bit, and we see that over
| | 03:12 | here on this side, all right perfect.
| | 03:14 | So the first thing I want to do is pick up
the value of the background color by using
| | 03:19 | the Inspect feature that we see
available to us once we are in Live mode.
| | 03:24 | So I'm going to go ahead and just click on
Inspect and then roll over the background
| | 03:30 | a little bit and go ahead
and click once to lock that in.
| | 03:35 | Now we want to make sure that your CSS Styles
panel is in current mode, and that will give
| | 03:39 | you the most current files.
| | 03:41 | I'm going to shrink down the Files panel so
we can see a little bit more of our CSS styles
| | 03:47 | panel as we're working
with that exclusively now.
| | 03:49 | So now I'm looking for the background
color, and I have to discover where that is.
| | 03:53 | Now because I inspected the body tag,
that's the first one you'll see here in the Rules
| | 03:58 | Pane, but if you just scroll up and click
one tag after another--climbing the tree if
| | 04:04 | you will--until you come across a background
color or background property as we see here
| | 04:10 | in the HTML tag, you can easily find
the background color that's applied.
| | 04:14 | So all I need to do now is click into the
Properties area there, and I'm going to copy
| | 04:19 | that value add let's go
apply it over on our comp.
| | 04:23 | So we'll do the same thing and then Live view,
and I'll choose Inspect and scroll over to
| | 04:29 | the outer area where we see that and here
very quickly we see that the background is
| | 04:37 | applied on the body tag.
| | 04:39 | Now we want to find out
exactly where that is applied.
| | 04:42 | Now if you go up here and hover over body
in the Rules Pane you'll see a little tooltip
| | 04:47 | that tells you that the
rule is defined in style.css.
| | 04:52 | So a good thing to do at this point would
be to use the Custom Filter up in the Related
| | 04:57 | Files Toolbar that will allow us
to hone in on the style.css file.
| | 05:03 | So let's open that up, choose Custom Filter,
and then in the Custom Filter dialog enter
| | 05:10 | in style.css in the field and click OK.
| | 05:16 | Now you'll see that there are actually two
style.css style sheets, one that is connected
| | 05:23 | to our Custom Theme folder and one
that goes for our Roux child theme folder.
| | 05:29 | We want to put any styles that we create in this
style sheet, the one that is stored in the Roux folder.
| | 05:36 | And we do that so that we keep the style sheet
and all the other files that are in the parent
| | 05:42 | theme as they were, so in case they ever get upgraded we
don't lose any styles or modifications that we've made.
| | 05:49 | Now you may recall that we had two different
selectors in use here, blog_comp had the background
| | 05:55 | color applied to the HTML tag, whereas on
the side it was applied to the body tag.
| | 06:02 | So we want to use the selectors that are found in
our child theme and not the ones that are in the comp.
| | 06:09 | So I'm going to put in body open up a curly
brace, background, and I copied in that
| | 06:17 | value so it you can just pace that in, put
in a Semicolon, let's make in a little
| | 06:22 | bit more room--let's see that all in one
line-and then close off the curly brace.
| | 06:28 | All right, first rule is done.
| | 06:30 | Now if we click back into our Design view,
and let's give it just a little bit more room
| | 06:36 | here, I'm not going to see a whole lot
of it but there's a thin gray right there.
| | 06:39 | Now, you won't see it until you hit Refresh.
| | 06:41 | I'll tell you what, let's go to Design view
there so you can actually see the background
| | 06:46 | and so you can see, now we have
that same dark gray color. Great.
| | 06:50 | Well, let's continue working
our way from the outside in.
| | 06:53 | Next stop is the width of the page.
Let's take a look at the comp.
| | 06:58 | I'm going to click on Inspect and then
try to locate the full width of the page.
| | 07:04 | One way to do this is to hover over any
element and then you actually use your arrow keys
| | 07:09 | to climb up the DOM tree if you will.
| | 07:12 | So I'm going to click my Left Arrow key
which will go up the tree, as you can see, every
| | 07:17 | time I do, I'm now on article in the
mainContent area, if I click it again, it's going to go
| | 07:22 | to the div that surrounds just the content
called the content wrapper, my header is still
| | 07:26 | not brought into play and then, it
goes to the blog around the body page.
| | 07:32 | Okay, so again, we have the width that's
on the body tag, and it's at 960 pixels, and
| | 07:40 | let's head on over, and let's
find where that width should be here.
| | 07:44 | So I'll start in the header and again,
pressing my Left Arrow key to step up of the DOM, I'll
| | 07:50 | go, there's the header area, there's the
outerWrapper, and that seems to be the width.
| | 07:55 | This is pretty common, in a lot of designs,
you'll see a div named wrapper or outerWrapper
| | 08:01 | or something like that, that will
hold the page elements together.
| | 08:04 | Okay, so this is where we want to be, but
rather than change the width right here on
| | 08:08 | outerWrapper which is stored in the style.css
file that is found in the Custom Theme folder,
| | 08:16 | we want to go to our Roux theme
style sheet and put it in there.
| | 08:20 | So it's an id of
outerWrapper and a width of 960.
| | 08:33 | Now I notice that there were a couple of
other properties associated with that same rule
| | 08:40 | that I may want to pick up.
Let's go ahead and take a look at those.
| | 08:42 | Here we have margin 0
auto and position relative.
| | 08:47 | Let's go ahead and bring that in.
| | 08:48 | Margin 0 auto is going to center our page
and position relative, it's kind of an odd
| | 08:53 | one to have for body, so it probably has
some impact on the way things are laid out.
| | 08:58 | So to get through those properties, the
easiest thing to do is to right-click on body on the
| | 09:03 | Rules Pane and choose Go to Code, and there's
our rule starting at 160, and I'm just going
| | 09:10 | to copy those two properties and then, head on
over to our style sheet here and paste them in.
| | 09:18 | So I'll save this style sheet here.
| | 09:21 | Now the last aspect of the page I
want to check is its basic structure.
| | 09:25 | So I can see if I need to make any
fundamental changes to the WordPress page.
| | 09:29 | One really good technique for viewing the
structure of a page is to use Dreamweaver's
| | 09:34 | Live Code view in
conjunction with code collapse.
| | 09:38 | Let me show you what I mean.
| | 09:39 | So let's go back to the comp page, and
I'm going to enter into Live Code view.
| | 09:46 | Let me open up a Code view all the way, so we
can take advantage of the larger screen size.
| | 09:52 | You'll recall that the yellow background
indicates that Live Code is not editable.
| | 09:55 | But that's okay, all we're doing is looking.
| | 09:58 | So let's scroll down to the body section,
which starts on line 13, I'm going to scroll down
| | 10:04 | a little bit more to bring it up.
| | 10:08 | Our first major division is the header tag,
not a surprise as we saw that the page width
| | 10:12 | was controlled by a CSS rule for the body
and not for something like outerWrapper.
| | 10:17 | So let's collapse the
header and see what's next.
| | 10:21 | To do that place your cursor right after the
header tag and then go up to the third icon
| | 10:27 | which says Collapse Full Tag and click that
once, and that will invoke the Code Collapse
| | 10:33 | feature, and I can bring it back if I want
by clicking on the arrow here and collapse
| | 10:38 | it again by clicking that same arrow.
| | 10:40 | Okay, so we have the header, looks like the next
major structural element is the contentWrapper.
| | 10:46 | Let's leave that open so we can
see what content it wraps around.
| | 10:49 | The first major division within
contentWrapper is an article tag with an id of mainContent.
| | 10:54 | So let's collapse that, again put my cursor
right after the close of the article tag there,
| | 10:59 | and go to Collapse Full Tag and then the
next division is on aside, again, let's collapse
| | 11:05 | that, and there we see that that's
all that's within contentWrapper.
| | 11:09 | Okay, we're moving right along, looks like
we have a footer here, let's collapse that
| | 11:14 | one, and that finishes up the page.
| | 11:17 | So there's our page structure, body, header,
contentWrapper, which contains article and
| | 11:24 | aside followed by footer.
Now let's do the same thing on our index page.
| | 11:30 | I'll go over to index.php, I'm already in
Live view, so I just have to go Live Code
| | 11:38 | and then let's go to code view, and
I'll scroll up to around where the tag is.
| | 11:44 | So let me clear the selection just by clicking
in and my cursor now is right after outerWrapper
| | 11:49 | but again, because this wraps
elements we don't want to collapse this one.
| | 11:53 | Let's go to the next element that it contains
which is header, so I'll put my cursor right
| | 11:58 | after the opening of the header tag and
collapse that, and now we come to another wrapper,
| | 12:03 | contentWrap and again we'll go
to the next division after that.
| | 12:08 | So this one is a div with the id of content,
let's collapse that, and then we find another
| | 12:13 | div with the class of widget-area, that's
our sidebar, and let's collapse that and then
| | 12:20 | there's the footer, let's collapse that.
| | 12:22 | So now we have this structure which is body,
outerWrapper, header, contentWrapper, the
| | 12:30 | div that contains our
sidebar, and then the footer.
| | 12:33 | And if we compare the two, we can see that they're
basically the same thing except for an outerWrapper.
| | 12:38 | The important thing is that the content is
followed by the sidebar the same way for both.
| | 12:45 | So we won't have to make any major structural
changes, and that means we're ready to start
| | 12:49 | working on the page elements
themselves starting with the header.
| | Collapse this transcript |
| Working with web fonts| 00:00 | The emergence of web fonts is one of the most
far-reaching innovations in web design in recent years.
| | 00:06 | Finally, designers are freed from the
stranglehold of just using system fonts.
| | 00:11 | The general Roux Academy site makes use of
several web fonts for both headings and body copy.
| | 00:17 | So we'll want our blog to follow suit.
| | 00:20 | Although it's an essential step it's no big
deal just copying and pasting a set of files
| | 00:25 | and a chunk of code.
| | 00:27 | You can tell that there is a web font in use,
if I click right into this h1 tag, here, and
| | 00:33 | then look over in the Properties Pane, you
see font-family Bitter comma Georgia et cetera,
| | 00:38 | Bitter obviously is a web font, and there
are others that are in use throughout the site.
| | 00:44 | So those fonts are stored locally.
| | 00:46 | So I'm going to go ahead an expand the
Files panel and locate those in the rest of the
| | 00:52 | site and they're in a folder called _fonts,
so I'll just open that up, and you can see
| | 00:57 | there's a quite a bit of them there, Bitter
is being used as well as one called DroidSans.
| | 01:03 | Now I want to go ahead and copy this entire
folder, so I'm going to select it and then
| | 01:08 | press Command+C, of course on
the PC you would choose Ctrl+C.
| | 01:13 | Now we want to take this font folder, and we want
to put it in our child theme folder, which is roux.
| | 01:19 | So let's go down to the wp-content folder,
and then within the themes folder locate roux,
| | 01:26 | and I'll just go ahead and expand that, so
you can see right now all we have in it is
| | 01:30 | style.css, and then I'm going to use Command+V
to paste in my copied fonts. All right.
| | 01:37 | Now let's move into the code.
I'll shrink the Files panel.
| | 01:41 | I'm going to go ahead and just go to
Code view and make sure you are in main.css.
| | 01:47 | This is for our blog_comp and the rules
for web fonts are typically stored at the top
| | 01:52 | of the page, so I'm going to scroll up there,
and here you can see the start of them is
| | 01:56 | quite a number of rules, I
think there are five in all.
| | 01:59 | So I am just going to copy all of those, starting
with the little comment there, Font declarations,
| | 02:08 | and then ending with the last @
font-face rule for DroidSans.
| | 02:12 | So again, I'll go a Command+C to copy it,
and now let's go over, and we'll close up
| | 02:20 | the CSS Styles panel for a second just so
I can scroll up and go to my index.php page
| | 02:26 | that's located in the blog folder, I'll
open that up, and let's click on Discover.
| | 02:31 | I'm going to go ahead and click the Don't
warn me again, because we're going to be doing
| | 02:36 | this a lot, and there's no need to have to
click the Yes button each time. All right.
| | 02:43 | Now I'm going to set the Custom Filter to style.css,
click OK, and there's our two style.css sheets.
| | 02:54 | The first one is the one for the roux folder,
as you can see, and we want to continue to
| | 03:00 | put our web fonts close to the top.
| | 03:03 | We'll put it after the import url declaration,
so I'll put my cursor at the end and then
| | 03:08 | make a new line and then,
Command+V to paste them all in.
| | 03:12 | But since we already have a body rule
established which I'll scroll down to, let's go in and
| | 03:18 | add the font-specific declarations.
| | 03:20 | Again, I'm going to go back to my blog_comp.
| | 03:24 | So now I'll scroll down a little bit to
where the font declaration is you can find that
| | 03:29 | on line 87 and the declaration we're
mostly interested in is the font declaration.
| | 03:35 | Although we want to go ahead and pick up
these other ones as well, so I'm going to go ahead
| | 03:39 | and select all of the declarations in body,
copy that, head back over to index.php, put
| | 03:47 | my cursor in the body
rule and paste them right in.
| | 03:52 | So I'll save this file, and we're done.
| | 03:55 | Now I can be assured that when I begin to
set the styling for various elements on the
| | 03:59 | page my web fonts will be ready to go to work.
| | Collapse this transcript |
| Styling a header| 00:00 | So far in this chapter we have changed the
background and the page width as well as adding
| | 00:05 | web fonts to match our site.
| | 00:07 | Now we are going to work our way from
the top down, starting with the header.
| | 00:11 | So I have both the blog_comp.htm file found
in the _source folder, as well as the index.php
| | 00:18 | file from our WordPress blog folder
open, am in Live view in both documents.
| | 00:24 | WordPress is very big on dynamically building
the page by including its constituent parts.
| | 00:30 | The header is one such part and typically
includes any pre-HTML code, the opening HTML
| | 00:37 | tag, the entire head tag, the opening body
tag, and any header area prior to the content.
| | 00:45 | So in this theme, it's going to be this entire
section up to, and including, this border that we see here.
| | 00:52 | Now, all of this code is
contained in the header.php file.
| | 00:57 | So to preserve our parent theme, let's
copy the header.php file from the custom theme
| | 01:03 | folder to or roux theme folder.
| | 01:05 | So over in the Files panel, I am going to
expand the custom folder, locate header.php,
| | 01:12 | press Command+C to copy that, close up custom,
and let's just open up roux and then paste that in.
| | 01:20 | So there's our header.php file and while we
are at it, we are going to copy some images
| | 01:25 | that we'll need to the roux theme folder as
well, and those are located a little bit higher
| | 01:30 | up in the root of the site, because we are
going to be bringing in images that are used
| | 01:36 | throughout the entire site.
| | 01:37 | So I am going to copy these three files
starting with blog_header01 through blog_header03.
| | 01:44 | I also, I'm going to need this diagonal
pattern PNG, here, so I'll select
| | 01:48 | that as well, and then I need the Roux Academy
logo, which is located here as the ralogo.png.
| | 01:56 | So I am going to just press my
Command key and do a selection there.
| | 02:01 | So I should have five files as 1, 2, 3, 4, 5.
| | 02:04 | Let's copy those with the Command+C and
then I scroll down and rather than just dumping
| | 02:10 | them in the roux folder here I am going to
create another subfolder, right-clicking on
| | 02:15 | roux, choose New Folder, and let's keep
things consistent, so I'll name this _images and
| | 02:21 | with that still selected, I'll
press Command+V and copy in those files.
| | 02:28 | Let's tidy up our Files panel a little bit.
| | 02:30 | Now, one thing I have discovered, now
Dreamweaver is pretty good about reading in new files,
| | 02:35 | but I found there are sometimes you
really need to give it a helping hand.
| | 02:39 | To show you what I mean, let me locate the
header.php file here, and one way to do that
| | 02:45 | is to scroll through the various files.
| | 02:47 | I happen to know that it's located right
at the end there, so I'll scroll all the way
| | 02:52 | to the end, and if I hover over it, you can
see in the tooltip and look over on the right
| | 02:56 | of the tooltip, it's custom:header.php.
| | 03:00 | So this is the header.php file that's in
the custom folder, that's not what we want.
| | 03:05 | So let's close the index.php,
and we'll reopen it.
| | 03:10 | I am just going to go to File >
Open Recent and choose index.php.
| | 03:15 | Now we'll discover the files again, and this
time let's use the Custom Filter to go right
| | 03:21 | to the files we need.
| | 03:22 | We are going to be needing the style sheets,
so style.css;header.php, click OK, and now
| | 03:33 | if I hover over header.php, and you look at
the end of the tooltip, you'll see that the
| | 03:38 | folder the header.php file is in is the
roux theme folder, exactly what we want.
| | 03:44 | So let's go ahead and go into Live view, and
now we are ready to bring in code from the comp.
| | 03:49 | So we are going to switch over to the blog_comp,
go to Source Code, and let's just go ahead
| | 03:54 | and click right into the header area here.
| | 03:57 | And what I want to do is I want to bring
in the codes starting with header here, so I
| | 04:01 | am going to bring in actually the entire tag,
so I'll again put my cursor right after header
| | 04:06 | and then choose Select Tag, and once that's
selected, I'll copy it with Command+C, then
| | 04:13 | move over to index.php, click on header.php,
let me just go ahead and switch to Code view
| | 04:20 | momentarily here, so we've got
a good view of what's going on.
| | 04:24 | And I'll scroll down, and I want to
replace this entire header area here.
| | 04:29 | So with that selected,
I'll just press Command+V.
| | 04:34 | Now one thing I want to show you, if you
go to Design view now or Split view and just
| | 04:39 | click Refresh, you might be surprised that
you don't see the new header information.
| | 04:44 | That's because with Dreamweaver, while it
will pick up styles if you just click Refresh,
| | 04:50 | anything else such as changing the code in
the header.php or footer.php as we'll do later,
| | 04:56 | won't be picked up until you save that file.
| | 04:59 | So let's go ahead and I just want to click into header.php
here, and I'll do a Command+S to save the file.
| | 05:06 | Now if I hit Refresh, there's my new navigation.
| | 05:08 | Now, you can see that the links that we have
here on the code side are relative, and we're
| | 05:13 | going to have to adjust those, but let's
stay focused on the styles for right now.
| | 05:17 | So I am going to go back over to my blog_comp.htm,
switch to main.css, and let's locate all the
| | 05:25 | CSS rules that have to do with the navigation.
| | 05:28 | One great way to do that
is to use the Inspect tool.
| | 05:30 | So I am in Live view, I click Inspect, and
I am just going to go over to the navigation
| | 05:35 | area, click once just to lock that down, and
now let me open up CSS Styles panel, and you
| | 05:41 | can see that I'm already in the Links area
here, and if I scroll up, you can see that
| | 05:46 | there are numerous link related styles.
| | 05:49 | So let's go ahead and right-click on
pageHeader ul and choose Go to Code so we can go right
| | 05:55 | to that, and now I see the beginning of these
styles here, and if I scroll up a little bit
| | 05:59 | more, I want to make sure that I get them
all, and I can see that I actually have a
| | 06:03 | Nav styles section.
| | 06:06 | So let's select all of that, and I'll go up
to, but not including, page-specific header
| | 06:14 | styles on line 229, copy all of those files
and then switch over to index.php, and you
| | 06:21 | want to make sure that
you go right into style.css.
| | 06:25 | So I am going to go to the bottom of my page,
and just make a little room here and then
| | 06:35 | paste those in, and now let's hit Refresh.
And, as you can see, I didn't have to save
| | 06:42 | my style sheet like I did have to save the
header page. Just one of those little quirks
| | 06:47 | in Dreamweaver, but now we have a
navigation working. But what about the logo image?
| | 06:52 | Let's head back over to blog_comp.htm and
inspect that, see what we can find out about in there.
| | 06:58 | So, if I scroll over to here and click down,
there I see my .blogHeader, and that seems
| | 07:05 | to be a background image,
but that's not really the logo.
| | 07:09 | The logo seems to be associated with
this h1 tag here so if I click on that. Ah.
| | 07:16 | Here we go, .pageHeader h1,
and there is my RA logo.
| | 07:20 | So let's use Go to Code for that, and there
is Header Styles section, so I am going to
| | 07:27 | copy that particular one.
| | 07:29 | It looks like we have got a couple of rules.
Now sometimes placement is important.
| | 07:34 | So I notice that these rules even though we
came to them second, are above the Nav styles.
| | 07:40 | So I am going to put that in the same
relative position after I copy it, move back over to
| | 07:46 | index.php, scroll up above the Nav styles
and paste in my Header styles here, clean
| | 07:53 | that up a little bit.
| | 07:55 | So now if we click Refresh, we can see that a box
has been made for the logo, but there is no logo.
| | 08:04 | When you don't see an image that's supposed
to be brought in by the CSS, typically that
| | 08:08 | means that the path is wrong in some way.
| | 08:11 | So here's our rule right here, the
background is looking for an image that's up one level
| | 08:18 | which is true with the blog_comp, but
it's not true with our index.php page.
| | 08:24 | So let's get rid of that additional dot-dot slash
that we don't need, and I'll click Refresh one
| | 08:28 | more time, and there is our logo.
| | 08:31 | So now the only thing that's missing is our
background image that is located within the blogHeader.
| | 08:38 | So let's go back over to blog_comp, and I
am going to inspect one more time, you can
| | 08:44 | see we use this religiously, and there it is
.blogHeader, let's go to code, locate that,
| | 08:52 | and I am going to copy that rule, head back
over to my page, and I am just going to put
| | 08:59 | this in between the two here, the
Header styles as well as the Nav styles.
| | 09:05 | Let's save that page, and now click
Refresh and again we have space, but no image.
| | 09:13 | So let's get rid of the unwanted path and click
Refresh one more time, and there is our image.
| | 09:20 | So let's reduce the Files panel over here
and go to Design view, so we can get a good
| | 09:26 | sense of what it is we still need to do.
| | 09:28 | So it looks like there's some additional
padding that's going around the outside, and we have
| | 09:33 | a border that's appearing on the top here as
well as a little extra margin space it looks like.
| | 09:41 | So let's go ahead and figure
out what the problem is there.
| | 09:45 | Sometimes the issue is not that you don't
have the styles put in place yet, but you
| | 09:49 | have too many styles.
So let's open up our panels again.
| | 09:56 | This time let's do the
inspection on our index.php page.
| | 10:00 | So I'll turn on inspection, and if I hover
over the .blogHeader, I can see that there
| | 10:05 | is some additional margin that's appearing
down below it, and if I click in to lock that
| | 10:11 | in, it's not the header tag,
so let's keep going up.
| | 10:15 | Well, there doesn't seem to be any additional
margin on that outerWrapper tag. What about this one?
| | 10:21 | Well, here I see I do have 10 pixels of
padding here, and we want to get rid of that.
| | 10:28 | So I am going to go to this outerWrapper
tag, which as you can see, when I select it in
| | 10:33 | the Rules panel shows that
my style.css file is selected.
| | 10:38 | So I can go ahead and actually take
advantage of that and put in the rule here.
| | 10:43 | And I am going to set that padding to zero.
| | 10:46 | Well, that tightens things up very nicely,
but we still have this border issue here.
| | 10:51 | So let's use Inspect one more time.
| | 10:53 | I'll go in here and click on that
and again let's click on the border.
| | 10:59 | Well, here is the real problem that we are
finding, the header has a border bottom that
| | 11:05 | we don't need, and it also has a
margin bottom that we don't need.
| | 11:09 | So there is no equivalent rule defined
yet in my style sheet for the roux folder.
| | 11:14 | So let's open that up, I'll go to Split view,
and I always going to put that right after
| | 11:18 | blogHeader here before the navigation.
| | 11:22 | That's addressing the header tag, and we
want to get rid of the border-bottom altogether.
| | 11:27 | So I am going to do border-bottom: none, and
we also have a margin-bottom that I want to
| | 11:36 | get rid of, so margin-bottom: 0.
| | 11:39 | Let's close out the header
and refresh the page. Bingo.
| | 11:43 | That looks great.
So stylistically we are rocking.
| | Collapse this transcript |
| Adding header functions| 00:00 | Let's say I try to click on something, I'll
make sure that my Follow Links Continuously
| | 00:06 | is set up, and if I go to about, you will see
that the file is not found. Because what it's
| | 00:13 | doing is it's going to the about path
within the blog, not what we want at all.
| | 00:21 | So to tackle this issue, we are going to need to
integrate a little WordPress specific PHP code.
| | 00:27 | The first area I want to
address is the logo link.
| | 00:31 | This goes to the site
home and not the blog home.
| | 00:34 | So to handle this situation, we are
going to need to bring in a custom function.
| | 00:37 | Luckily they are pretty easy to write
just basic PHP and even easier to implement.
| | 00:42 | Now if you look at the custom theme folder,
which we can do pretty easily by expanding
| | 00:48 | the Files panel, you can see
a file called functions.php.
| | 00:54 | Unlike with the header.php and other related
files like footer.php and index.php, we don't
| | 01:01 | want to paste a copy of that
file into our child theme folder.
| | 01:06 | Having the same
functions twice breaks WordPress.
| | 01:09 | So, what we need to do is to create a new
PHP file, name it functions.php, and save it
| | 01:16 | in our child theme folder.
| | 01:18 | Then we can add any custom
functions that we need to.
| | 01:22 | So let's collapse the Files panel.
| | 01:24 | I'll go to File > New, choose PHP under the
Page Type, make sure None is selected under
| | 01:31 | Layout, and click Create.
| | 01:33 | Now I am going to go ahead and save that,
and we want to save this in the Site Root,
| | 01:41 | and we'll drill down to the blog, to wp-content >
themes > roux, and we are going to name
| | 01:50 | it functions.php, same name as the other file.
| | 01:56 | So I'll go to Code view, and we are
going to strip out all of the HTML here.
| | 02:01 | This is a pure PHP page.
| | 02:03 | So I am going to save that one more time,
so we have our file pristine and ready to go.
| | 02:08 | Now, let's open the Code Snippet, which
you'll be able to find in the exercise files, so
| | 02:13 | I'll go to File > Open.
So here's my custom function.
| | 02:17 | Let me quickly walk you through the
function so you know how to apply it.
| | 02:21 | Function name is siteRoot.
| | 02:23 | It brings in an argument called theFolder
and then the first line sets up a variable
| | 02:28 | home that uses a WordPress
function that returns the entire blog URL.
| | 02:34 | Next, thePosition, another variable, is set
to a string function called string pose or
| | 02:40 | string position that finds where
that argument is located in the string.
| | 02:45 | So basically what we have here is the entire
home URL, which is going to be something like
| | 02:50 | http://localhostrouxacademy/blog, and it's
going to find where the folder name, the folder
| | 03:00 | string, which will be blog, is passed in and
then the next line, code line 7, sets up another
| | 03:07 | variable that extracts everything except for
that particular passed in bit of string, the
| | 03:14 | folder name, so we get just the first part of
the path, which is exactly what we want. All right.
| | 03:19 | So let's copy this, move over to functions.php,
paste it in, save the file, and I am going
| | 03:28 | to go ahead and just close down these files.
| | 03:31 | And now with these functions in place, we
can actually go back to Dreamweaver and add
| | 03:36 | the necessary code to the links.
| | 03:38 | So we are going to be doing
this in Code view in header.php.
| | 03:43 | So let's scroll up a bit until we find the a tag
that links the logo which is right here in the h1.
| | 03:51 | So I'll put in my opening code block and just
to get rid of the little syntax error messages,
| | 03:57 | let's close off that code block, and now I
want to display the results of my function
| | 04:02 | so I'll type in echo and then my function
name, which is siteRoot and an opening and
| | 04:08 | closing parentheses as
well as the closing Semicolon.
| | 04:12 | Now we want to pass in the path of the folder name
that we are going to extract, and this is blog. All right.
| | 04:21 | So let me save the file, and we'll take
a look and make sure that that's working.
| | 04:26 | So I'll go into Design view, and I'll click
Refresh here to make sure that I've got all
| | 04:30 | the latest updates, and now I want to go ahead
and make sure that when I click the logo here,
| | 04:35 | it's going to go to the website
homepage, not the blog homepage.
| | 04:40 | Let's make sure that my Follow Link
Continuously is selected, so it is.
| | 04:45 | And when I hover over the logo and click on
it once, it does in fact go to my homepage.
| | 04:50 | So my function seems to be working properly.
Now let's go back and finish off the coding.
| | 04:55 | I'll click on home here and then click
on header and go to code. All right.
| | 05:01 | Now since almost all of my main navigation
links reference locations based on the site
| | 05:06 | home, I can reuse this same PHP code.
| | 05:10 | So I am going to go up, copy it quickly, and then
place it in front of all of my links, except for one.
| | 05:19 | So there is Programs, Admissions, Student
Portal, Campus Portal, Alumni, and I am going
| | 05:29 | to skip over the blog page and then do about.
The one exception, of course, is that blog link.
| | 05:37 | Here I can take advantage of a WordPress
function that provides the URL for where WordPress
| | 05:43 | is stored within the blog site,
and that function is site_url.
| | 05:49 | In this case, the word site refers to
the WordPress site, not the overall site.
| | 05:56 | So I am going to put my cursor right in front of where
it says blog/index and put in another PHP code block.
| | 06:05 | We'll also want to use the echo term, and
this time we are echoing that WordPress function
| | 06:10 | site_url with an open and close parentheses,
no arguments, and a closing Semicolon.
| | 06:19 | Now my last action is to
adjust the path a little bit.
| | 06:23 | Because it's pointing to the site_url, which
is Roux Academy/blog, I don't want to leave
| | 06:30 | the word blog here.
| | 06:32 | So I'm going to remove that, and I am
going to keep this trailing slash here.
| | 06:38 | WordPress functions that return site
locations always leave the trailing slash off, so you
| | 06:44 | will need to add that in.
| | 06:46 | My custom function siteRoot on the other hand
includes the blog and only extracts whatever
| | 06:51 | it is that you had included as an argument.
Okay, we are ready to check the work.
| | 06:56 | So I am going to save our
files and go back to Design view.
| | 07:01 | Let's click Refresh to make sure we've got
the latest version, and now I'll click on
| | 07:06 | about, and we go to the
about page, that's great.
| | 07:10 | Let me go back a page, our logo link to
home works, that's great, let's go back a page.
| | 07:16 | Now let's just try out the blog link,
which should just refresh this page.
| | 07:22 | And there we are, perfect.
| | 07:24 | In this lesson, you saw how to bring code
in from your comp, both HTML and CSS rules
| | 07:30 | to whip the header into shape.
| | 07:32 | You also got a chance to incorporate some
WordPress PHP functions to make the links
| | 07:37 | work correctly. Good job.
| | Collapse this transcript |
| Setting up content columns| 00:00 | The next section of the WordPress page we're going
to turn our attention to is the main content area.
| | 00:06 | In this lesson, we'll address the general
content wrapper that includes both the primary
| | 00:10 | content div and the sidebar as well
as style in the content area itself.
| | 00:16 | Along the way, we'll make some minor
adjustments to the WordPress PHP code.
| | 00:21 | Just as WordPress uses a file stored in
the theme folder called header.php to contain
| | 00:26 | all the header elements, the code for the
main content area, which you see here on the
| | 00:32 | left under the heading Roux Academy Blog,
is in another file, also stored in the theme
| | 00:38 | folder with the name of index.php.
| | 00:41 | Now, this is not to be confused with the
main index.php stored in the WordPress root.
| | 00:48 | To customize this, we'll need to copy the
index.php file found in the custom theme folder,
| | 00:54 | and paste it in the roux theme folder.
| | 00:57 | So I'm going to go to my Files panel and
expand it, so we can work a little bit easier.
| | 01:03 | Scroll down a tab until
we're in the wp-content area.
| | 01:07 | And here, I have my themes already
expanded, and there's custom and roux.
| | 01:11 | So let's open up custom a little bit.
| | 01:14 | There is that index.php file
that I mentioned. I've selected it.
| | 01:19 | Now I'll press Command+C to copy.
| | 01:22 | Select the roux folder and
Command+V to paste it in. Okay.
| | 01:27 | All of our preps done,
let's tackle that content area.
| | 01:31 | So, I'm going to go ahead collapse the Files
panel, and then let's go and make sure we're
| | 01:39 | pulling in right from the blog,
it's kind of hard to see down here.
| | 01:46 | Right below the blog folder is my index.php.
| | 01:50 | You want to make sure that you've
got the right one you're working with.
| | 01:53 | So, double-click that to open it.
| | 01:56 | Let's discover the files
and go right into Live view.
| | 02:01 | So, for me, the guerilla on
this page is pretty obvious.
| | 02:05 | The sidebar in the comp that
we see here is on the right.
| | 02:10 | While in the current
WordPress page, it's on the left.
| | 02:14 | Let's see how that's done in the
comp and make any necessary changes.
| | 02:17 | So I'm going to head on over to my blog comp,
and I'm going to collapse the Files panel
| | 02:23 | here just so I have a little bit more room
we're going to be mostly working with CSS
| | 02:27 | styles for a little bit.
So, we're in Live view.
| | 02:30 | Let's turn on Inspect mode, and I'm
just going to go into the content area.
| | 02:34 | I have my h1 tag there highlighted.
| | 02:37 | I'm going to walk up the DOM tree by
pressing the left-arrow key just to see what we get.
| | 02:43 | So if I look over in the CSS Styles panel,
I see that main area that we see there is
| | 02:49 | article#mainContent, and that
seems to be this main area on the left.
| | 02:53 | So, in this article with a id of
mainContent, and I look at the properties.
| | 02:59 | I see that there is a float:
left property. Well, that's key.
| | 03:03 | And this rule also has the
widths and margins involved.
| | 03:06 | So, let's go ahead and click once to turn
off Inspect mode and then I can right-click
| | 03:12 | on my Rule in the Rule pane
here, and choose Go to Code.
| | 03:18 | And that will take me right to article#mainCcontent,
and I'm going to copy these properties here.
| | 03:24 | I know since working with this that we don't have
exactly the same selectors in my index.php file.
| | 03:30 | Instead of mainContent, our
selector over there is called just content.
| | 03:34 | So, I'm just going to copy the properties.
Let's narrow down our files here.
| | 03:42 | We'll go to the Custom Filter.
| | 03:45 | The files we're going to be working with primarily
are style.css, put in a semicolon, and also index.php.
| | 03:51 | There are our two style sheets.
| | 03:56 | Let's go to the first one which as I hover over it,
I can see is the one that's in my Roux Theme folder.
| | 04:02 | I want to add in those properties
that I had for the content area.
| | 04:07 | I'm just going to scroll down past
the header styles and the nav styles.
| | 04:12 | Go all the way to the bottom here, and
just so you know just to double-check and make
| | 04:16 | sure I've got that div give right, I am going
to just click right into this area here, the
| | 04:21 | main content area that we see.
| | 04:23 | And if I inspect that in a similar sort of way,
I can see that I did remember it correctly,
| | 04:29 | that there is a div called #content.
| | 04:33 | You want to make sure that even though you
may think you remember something properly,
| | 04:37 | there's a lot of selector names going
around, so sometimes double-check that.
| | 04:41 | So, I'm going to make this content, and
then just put an open and closing curly brace.
| | 04:48 | And if you recall, I copied just the
properties, and I'll paste those in.
| | 04:53 | Let's go ahead and refresh the page.
It looks like that was successful.
| | 04:57 | There, I've floated the content to the
left, but that just is half the battle.
| | 05:04 | If I scroll down a little bit, you'll see
that my sidebar area is now also on the left
| | 05:10 | here, and we want to float that one as well.
| | 05:14 | So let's head back to our comp, and see
what we can find about how that is handled.
| | 05:19 | I'm going to scroll over a little bit here.
| | 05:23 | He's my good friend, Inspect, and again, I'm
just going to hover over a little bit of the
| | 05:28 | content in that area, and then walk up the DOM
to find exactly what it is we're working with.
| | 05:35 | So there's the rule for the widgets.
| | 05:37 | I'll press my left-arrow key again, and
here we're getting a little bit closer into it.
| | 05:42 | Here we see a section.info.
That seems to be part of it.
| | 05:47 | But if I look down at the tag selector along
the bottom of the screen, I see that section.info
| | 05:53 | is actually within a within aside.
| | 05:55 | So let's go up again, again pressing left-arrow key,
and there's my aside, and I see that
| | 05:59 | it does have a float: right with a
particular width, 318 pixels. Perfect.
| | 06:04 | So, I'll click once on the screen, turn off
Inspect mode, right-click on aside rule to
| | 06:11 | Go to Code, and there it is right there.
So, let's copy these properties.
| | 06:17 | Again, we have a different selector named
in my comp, and I'm going to scroll down and
| | 06:23 | find, I believe it's called widget area,
but I'm not absolutely positive of that.
| | 06:28 | So, let's go into Inspect mode, into the
sidebar text, and again creep up the DOM, and I'm
| | 06:35 | right, there is a widget area.
| | 06:37 | I don't have that defined in this
style sheet, it's in my parent style sheet.
| | 06:41 | So I need to add that in.
| | 06:43 | So it's a class widget-area, and again,
we'll open and close those rules, and I will just
| | 06:53 | paste in those two rules. All right.
| | 06:56 | Let's hit Refresh here and
see if that works its magic.
| | 06:59 | And if I scroll up, indeed, so
we're moving along pretty well.
| | 07:03 | We have the sidebar in its proper place.
| | 07:05 | Now, we can address the look of these columns,
specifically the equal length of the columns.
| | 07:11 | In the comp, this is accomplished, as I said, by
using a image, and let me actually, sometimes
| | 07:20 | I'll click on Edit Rule
if I can't see everything.
| | 07:22 | I can go in here and find it pretty quickly,
and that will open up the CSS Rule Definition
| | 07:27 | dialog box, and I can see that it's a image
called blog_content_bg. it looks like PNG.
| | 07:34 | So, that's good.
So we'll need to get that file, and bring it in.
| | 07:38 | I'm going to go back to my Files panel,
expand it so we can find our work easily.
| | 07:44 | And this time, we're going up to the
_images folder that's found in the site root.
| | 07:49 | I'm looking for blog_content_bg.png,
and there it is. So let's copy that.
| | 07:55 | We want to paste it in, you guessed it, our
child theme folder and the _images folder.
| | 08:02 | So I'll just expand that, so we can see what images
we already have, and verify that it gets pasted in.
| | 08:08 | I'll press Command+V, and
there's that image. Okay.
| | 08:13 | We can collapse the Files panel one more time.
| | 08:16 | So, we've got the file moved,
but now we have to get the rule.
| | 08:20 | Let's go to this particular rule here, right-click
on it, and go to code so we can get all of
| | 08:27 | those properties, and head
back over to our Roux style sheet.
| | 08:34 | I'm looking for whatever the wrapper is that's
around these two content areas, the main content
| | 08:40 | area and the sidebar.
| | 08:41 | So, let's use our friendly Inspect mode again,
and again highlight an area, and go up the
| | 08:47 | DOM with first one press of the left-arrow,
and we don't have our wrapper quite yet.
| | 08:53 | Let's keep going this tree, up
again, #contentWrap. All right.
| | 08:57 | So we're looking for a
property called #contentWrap.
| | 09:01 | And I do not believe I might have something
already defined in that area, #outerWrapper,
| | 09:06 | no, but no #contentWrap. Okay.
| | 09:08 | So that's fine. Let's go down.
| | 09:11 | And I'm going to put it actually
above content wherever possible.
| | 09:14 | I like just as a best practice it makes it
easier for me to find things to kind of put
| | 09:18 | things in a logical order.
| | 09:21 | So, my #contentWrap is around the main
content area and the widget-area, the sidebar.
| | 09:27 | So I'm going to put that ahead of things.
| | 09:29 | And again, put in my curly
braces and paste in my properties.
| | 09:33 | Now you'll recall that earlier we've had to
adjust the path for any images that we bring
| | 09:39 | in, in the background, and
we'll do the same thing here.
| | 09:41 | We're going directly to that folder now in
the child theme, so we don't need to go up
| | 09:46 | a level as we did with the blog comp.
So, let's get rid of that path.
| | 09:50 | Now, I'm going to save
the file, and click Refresh.
| | 09:55 | Let's head to Design view, and
there's our full column, design.
| | 10:01 | Obviously, we are going to have some work
to do over on the sidebar to bring that in.
| | 10:06 | But things are now looking relatively good.
| | Collapse this transcript |
| Changing the main content| 00:00 | So now if I do a little comparison and
see where we're at with our blog_comp.
| | 00:05 | Well, the first thing is I've got a title, Roux
Academy Blog, to put in that I don't have in index.php.
| | 00:13 | So, let's go into the actual index.php page.
| | 00:17 | I'm going to open it up into Code view so
you can see what we're working with here.
| | 00:23 | The index.php page is really the
centerpiece of the entire WordPress site, and it acts
| | 00:30 | as pulling in the various parts.
| | 00:33 | The first line we see here is a WordPress
function get_header, which brings in the header page.
| | 00:40 | Then after that, there is a div with an id
of contentWrap that holds all of the content
| | 00:45 | for that main area.
| | 00:46 | So, we also have another div within it for
content, and then here's a section with a
| | 00:53 | series of PHP code blocks.
| | 00:56 | This is what's known in WordPress
as The Loop, capital T, capital L.
| | 00:59 | It's a very important aspect of WordPress and much
of the work in WordPress has to do with the loop.
| | 01:06 | In this case, what we want to do is go
actually right above the loop and put in our static
| | 01:12 | content, which is an h1 tag,
with the text Roux Academy Blog.
| | 01:20 | And let me close off the tag using code completion by
putting in an angle bracket and then a forward slash.
| | 01:27 | Now this will appear on all of our pages that rely
on the index page, which will be a good number of them.
| | 01:33 | Now, you might recall from earlier lessons
the difference between working with styles.css
| | 01:39 | pages and other PHP pages, and that you
always have to save it in order to see the changes.
| | 01:44 | So, I'm going to go ahead and save this page,
and then go to Design view, and hit Refresh.
| | 01:49 | There is our new h1 tag.
| | 01:52 | But it needs quite a bit
of styling as we see here.
| | 01:56 | So, let's use our Inspect
mode, go to just that one tag.
| | 02:00 | I'll click once to lock it down, and
it looks like we have article h1 rule.
| | 02:06 | Let's go to the code.
| | 02:09 | And this time, I'm just going to
copy the whole thing, article h1.
| | 02:12 | Now, that's copied, let's go back.
We want to go into our Roux style sheet.
| | 02:17 | I'll go down to the bottom here.
| | 02:19 | Since this is in the content area, I'm
going to put it in between the content rule, and
| | 02:23 | the widget area rule.
So I'll paste that in.
| | 02:27 | And instead of article, let's
change article for #content.
| | 02:33 | So that should style it.
| | 02:35 | Let's refresh the page and see how we do.
All right, looking good.
| | 02:39 | Working our way down the page,
we come to the post headings next.
| | 02:42 | And more specifically, the
link states for these headings.
| | 02:46 | In WordPress, it's a standard practice for post
titles to link to a single page for just that post.
| | 02:52 | So, let's grab the basic CSS rules for
anchor tags, and there are take from the comp and
| | 02:57 | paste them into the theme.css.
The anchor tags are found pretty early on.
| | 03:04 | I did a little investigation earlier, and
I happen to know that they are on line 97.
| | 03:09 | So, Dreamweaver has a handy tool for going to specific
lines, and you can find that under Edit > Go to Line.
| | 03:18 | It will bring up a small dialog
box, and I'll put in 97 there.
| | 03:23 | So, here's my anchor tag as
well as a hover state rule.
| | 03:26 | So I'm going to go ahead and select those two.
Let's copy them and head on over to style.css.
| | 03:33 | I'm going to place these because they're pretty
important and they kind of rule over much of the site.
| | 03:39 | I'm going to put them up near
the top here after the body tag.
| | 03:43 | I'll paste those in.
| | 03:45 | And again, we don't need this path
correction here, so I'll remove that.
| | 03:49 | Now, let's refresh and see what happens.
| | 03:52 | Well, it looks like we're not quite there
because at this point, we've got a color:
| | 03:57 | white that is taking effect.
| | 04:00 | So it's going to have to be something else
that overrides that and changes the color.
| | 04:04 | This color: white is probably
used also, it is used over here.
| | 04:08 | We can see that, that's the case.
| | 04:10 | So it's worked for the sidebar, and there's
our little diagonal rule there. That looks good.
| | 04:16 | But the main area, the area that is in the
blog_comp that is defined by the article tag,
| | 04:22 | has a different kind of hovering state.
So let me just click on here.
| | 04:28 | And when I do that, I can see the
article a:hover appears. That's perfect.
| | 04:33 | That's what exactly what we're looking for.
And above it is article just article a.
| | 04:37 | So, let's go to code using that,
and pick up those two rules.
| | 04:45 | And you can see that it changes the color there.
| | 04:48 | So, we're going to put that right
next to our other anchor tag rules.
| | 04:53 | Let's hit Refresh again.
| | 04:55 | Now, we have our blue anchor complete with
the yellow hover state, and it's very faint.
| | 05:01 | There's not a whole lot of contrast
that we see here against the white.
| | 05:05 | But it is there, you can
see the diagonal pattern.
| | 05:07 | So that's working well.
| | 05:09 | With the main content area styled, you're
ready to make any necessary changes to the
| | 05:14 | actual WordPress postcode.
| | Collapse this transcript |
| Managing the content code| 00:00 | Our main content area is styled
correctly, but the code output needs work.
| | 00:05 | If we compare this basic blog post that we
see here to a comp basic blog post--I'll scroll
| | 00:13 | down so we can see one.
| | 00:15 | Let's just use this first Most
recent post, that's very clear.
| | 00:18 | So there's our heading, our body text, and comments,
and then a Posted in whatever the category is.
| | 00:26 | And now if we look at what we
have already, well we have our title.
| | 00:28 | Now we have a little additional information
posted on a certain date by whomever, that
| | 00:34 | we don't need to do.
So, let's get rid of that.
| | 00:38 | And then, down here it has kind of a reverse, the
Posted in Uncategorized category and No Comments.
| | 00:45 | So, we need to switch those. All right.
So we've got a little bit of work to do.
| | 00:48 | For this, let's go into index.php, and I'm
going to open it up completely into Code view.
| | 00:55 | So we can take a look at the whole thing.
| | 00:58 | Let's contract this so we
get a little bit clear view.
| | 01:00 | As I said before, we're mostly going to
be working in what is called the loop.
| | 01:05 | And here you can see this h2 tag
here holds in the title so that's good.
| | 01:11 | But the next section, this meta section
has that posted on, and it gives the date and
| | 01:17 | time as well as the author.
We don't want that according to our comp.
| | 01:21 | So let's get rid of it.
| | 01:22 | The next section is the actual meat
in the sandwich, it's the content.
| | 01:26 | So, we're going to leave that there.
| | 01:28 | And then the following div is this one called
postmetadata, and this has some of the information
| | 01:36 | we want, others, we don't.
| | 01:38 | I see, even though it didn't show up on
our design because we didn't assign any tags,
| | 01:42 | there is a bit of tag code
here that's not in our comp.
| | 01:45 | So, let's delete that entire line, and now it
comes time to reorganize what is posted where.
| | 01:52 | So, I want my comments first.
So, I'm going to just grab this line.
| | 01:58 | In fact, let's just grab the whole two lines,
and then drag it up so that it's above the
| | 02:04 | Posted in category, and
there's a little separator here.
| | 02:09 | I'm going to copy that,
and paste it in. All right.
| | 02:14 | Let's save our index.php page.
| | 02:16 | Go to Design view and hit Refresh, and
see how things are looking. All right.
| | 02:20 | So we got rid of the unwanted extra
content up here, and we do have our comments.
| | 02:26 | We do have a little odd character that
you see here, this double angle bracket.
| | 02:31 | So let's go in, and take a look at the
code one more time, so we can get rid of that.
| | 02:35 | And that double angle bracket is this
character entity that you see here that is the »
| | 02:43 | so let's remove that wherever we find it,
and there are three different places.
| | 02:50 | This little comments function that you see
here comments_popup_link actually is very clever.
| | 02:55 | If there are zero comments, you see the
text No Comments, if there is just one, it will
| | 03:00 | show 1 Comment, and if there's more than one,
it will show however many comments there are,
| | 03:04 | that's that little variable sign there,
and then the word Comments. So, very neat.
| | 03:08 | So it covers all the bases. Okay?
Save the page, Design and Refresh.
| | 03:16 | Our little unwanted character is now gone.
| | 03:19 | Now, the only other thing that I spot as I
look at this, and I need to scroll the page
| | 03:24 | a little bit just to make sure is it seems
pretty close to me between where one post
| | 03:30 | ends and another post begins.
And let's take a look at the comp. And yeah.
| | 03:33 | There is a big gap here.
| | 03:35 | Let's use our Inspect mode
to figure out where that is.
| | 03:37 | So, I'm going to go here, and
go down, and that's where it is.
| | 03:42 | So, I'll go ahead and click
once to turn off my Inspect mode.
| | 03:47 | We'll expand the style sheet, and it's pointing
right to main content post with these properties.
| | 03:52 | Let's go to code, and I'll just select
that, head back to my Roux style sheet.
| | 04:01 | Now, instead of main content within the section,
we're using an article tag to surround all the posts.
| | 04:10 | So, I'm going to go ahead and put that in,
and there's one more wrinkle, the post class
| | 04:15 | is actually attached to the article tag.
| | 04:18 | So, you need to remove that extra space that
you see here so that it is all one solid selector.
| | 04:25 | Let's save the page, and then hit Refresh.
And there is our additional space. All right.
| | 04:37 | As you've seen in this lesson, it takes a
combination of CSS and PHP adjustment to customize
| | 04:43 | your theme's main content area.
Now, you're ready to take on the sidebar.
| | Collapse this transcript |
| Customizing the sidebar| 00:00 | Let's continue our conversion of the
default theme by working in the sidebar areas.
| | 00:06 | Almost all WordPress themes use sidebars
either on the left or the right and sometimes both.
| | 00:12 | In the previous lesson changing the main
content, we moved the sidebar that was on the left
| | 00:17 | side of the Custom Theme to the
right side as called for by our comp.
| | 00:22 | In this lesson we will clean up the
content of the sidebar as well as its styling.
| | 00:27 | First, let's tackle the content, which
is comprised of a series of widgets.
| | 00:31 | You can think of a widget as a canned bit
of coding that outputs a targeted slice of
| | 00:37 | content often a series of links in a list.
| | 00:40 | So in our blog_comp, which I have on the screen
now, we see four such widgets, there is Search,
| | 00:47 | Hot Links, Archive, and Categories.
| | 00:51 | Now when we take a look at the current state
of our index.php page I've got Recent Post,
| | 00:58 | Recent Comments, Archives, Categories, and
something called Meta as well as a search field up top.
| | 01:03 | So there are a good number of unwanted
widgets here to remove them you'll need to go to the
| | 01:08 | WordPress Admin area and work
in the Widget section there.
| | 01:13 | So let's head on over to the dashboard,
and I'll choose Appearance > Widgets.
| | 01:19 | On the right-hand side under Available Widget
you see a collection of standard widgets that
| | 01:24 | you can bring in to any sidebar.
| | 01:27 | I should mention that you can
also download custom widgets.
| | 01:31 | There are tons available.
| | 01:33 | And we will explore little bit of
that world a little on in the course.
| | 01:36 | On the right-hand side are
your sidebars are widget areas.
| | 01:40 | Well, the custom theme, that we've been
customizing, has one sidebar area for widgets.
| | 01:47 | Other themes can have multiple widget areas
and the widgets that you see in the sidebar
| | 01:51 | widget area correspond to those
widgets we saw in our Index page.
| | 01:56 | So let's remove the ones that we don't need and to
remove something all you have to do is drag it out.
| | 02:01 | So I don't want this Recent Post so
I am just going to drag that away.
| | 02:06 | Same thing with Recent
Comments and Meta, which we don't need.
| | 02:12 | Now there is no saving or anything like that.
Once you drag it out it's gone.
| | 02:16 | Let's go back to Dreamweaver, and I'll refresh the
page and our widget area has been greatly reduced.
| | 02:23 | It looks good.
| | 02:25 | Now let's go back to WordPress, and we can
start to customize our remaining widgets.
| | 02:30 | Now each of these widgets can be expanded
and depending on the widget itself you'll
| | 02:35 | find one or more options available.
Search has an option for a Title.
| | 02:40 | There currently isn't one in our index.php
file, but if we take a look at the blog_comp,
| | 02:46 | and I will scroll up, it has a
very handy title called Search.
| | 02:52 | So back to the Dashboard, and let's add in
Search, click Save, and you can click Close,
| | 02:59 | or you could click a little widget.
| | 03:01 | Let's continue with our modifications before
we go back and double-check this in Dreamweaver.
| | 03:06 | So the next widget on our comp is called hotlinks,
which as I've mentioned before is a collection of pages.
| | 03:12 | WordPress has a terrific feature that allows
you to quickly set up a custom menu and output
| | 03:17 | that menu as a list of links.
| | 03:19 | So let's create a custom menu first
and then we'll add it for sidebar.
| | 03:24 | So I have the widget here Custom menu, and
I am going to go ahead drag it right in and
| | 03:29 | place it in between Search and Archives.
| | 03:32 | You will notice that when I do that it says
it hasn't found any menus, and it gives us
| | 03:37 | a link for creating some. That's great.
Let's go ahead and click Create Some.
| | 03:41 | That will take us over to the menu section, which if
you need to find it again is located under Appearance.
| | 03:48 | So now I can go ahead and follow the
prompts here and go ahead click Create menu.
| | 03:53 | So let's add in a name.
| | 03:54 | I am going to call this sidebar and choose
Create menu, and let's scroll down a little bit here.
| | 04:02 | Now over on the left-hand side we have the
ability to add in menu items, and we can either
| | 04:08 | work from custom links that you see in the
first widget up here, Pages or Categories.
| | 04:15 | I am going to choose to work with our existing
page first just to create our first menu item.
| | 04:20 | So I'll select that and then choose Add to menu.
| | 04:25 | Now let me scroll back up and here you
can see the page listed under the menu.
| | 04:30 | So I click Save menu, and now we are
ready to go back to Widgets under Appearances.
| | 04:37 | And if I expand my custom menu I can see
that I have an option for a title. That's good.
| | 04:43 | We want to put that title in of hotlinks,
and I have my sidebar as an option here.
| | 04:50 | If there were multiple menus available to me, they
would appear in the list, but there's only this one.
| | 04:55 | So now let's click Save.
| | 04:56 | So that's saved, and as I said we can
use the little gadget to close it up.
| | 05:01 | Let's head on over to Dreamweaver again.
| | 05:03 | I will go to my index.php page and click
Refresh, and now we have a title for search.
| | 05:12 | It needs to be styled and here's our Hot Links title
with the menu item Conference Schedule At-A-Glance.
| | 05:19 | So everything looks as expected.
| | 05:21 | We can add more pages our hot links
custom navigation as we build up the side.
| | 05:26 | Now we are ready to start the styling.
Let's take care of the headings first.
| | 05:31 | Again, let's head over to the blog_comp.
So I have a big old Search and Hot Links.
| | 05:36 | They are tremendously styled here.
| | 05:38 | Let's find out how they are styled by using
our inspect mode, and I will just go to this
| | 05:42 | one area, and as I see, I don't have to go
any further just hover over my search title,
| | 05:47 | and I can see the rule for sectioninfo.h2.
| | 05:51 | It's got a background image and white text
and special font family et cetera, So let's
| | 05:55 | go ahead and click once
to turn off Inspect mode.
| | 05:59 | Then I will right-click on the rule, Go to
Code, and let's grab this particular, all
| | 06:06 | these particular rules here.
| | 06:08 | I am going to copy just the properties,
because I know that it goes into a slightly different
| | 06:14 | selector over my index.php page.
| | 06:18 | So let's use our Inspect
mode to find out what that is.
| | 06:22 | I will just go to the Hot Links one here.
| | 06:25 | There's no rule set up for this, but if I
look down at the tag selector at the bottom of
| | 06:29 | the page, I can see this is not h2 tag, but
an h3 tag, and that's very common in setting
| | 06:34 | up WordPress widgets.
| | 06:35 | They tend to use h3 tags for titles.
That is located within a div of a Widget area.
| | 06:43 | So I am going to create a selector that targets the
h3 tags in Widget areas and paste in those properties.
| | 06:51 | Let's narrow down the files that we have
here so we are just working with Custom Filter.
| | 06:56 | Again, we are going to choose style.css.
| | 07:00 | Now we don't need to put in sidebar.php, because
there's nothing structural we have to do to work with that.
| | 07:06 | So let's just go ahead and click OK.
| | 07:09 | There is our two stylesheets, and we want to work
with the one that's in the new Roux theme folder.
| | 07:14 | So I'll select that.
| | 07:17 | And let's go down to the bottom.
There's my Widget area, perfect.
| | 07:20 | We are ready to put in our widget-area h3
selector, our curly braces, and let's paste
| | 07:31 | our properties right there.
| | 07:33 | Now again we have to adjust the path
here to get rid of the going up a level.
| | 07:39 | Now we will refresh the page and go to Design view,
and now things are looking pretty good for our titles.
| | 07:47 | Let's skip over search for the moment and
take care of the bulk of the widgets, which
| | 07:51 | output unordered list.
| | 07:53 | Again, we will get the rules from the blog_comp
and bring them over to Roux theme style.css file.
| | 08:00 | So from the blog_comp I want to
take a look at using Inspect mode.
| | 08:09 | Let's start with the list items and
crawl up the DOM using the left arrow key.
| | 08:14 | So I will click once to go up to the ul li
tag, and it looks like I've got a blogPage
| | 08:20 | aside ul li rule that looks
pertinent. Let's go up again.
| | 08:24 | There is the same type
selector targeting the ul tag.
| | 08:28 | So that's definitely what we want.
| | 08:29 | So I am going to go ahead and click once to
turn off Inspect mode and right-click on that
| | 08:35 | rule to go to code.
Now let's see what we got here.
| | 08:39 | I am going to go ahead and expand Code view
so we can just concentrate on that and then
| | 08:44 | I will press my Arrow keys so
I can get back to where I was.
| | 08:49 | So it looks like we've got blogPage
aside ul, and that's the start of it.
| | 08:53 | So let's go ahead and grab these rules.
| | 08:55 | I am going to grab the a tags as well as the
links and visited and then there is a hover state.
| | 09:03 | So all of that seems pertinent.
| | 09:05 | I am going to go ahead and copy all those
rules bring that over to our stylesheet.
| | 09:11 | Again, let's just go to Code view to expand
everything, and now I am going to go ahead
| | 09:16 | and paste all of them in and
scroll back up a little bit.
| | 09:20 | Now instead of blog page I want
primary selector to be widget area.
| | 09:25 | So I am going to copy that.
| | 09:27 | And just there is a few rules I could use a Find
and Replace, but let's just do this pretty quickly.
| | 09:33 | I have copied it, and I am just using my Command+V
to paste in these five or six rules to correct them.
| | 09:43 | Now once that's done I'll save the page.
| | 09:46 | Let's head back to Design view and
click Refresh and see what's happening.
| | 09:50 | All right, things are looking much neater.
| | 09:53 | Again now if I rollover it, I see
that I have my rules working out.
| | 09:59 | Now something looks a little bit off.
Let's go back and see there is the culprit.
| | 10:04 | Here is a path that I didn't catch before.
So let's get rid of that upgrade path there.
| | 10:10 | Let's see if there is anything else.
Nope, I think that's good.
| | 10:15 | Again, I'll save, go to
Design view and things are looking.
| | 10:21 | Here is my background
pattern coming up on hover. Great.
| | 10:25 | So my final three widgets are in great shape,
including the hover states, and now you're
| | 10:29 | ready to customize the Search widget.
| | Collapse this transcript |
| Styling search| 00:00 | In this lesson we are going to keep the
focus on one specific widget, the Search widget.
| | 00:05 | If we take a look at what we have now in index.php,
we have a label Search for an input field,
| | 00:13 | that's plain and white, and a Search
button that needs some styling love.
| | 00:17 | Now let's compare it to
what we have in the blog_comp.
| | 00:20 | Well, there's no label, the title is
actually acting as a label, the input field is much
| | 00:28 | larger, there is a different background color,
and there is what is known as placeholder
| | 00:32 | text, an HTML5 attribute by the way, and the
phrase Enter keyword that you see in the
| | 00:39 | center of the input text.
| | 00:41 | But also notice what you don't see.
There's no Submit button of any kind.
| | 00:45 | Now I purposely included this in the lesson,
because this is a situation I've encountered
| | 00:50 | before where there might be something
in the design that's not quite right.
| | 00:55 | Rather than slavishly copy the comp when
you know something should be there that's not,
| | 01:01 | you often need to move ahead
and put in the missing element.
| | 01:05 | So what we are going to do is to bring in an image
that will use as the background for our Submit button.
| | 01:11 | Let's go get that now and put it in place
before we start with the coding in Dreamweaver.
| | 01:17 | And there is the search.png
button I was talking about.
| | 01:21 | Let's copy that, and now I'm going to go down
to my blog folder and drill down into content >
| | 01:31 | themes > roux themes >
images and then paste that there.
| | 01:40 | So let's head back to Dreamweaver now, and
let's use Inspect mode to locate the CSS rules
| | 01:45 | for the Search field.
So we are in Live view.
| | 01:48 | I will turn on Inspect and just hover right
over that, and we are going right to it, because
| | 01:53 | this is a very specific thing.
| | 01:55 | So once we have it I will click once to
disable Inspect mode and then right-click on my rule
| | 02:00 | and choose Go to Code.
So it look like have a couple of rules here.
| | 02:05 | The first rule works for all input types,
input type text, email, and search as well
| | 02:12 | as text areas, and that
sets up some of the rules.
| | 02:16 | Then there's another one
that's a specific for search.
| | 02:19 | So let's copy both of these and then head
on over to index.php, and we will open up
| | 02:29 | our Roux stylesheet and paste those in.
| | 02:33 | Now I'm probably going to have
to change the selectors somewhat.
| | 02:37 | But you might have to do a little digging
to find out exactly what it is that you want
| | 02:41 | to change and select.
| | 02:42 | I know that I don't need the text area and
select elements here, so I can get rid of
| | 02:48 | those, but for the rest of we are going to
need to go into Live Code in order to locate
| | 02:54 | exactly what it is we are looking for.
| | 02:56 | So I am going to click on Live Code and then
scroll over in the Design view a little bit
| | 03:01 | and just click right into the Input field.
| | 03:06 | That will show us the generated output that
WordPress puts together and what I immediately
| | 03:12 | see is that this input, which has
a type of text and not a search.
| | 03:17 | And that's because WordPress has not
upgraded to HTML5 form elements yet.
| | 03:22 | So you won't see type = search or type = email.
You will see type = text most of the time.
| | 03:31 | The identifier is the id = S, and that's used
on any search field that you find in WordPress.
| | 03:38 | So we are going to change
our selector to a id of S.
| | 03:42 | Let's turn off Live Code
and go to our stylesheet.
| | 03:47 | So I am going to make all of these inputs,
and let's just bring these properties up,
| | 03:57 | because that's specific for the search, get
rid of this unnecessary rule now, and it looks
| | 04:02 | like I have a couple of
ones that are conflicting here.
| | 04:05 | So let's get rid of the width from the more
generic input styling and everything else we can leave.
| | 04:12 | So I'll hit Refresh here and
see how things are looking.
| | 04:15 | Well, things are looking pretty good.
| | 04:17 | So the next thing I am going to do is
create a CSS rule for the Search form button that
| | 04:23 | we'll add, and because I want to target this
particular search area and not in the other
| | 04:30 | general search fields, I'm
going to, again, use Live Code.
| | 04:36 | Click into this area and see
what the name of the form is.
| | 04:40 | Here it has an id of search form. Perfect.
That will help us target this exactly.
| | 04:46 | So let's turn off Live Code, go back to style.css,
enter in that id, and then we want to target
| | 04:56 | the input button with a type = submit.
| | 05:03 | So that's an attribute
selector that we can add in there.
| | 05:06 | And let's add in our opening
curly braces and start styling.
| | 05:12 | The first thing that I want to do is
bring in that search.png background image.
| | 05:18 | So we'll enter in the background property,
and we are looking for a URL, and that's in
| | 05:24 | my _images folder, and it's called search.png.
Now this image should not repeat.
| | 05:31 | So we put in a no-repeat options there,
and we just want to center it in its area.
| | 05:38 | So I am going to use the
positioning of center center.
| | 05:42 | I'll put it semicolon there.
| | 05:44 | Now let me go ahead and scroll down a
little bit so you better view of what's going on.
| | 05:48 | We don't need a border around this.
| | 05:50 | You can see the search field has already been
updated, and there is a bit of my image showing
| | 05:55 | through, and it also shows
up what I need to work on.
| | 05:58 | So I see a border around the image.
| | 06:01 | We don't need that.
So let's get rid of it. So border: none.
| | 06:07 | And if I click over here,
and I see my border is gone.
| | 06:12 | Let's change the width and the height.
| | 06:14 | Now I happen to know this
particular image is 35x35. It's a square.
| | 06:18 | So let's make the width 35
pixels and height 35 also.
| | 06:25 | Let's see how that looks.
Things are beginning to shape up nicely.
| | 06:33 | Let me go ahead and close this
down so you can do a better view.
| | 06:36 | So there's my rounded area.
| | 06:38 | Now I notice if I am in Live view here,
and I go over it the pointer should switch to
| | 06:43 | a hand icon, and it's not happening.
| | 06:47 | So let's specify that in my rule with
cursor: pointer, and let's check it out.
| | 06:58 | That's working perfectly.
| | 06:59 | Now I've got just a few remaining issues with
the Search widget all of them are text related.
| | 07:05 | Let's tackle them in the next lesson.
| | Collapse this transcript |
| Working with search text| 00:00 | The remaining issues that I have to work
with on the Search widget are all text related.
| | 00:06 | First, there is a label,
Search for, that we don't need.
| | 00:11 | Then there are some placeholder texts
that should be in the input field that isn't.
| | 00:16 | Finally, there is a mysteriously placed search term
that's overlaying our graphic, which we don't want.
| | 00:24 | To deal with these issues we are going to
combine some basic CSS as well as some PHP functions.
| | 00:32 | So let's take care of the CSS-based solution first,
and that's changing the label to a display none.
| | 00:38 | Now I just want to affect the
label that's in the Search form.
| | 00:42 | So I'm going to enter #searchform and then a
space and the tag name label, with our opening
| | 00:52 | and closing curly braces.
Now let's set the display property to none.
| | 00:58 | And if I click back in this section,
refresh the page automatically for the stylesheet,
| | 01:04 | we can see that the label is no longer visible.
| | 01:08 | The next two issues, as I mentioned, are
putting in the placeholder text in the input field
| | 01:13 | and getting rid of the
word Search on the button.
| | 01:17 | We can combine the solution
for those in one PHP function.
| | 01:20 | To handle this efficiently and show you the
necessary code I've created a code snippet.
| | 01:26 | Let's open that now.
So we are going to go to File > Open.
| | 01:30 | Let's go into Code view so I
can explain how the code works.
| | 01:34 | You can see that there's a number of string
replacement functions that are doing the primary
| | 01:38 | work here in my searchform function here.
Where do I get these string values to replace?
| | 01:44 | Well, if we look in the index.php file, and
I have Live Code already enabled here, I will
| | 01:50 | just switch to Live Code here.
| | 01:53 | Then let me just go ahead and
click right into the input field.
| | 01:56 | Here you can see the two
input tags that I'm working with.
| | 01:59 | The first one is my text
input, and that has an id of s.
| | 02:04 | The second one has an ID of searchsubmit,
and this is where the value for search appears,
| | 02:10 | and that's the text that's
appearing over the button.
| | 02:13 | So what we are going to do is take
advantage of this id=s since I know that WordPress
| | 02:19 | always puts that in, and we will
add placeholder text next to that.
| | 02:24 | So we are going to add an
attribute by using the String Replacement.
| | 02:27 | Here what we will do is we'll just
replace value=Search to value=nothing.
| | 02:35 | So that's what these two
string replacement values do.
| | 02:38 | The first one looks for id=s and then replaces
it with id=s placeholder=Enter Keyword.
| | 02:51 | Second one looks for a value=Search
and then replaces it with value="".
| | 03:01 | Now once we have that function declared all
we need to do is to add a filter, and this
| | 03:06 | is a standard WordPress function
that's used for hooking in custom functions.
| | 03:12 | What we are hooking it into is a WordPress
function called get_search_form, and we are
| | 03:17 | hooking my_search_form into that.
| | 03:21 | So let's copy just the code and not
the opening and closing PHP brackets.
| | 03:27 | Then I want to go expand my Panels set here
and then open up the Files panel where I am
| | 03:34 | going to locate in the
roux folder functions.php.
| | 03:39 | So this is our child functions.php file,
and I am going to paste in the copied code.
| | 03:46 | I like to leave a little bit of room between
each of the function sets so when I go back
| | 03:50 | and look at it it's easier to read.
So now Ctrl+V will paste it in.
| | 03:54 | I will save this page, and
let's head back index.php.
| | 04:00 | We will go it right into Design
view, and I will refresh the page.
| | 04:04 | Well, we're getting really close.
| | 04:06 | I now have my placeholder text, I have my Search
button with the image, and no text added to it.
| | 04:13 | Obviously, we've got a little bit of alignment
work to do here, but that's just a tad of CSS.
| | 04:18 | So what I am going to do is go back to my
style.css file, and let's take a look at our
| | 04:25 | image here to see what happens.
| | 04:27 | It looks like it's pushing it too far to
the right and my field here is too big.
| | 04:32 | So let us go down to where the input s, that's the
text field, and let's reduce that width by a 20 pixels.
| | 04:42 | To make sure that it gets put in exactly as I
have it here I am going to add an exclamation
| | 04:47 | mark and then important.
| | 04:49 | That will override any in-line
text that WordPress happens to put in.
| | 04:55 | So if I click into here that should refresh the
page, and it looks like that's working perfectly.
| | 05:02 | Let's handle our little Search button here
which is scroll down just a little bit too far.
| | 05:08 | For that let's use a negative margin top value
that I'll add into my searchform input type submit.
| | 05:16 | We will try a -10 value here.
| | 05:22 | So now the final property I am going to need
to add in is a vertical alignment property.
| | 05:27 | I am going to change the
vertical alignment to bottom.
| | 05:34 | Let's try refreshing the page, and we are there.
| | 05:37 | I will save the stylesheet, go Design view,
and it looks like our header, our main content
| | 05:44 | area is all good and the final
remaining element is the footer.
| | Collapse this transcript |
| Integrating the footer| 00:00 | There is just one major area left
to tackle, and that's the footer.
| | 00:04 | Like the other sections, you'll need to modify
the CSS, HTML, and PHP. As with the other areas
| | 00:11 | of the page there is a separate PHP
file that controls the footer content.
| | 00:16 | And since we will need to modify the code
of the page, let's copy that file footer.php,
| | 00:21 | from the parent theme folder to the child.
| | 00:25 | So I am going to expand my Files panel and
go up a little bit until I find the custom,
| | 00:31 | the folder that has our parents
theme, there is my footer.php file.
| | 00:36 | So I am going to copy that, close custom,
select roux, and paste it in with a Command+V.
| | 00:44 | Let's collapse the Files panel, and now we
are ready to open up our index.php file.
| | 00:51 | Let me temporarily collapse my CSS Style
Sheet, so I can get to that a little easier.
| | 00:56 | And I will open that up, and
now we can reopen styles.css.
| | 01:02 | Here is the blog page index.php.
| | 01:04 | I'll discover those files, use my Custom
Filter so we can hone in on our specific files we
| | 01:11 | are interested in, which are style.css.
| | 01:16 | Put a semicolon to separate and footer.php.
| | 01:21 | So let's go into Live view, and we can
compare what it is that we have to work with.
| | 01:26 | Let's scroll down to where the footer is and
it's just a plain copyright line, not a whole
| | 01:30 | lot of code there at all.
| | 01:32 | Whereas on the blog_comp, I am going to
scroll down, we have a tremendous amount of code,
| | 01:38 | looks like 25 or so different links.
| | 01:41 | As we can say, as I go over each
of those, these are all links here.
| | 01:44 | That's fine, the easiest way to handle a
situation like this is to copy all the content and bring
| | 01:49 | it directly into footer.php.
| | 01:51 | So I am going to go into
Code, choose my Source Code.
| | 01:56 | And then let's go down to the footer
area, which looks like it starts about here.
| | 02:03 | And I am going to choose everything that's within
the footer tag, copy it, and head over to index.php.
| | 02:12 | This time I will of select footer.php, and you
can see I have a similar sort of footer tag here.
| | 02:19 | So I am just going to highlight the
content in that, it's just one line and delete it
| | 02:24 | and then use Command+V to
paste in my copied content.
| | 02:28 | Okay let's save the page, and let's
make sure that all that content came in.
| | 02:33 | So I'll refresh Live view.
And let's scroll down to the footer.
| | 02:40 | And I can't quite see all of it, well it
looks like the links are there, however, we need
| | 02:47 | some serious styling, and we
will get to that in just a moment.
| | 02:51 | More concern to me at this point is if I
look at the code, so as I mentioned, I have got
| | 02:55 | a whole series of links here,
looks like about 25 in all.
| | 03:02 | And if we leave them as they are,
they are not going to work correctly.
| | 03:05 | So if you remember, we introduced a
special PHP routine, way back in the handling the
| | 03:11 | header lesson, and that's
going to be a perfect fit here.
| | 03:14 | To handle this many links, let's break out
our Dreamweaver Power tool, Find and Replace.
| | 03:22 | So I will go to Find and Replace,
choose Find in Current Document.
| | 03:27 | Since there is no other links in this
document, this is a safe thing to do.
| | 03:32 | And I'm going to look for a href = and then
my opening double quote, and let's copy
| | 03:39 | that so I have that starting point,
paste that in the Replace field.
| | 03:44 | And now I want to add in my PHP code, which
starts with a PHP opening bracket and then
| | 03:50 | echo siteRoot open and close braces,
open and close quotes.
| | 03:56 | And in the middle the argument we are
passing, which is the name of the folder, blog.
| | 04:02 | And then let's close that off with a semicolon
and close the PHP code block with a question
| | 04:08 | mark, angle bracket.
| | 04:09 | All right, so we have the PHP
opening code block, echo, siteRoot, blog.
| | 04:16 | Let's use Replace All and looks like 27
different items were replaced and here you can see,
| | 04:23 | for example, on line 10, the PHP
code comes in ahead of board.htm.
| | 04:31 | So let's save those changes and then I am
going to right-click on this tab group titlebar
| | 04:36 | here and choose Close Tab Group, so we
can recover some of our screen real estate.
| | 04:41 | And let's take a look at what we have
in Design view, I will click Refresh.
| | 04:46 | Let's go down, and now the links are still there as I
said, however, they do need a tremendous amount of styling.
| | 04:55 | Luckily, there's a full footer section in the blog_comp
that we can bring over, pretty much intact.
| | 05:01 | So let's head over there, I will go to main.css,
and we will find the footer styles, which are
| | 05:11 | starting around line 629, and I
am going to copy all of these.
| | 05:19 | Go to index.php my stylesheet, scroll down
to the very bottom, make a little extra line
| | 05:26 | there and paste them in.
| | 05:28 | Okay let's refresh the
page and see what happens.
| | 05:32 | Well, things are definitely better, we can
see our links, and it looks like we have a
| | 05:38 | little bit more adjustments to make, but
at least we are moving down the right path.
| | 05:42 | Now let's see, what's missing here
obviously is the yellow background color.
| | 05:46 | So let's head over to the blog_comp, I will
go into Split view and go into Inspect mode,
| | 05:53 | scroll down to the footer area,
and let's see if we can uncover that.
| | 05:57 | So I do some hovering over some contact, and I'm
going to go up the DOM using my left arrow key.
| | 06:03 | And here we see that in the page footer rule
that you see on the CSS Styles panel, there
| | 06:09 | is a background color, so let's go to that rule.
| | 06:14 | And I can say that it's actually one of the
styles I copied, but what's problematic is
| | 06:19 | that I don't have this id in my footer rule.
| | 06:23 | So sometimes it's easier to
change the HTML than it is the CSS.
| | 06:28 | So let's go back to index.php, the footer tag,
and I am going to go all the way to the top
| | 06:33 | and just add in that id.
| | 06:37 | Okay we will save this page and then refresh
the screen, and that's worked out pretty well.
| | 06:46 | We now have our three columns and the yellow
background, so I have a few remaining things
| | 06:52 | to take care of, and this is the last
technique that I want to pass on to you, as you are
| | 06:58 | doing these types of conversions, sometimes
it's more efficient to just go ahead and add
| | 07:04 | the rules in yourself, rather than trying to
figure out what it was that they did in the comp.
| | 07:10 | So let's go to style.css I am going to go
into Split view and the first thing I want
| | 07:16 | to tackle is the border that you see across
the top here, that's not something that we
| | 07:23 | want in this particular design.
| | 07:25 | So I am going to go to pageFooter rule, and let's put
in a new rule for a border-top and set that to none.
| | 07:35 | Next let's take care of the centering that's
occurring here, and we want it to be left aligned.
| | 07:40 | So that's an easy fix, add in a text
align property, and set it to left.
| | 07:48 | So let me click into here to see how things
are working, and we are looking pretty good.
| | 07:51 | Now one last check against the blog_comp,
one thing that I notice as I go back and forth
| | 07:58 | between the two is that it seems I'm using
the right fonts and everything, but things
| | 08:03 | are a little smaller than they should be.
| | 08:06 | So, most likely what's happening is that things
have somehow gotten reduced, they are proportional,
| | 08:12 | but they're not the right size.
| | 08:14 | So what I would do in that case is set
the font size for the footer to 100%.
| | 08:24 | And let's click over, and well,
that seems I have done it.
| | 08:26 | Let's compare Design view to Design view.
| | 08:31 | And while they look pretty good it does look
like my headers are a bit off here, it doesn't
| | 08:36 | actually seem like it's picking up the
special web font that I'm using for headers.
| | 08:43 | So let's Inspect that particular font there.
| | 08:48 | And here is the h3, and I can see that it's the
font-family of Bitter, and that's what I am expecting.
| | 08:57 | So I can see this is a footer3 issue.
| | 09:00 | So let me go back into index.php, and I will
open up style.css, here is my footer h3 rule.
| | 09:09 | Let's set the font-weight to normal, since
it seems like it's making it a little bit
| | 09:15 | bolder than it should be.
| | 09:17 | Well, that seems to have done the trick.
| | 09:20 | So here is our index.php file,
and there is our blog_comp.
| | 09:27 | All right, I think we are in great shape,
congrats on completing a major conversion project.
| | 09:32 | With the techniques we have used throughout
the lessons in this chapter, you can re-create
| | 09:35 | pretty much any static
design as a WordPress blog page.
| | Collapse this transcript |
|
|
6. Providing Responsive DesignSetting up media queries| 00:00 | Everyday more and more people visit websites
through what used to be alternative devices,
| | 00:06 | tablets and phones.
| | 00:08 | Responsive Web Design is a powerful strategy to
handle the problems brought by multiple screen output.
| | 00:13 | In this chapter I'll show you how to set up a
major responsive web design component,
| | 00:19 | Media Queries, for your WordPress blog site,
for both tablet and phone size screens.
| | 00:26 | This lesson will focus on establishing the
media queries properly, as well as a vital Meta tag.
| | 00:33 | Now before we go any further, I want
to show you the power of media queries.
| | 00:37 | So here we are in the blog_comp, and
it's showing at a full Desktop size screen.
| | 00:43 | Dreamweaver has some very nice capabilities
for quickly shifting to other size screens.
| | 00:48 | Here we see three icons, one is the tablet
size that we are going to be working with.
| | 00:53 | So let's go to that and here you see kind of a mini
version--the portrait view if you will--of a tablet.
| | 00:59 | And you notice that there was a major
change between this and the full-size, mostly it
| | 01:04 | was the content here on the left-hand
side which got resized down.
| | 01:09 | And as we scroll down, you can see
that the footer was definitely affected.
| | 01:13 | Smart phone size screens bring in
even more radical design choice.
| | 01:18 | So for that we will go to the Window Size list
that we see here and choose 320x480 smart phone.
| | 01:25 | And now you see a completely redesigned page
that is linearized, it's all in one column,
| | 01:30 | and as I scroll down pass the completely
reshaped navigation and missing header graphic, we
| | 01:36 | can see everything is in one column it's very
readable, but it's all in one column and then
| | 01:41 | there's a sidebar that follows
and a link follows the sidebar.
| | 01:45 | Now Dreamweaver has a number of ways to automatically
create media queries that were used to create these results.
| | 01:51 | But unfortunately, none of them are very helpful under
these specific circumstances that we are working with.
| | 01:57 | Luckily, coding media queries by
hand is pretty straightforward.
| | 02:01 | So I am going to close out my blog_comp, we
won't be needing that anymore at the moment.
| | 02:04 | So I'm here in index.php, and I've used my
Custom Filter to narrow the dynamically related
| | 02:11 | files just the ones we will need,
which are style.css and header.php.
| | 02:15 | Next, I'll switch to my roux child theme
style.css, and then go to the end of the page.
| | 02:22 | Let's put in about simplest of the media
queries to handle our smallest screens.
| | 02:25 | I am going to put in a little comment so
that I know that I'm working with the phone, and
| | 02:30 | we will start this rule with
a @media restricted to screen.
| | 02:39 | And then start our media query, so after
keyword and, open parenthesis max-width: and then
| | 02:48 | the value of the maximum width that we are
going to be working with, and that's 320px.
| | 02:56 | Close the parenthesis, put in a curly brace, put
in a couple of lines, and a closing curly brace.
| | 03:06 | So that's a media query for the phone.
| | 03:09 | Now let's do one for the tablet, this one
will be for a midsize screen, and we will
| | 03:14 | incorporate one more condition, the minimum width,
to set up a range of values for the screen width.
| | 03:21 | So again I am going to do a comment and again,
@media screen and (min-width:, and we want
| | 03:33 | this to be just one pixel higher
than what our phone's maximum width was.
| | 03:39 | So 321 pixels, close the parenthesis
and then put in another and, and a space.
| | 03:47 | Open parenthesis and
put on our other condition.
| | 03:50 | This is another max-width.
And we are going to set that to 768 pixels.
| | 03:57 | Again, we will put in an opening curly
brace, a line, and then a closing curly brace.
| | 04:04 | So let's save the page.
And I am going to stop here.
| | 04:08 | And we will work with these two media
queries and the other lessons in this chapter.
| | 04:14 | You could, and probably should, for a final
version of the website you are pushing live,
| | 04:20 | include additional media queries to
handle a wider variety of screens.
| | 04:25 | With other media query parameters, you can
style your sites for specific orientations
| | 04:30 | and even higher display
resolutions, like Apple's Retina Display.
| | 04:34 | For details on how to set up those media queries,
check out my lynda.com online training library
| | 04:40 | course, Responsive Design with Dreamweaver CS6.
| | 04:45 | We've got one more bit of structure to handle,
and appropriately enough, it involves a Meta tag.
| | 04:51 | This Meta tag uses the viewport identifier
and prohibits the device from automatically
| | 04:56 | scaling down the site so that the Desktop
version is reproduced on a smaller screen,
| | 05:02 | which we don't want, because we will be
developing custom styles for those screens.
| | 05:06 | We are essentially
telling the device, we got this.
| | 05:10 | For this bit of code, we need to access
our header section found in header.php.
| | 05:16 | So I have selected header.php,
and let's go into Code view.
| | 05:20 | I am going to scroll down just a little bit.
| | 05:23 | I am going to put my cursor right after the
link with the relative pingback and add in
| | 05:31 | our Meta tag, and this is
meta with an attribute of name.
| | 05:36 | And the name we are going to pull in is viewport.
Dreamweaver's code hints are up-to-date here,
| | 05:41 | so you can just type a v, and then hit Return,
and it will fill in the rest and the content
| | 05:46 | attribute takes the initial scale--
initial-scale I should say-- = 1.0.
| | 05:56 | And then close off the Meta tag,
slash and an angle bracket.
| | 06:00 | Okay, I'll save the page, and we are all set.
| | 06:03 | Now you're ready to go after the specific
CSS rules to give a custom look and feel for
| | 06:08 | our WordPress blog sites,
on both tablets and phones.
| | Collapse this transcript |
| Customizing for tablets| 00:00 | In this lesson I'll show you how to
retrofit a Desktop design for a tablet-size screen,
| | 00:06 | specifically one that is between
321 pixels and 768 pixels wide.
| | 00:13 | Let me show you what we're
going to do for the blog_comp first.
| | 00:16 | So I have my full-size Desktop size screen now.
| | 00:20 | Let's go to Tablet size, and there is lot of
differences here, some of them more subtle than others.
| | 00:26 | The first thing is that the navigation is a
little bit tighter in order to fit in this
| | 00:30 | area, and also you can see if you look
carefully that the navigation overlay--that's this brown
| | 00:36 | area here--actually ends before the edge of
the screen, so we'll need to adjust that as well.
| | 00:42 | Next--and perhaps most visually important--
the main content area is much narrower than
| | 00:48 | it was before, whereas the
sidebar is exactly the same width.
| | 00:52 | Now this is obviously a design choice. You may opt to
reduce both the main content and sidebar proportionally.
| | 00:59 | And then as we look down further, it looks
like there is some changes that will need
| | 01:02 | to be made to the footer.
All right, so let's head on over to index.php.
| | 01:08 | Now, instead of copying the values from the
blog_comp and changing the selectors where
| | 01:13 | appropriate, let's just work our way down
the page in our WordPress blog, adding styles
| | 01:18 | to the tablet media query we established
in the setting up media query's lesson.
| | 01:23 | For that I'll use the index.php from the
blog folder, in Live view with my related files
| | 01:29 | discovered, and my custom
filter set to style.css.
| | 01:34 | Now, again, I am going to use Dreamweaver's
Window sizing capabilities to work within
| | 01:38 | the targeted tablet width.
| | 01:40 | Although the icons we see here are really
intended for use with Dreamweaver's Fluid
| | 01:44 | Grid Layout future, the tablet one is the
exact width we need, so let's click that.
| | 01:50 | Now you can see immediately the problems
where I have a horizontal scroll bar here and one
| | 01:55 | of the primary goals in making this type of
conversion is to make sure that there is no
| | 01:59 | horizontal scrollbar, that's
it's only a vertical scroll.
| | 02:03 | So first, we go to my stylesheet, and we're going
to be working in the Tablet media query right here.
| | 02:10 | So I am going to first reduce the overall
width of the page and the main container.
| | 02:14 | So we'll set the body and the outerWrapper,
we'll create a rule for that and set that
| | 02:21 | width to 768 pixels.
| | 02:24 | Now let me go ahead and make a little more
room for my design here, so we can take a
| | 02:29 | look at it as it happens.
| | 02:33 | Now as I mentioned, the navigation here is
pushing out my horizontal. I see alumni up
| | 02:38 | there, and then there is blog and about, and that
means that there's just too much right margin here.
| | 02:44 | So let's adjust that with another rule,
and I am going to target pageHeader li, that's
| | 02:52 | the list item, and I'll set that
with a margin-right to 25 pixels.
| | 02:59 | If you have any question as to whether
you're targeting the right element or not, you can
| | 03:04 | always use Inspect mode to
verify what you think is right.
| | 03:08 | Next, I am going to reduce the width of the
navigation area which is contained in the nav tag.
| | 03:14 | So pageHeader, nav, and I am going
to reduce that to a width of 600.
| | 03:20 | All right, let's switch in to Design view
and hit Refresh and see how things are looking.
| | 03:26 | Well, not bad. Looks like our
header area is shaping up pretty well.
| | 03:31 | Everything is kind of nicely tightened up
along the navigation area, and our brown area
| | 03:35 | is no longer pushing out beyond the page.
| | 03:39 | Now obviously, there is
the main content area next.
| | 03:42 | So I'll need to adjust the background image
that creates the faux columns for the main
| | 03:47 | content and the sidebar areas.
| | 03:50 | As I said, I'm planning to reduce the main
content area and keep the sidebar the same.
| | 03:55 | The full width of the entire page is
960 pixels, and my reduced width is 768.
| | 04:02 | The difference between those two values is
192 pixels, so that means I just need to shift
| | 04:09 | the background image to the left 192 pixels.
| | 04:12 | I can do that via the background position
property, and while I am at it, I'll also need
| | 04:17 | to give the container that has that
faux column image in it a new width.
| | 04:22 | So let's head back to our stylesheet, and
you may recall that the faux column image
| | 04:26 | is applied to a div with an ID of #contentWrap.
| | 04:31 | So let's target that particular div, and I am going
to set up a background position as the next property
| | 04:41 | and shift everything over as I said 192
pixels to the left, and to do that I'll need to use
| | 04:48 | a negative value, so -192px.
| | 04:53 | When you're changing one value with a background
position, you always want to give both the values.
| | 04:57 | So I want to give the horizontal version and the
vertical and the vertical is just going to be top.
| | 05:03 | Okay, as I said, we also want to restrict
#contentWrap to a new width, and that width is 768 pixels.
| | 05:11 | So let's make sure to put
in our closing bracket here.
| | 05:13 | Now let's apply that same measurement difference,
192 pixels, to the width of the main content
| | 05:19 | area which is controlled
by the content selector.
| | 05:23 | Let's expand our CSS Files panel just
to see what that width currently is.
| | 05:29 | So I'll go here, use my left arrow key to go
up the DOM 'til I get to the content area.
| | 05:35 | And my width now is 607 pixels, so subtract
192 from that, and you'll get 415, our new
| | 05:44 | width for the content area
for tablet-sized screens.
| | 05:47 | So let's go down and add in that rule,
content is the selector, I'll do an open and closing
| | 05:52 | curly brace and then set
the width to 415 pixels.
| | 05:59 | Okay, let's see how that looks with a Refresh.
| | 06:03 | Ignore that protruding video for now.
We'll get to that before we're over.
| | 06:07 | Let's tackle the footer area next.
| | 06:10 | As you can see, the three-column
arrangement just isn't working anymore.
| | 06:14 | Now there are a lot of variations you could
apply to this area, but let's take a simple
| | 06:18 | one-column centered approach.
| | 06:20 | So let's head back to Split view and style.css,
and we'll add in a new rule for footer tag,
| | 06:28 | and we're specifically going to target
a class called col, short for column.
| | 06:32 | Now I am going to turn off the floating,
we don't need that anymore, so that will give
| | 06:37 | us one column right
after another, so float none.
| | 06:42 | And there is also, as you can see, right
next to ABOUT ROUX ACADEMY a border-right that appears.
| | 06:47 | Let's get rid of that.
| | 06:53 | And finally, let's center all of the
columns, so we'll do a margin: 0 auto.
| | 06:59 | Okay, let's Refresh the page, and that does
what we were expecting it to, but it looks
| | 07:06 | like there is a little bit of padding between the
links sections and the final Copyright line, would be handy.
| | 07:12 | Since this is the only <p> tag in the footer,
I can go ahead and address that directly.
| | 07:18 | So I'll create a rule, footer p is the
selector, and set the padding-top of that to 20 pixels,
| | 07:28 | and let's close off that rule with a
curly brace, hit Refresh, and see how it looks.
| | 07:33 | All right, that did the trick.
| | 07:35 | So typically, at this point I'd say
good job and offer high-fives all around.
| | 07:42 | But scroll up a bit, and we have this big
monster video sitting in the middle of our page.
| | 07:48 | The comp doesn't really account
for handling video responsively.
| | 07:53 | So it's good that it came up now, rather
than when the client first uses the site.
| | 07:58 | Let me show you how to make a video
resize as needed in a responsive web design.
| | 08:04 | It'll take a couple of CSS rules and some judiciously-
placed HTML, but it's really not that hard at all.
| | 08:11 | So, since we're here, let's do the CSS first.
| | 08:16 | So let's switch to Code view, and then I am
going to scroll up. I am actually going to
| | 08:19 | put this video code above both of the @media
declarations so that it will be effective across the board.
| | 08:27 | Now we'll need to create an initial rule for
a containing element that maintains the proper
| | 08:32 | padding and handles overflow correctly.
| | 08:36 | And I want to call this
containing element video-container.
| | 08:45 | The element that is within the video container--that is
the video--will in the next rule be positioned absolutely.
| | 08:52 | To set that up, we need to set position:
relative in the containing element, we also need to
| | 08:57 | add some padding on the top and bottom.
| | 09:00 | Now the bottom, we're going to set up at a percentage
value, and the top we'll set to a specific value.
| | 09:06 | So padding-bottom, we'll set to 56.25%. This
is a value that's been worked out on the web
| | 09:13 | by a number of people, and
it seems to be very effective.
| | 09:17 | And then a specific value for the
top, and I'll make that 30 pixels.
| | 09:22 | Initially, we're going to set the height
to zero, and that will allow whatever is
| | 09:27 | in the containing element to determine the
height, and overflow must be set to hidden.
| | 09:33 | All right, that's our first rule. Now we're
ready to create the rule for the object within
| | 09:38 | the video container.
| | 09:40 | When WordPress embeds video,
it typically uses an iframe.
| | 09:44 | But it or other systems could also use an
object or an embed tag, so we're going to make sure
| | 09:50 | we cover all of our bases in a single rule.
| | 09:53 | So the initial selector is still my video
container class, so .video-container, and then
| | 09:59 | we'll put in the selector for whatever is
inside that, and the first one we'll use is
| | 10:04 | the iframe, and then I'll put a comma.
| | 10:07 | Next, we'll do the same thing but for object,
another comma, and finally we'll do a video-container embed.
| | 10:19 | I'll insert my open and closing curly braces,
scroll up a tad, and as I said, we need to
| | 10:25 | position this absolutely.
| | 10:26 | So let's make that our
first property declaration.
| | 10:29 | Next, we want to tell the browser exactly
where within the container we want this to
| | 10:34 | be positioned, and we're going to put it at the
top left corner so that's a top: 0 and left: 0.
| | 10:43 | We want to set the width and the height so that
they expand as much as they can within the container.
| | 10:47 | So we'll set those properties to 100% each.
| | 10:51 | Okay, our rules are all done. I
am going to save my CSS stylesheet.
| | 10:56 | Now to take advantage of these CSS rules,
we'll have to add a bit of HTML to our posts
| | 11:02 | that contains the video.
| | 11:04 | Let's head on over to the WordPress Dashboard
and edit the Video Production Project Online post.
| | 11:09 | Okay, so we want to go into the HTML tab,
because we're going to be adding some HTML,
| | 11:16 | and I am going to put my cursor right after
that first line and before the link and put
| | 11:21 | in my div code, which is going to be
<div class ="video-container"> and then add a new line.
| | 11:33 | This is very important to do that. You want
to isolate the link that you see here, and
| | 11:38 | if you have an errant character like I do here,
this non-breaking space, you want to get rid of that.
| | 11:44 | Now let's close off the div,
and we can click Update.
| | 11:47 | I want to reiterate that it's vital that you
have blank lines on either side of the URL.
| | 11:53 | Otherwise, WordPress will just output
a link, rather than an embedded video.
| | 11:57 | Now that we've updated the post,
let's go check it out in Dreamweaver.
| | 12:02 | So now I'll click Refresh, and
there is my properly scaled video.
| | 12:09 | If I switch to Desktop width,
the video scales up accordingly.
| | 12:13 | The best thing is that this video we're scaling will
also work for the iPhone screens, which we'll tackle next.
| | Collapse this transcript |
| Building smartphone layouts| 00:00 | So far in this chapter we've set up the
necessary infrastructure for handling a key component
| | 00:05 | of our responsive website, media queries, and
retrofitted our Desktop design to look better
| | 00:11 | on our tablet in portrait orientation.
| | 00:14 | Along the way, we also
made video sizing responsive.
| | 00:17 | In this lesson, we'll set up the rules for
a more radical redesign to fit the smaller
| | 00:23 | screen size for phones.
| | 00:26 | To get a sense of what we're going for, let's
take a look at the blog_comp in a phone size screen.
| | 00:32 | Unlike the tablet screen size icon, the
phone screen size icon uses a 480-pixel width.
| | 00:40 | So we'll have to use our Window size menu
here in order to choose a 320x480 Smart Phone.
| | 00:48 | As you can see, the header area is
completely reshaped, the background image is gone and
| | 00:53 | the navigation is now
vertical rather than horizontal.
| | 00:57 | The remainder of the layout has been
linearized into a single column, with the main content
| | 01:03 | coming first, followed by what was
previously the sidebar, and then the footer.
| | 01:12 | There is a fair amount of work ahead, about
dozen CSS rules in all, so let's get going.
| | 01:17 | As we did with a tablet, we'll build up the CSS
from scratch rather than crib from the blog_comp.
| | 01:23 | So with index.php from the blog folder open,
I've already discovered the related files,
| | 01:31 | and by using the custom folder feature,
restricted the available files to style.css.
| | 01:37 | So let's switch to the roux theme style.css,
and let's scroll up to the Phone media query.
| | 01:46 | The first rule will reduce the overall width for
both the body and the outerWrapper div to 310 pixels.
| | 01:54 | Why 310 instead of 320?
| | 01:56 | Well, I like to leave a little room for
the inevitable vertical scrollbar, as well as
| | 02:01 | giving a bit of margin, so the site isn't
hugging the screen edges, which we can share
| | 02:06 | evenly centering the content through a
margin equals zero auto declaration.
| | 02:12 | So we'll enter in our selectors of body, #outerWrapper
and then put in our open and closing curly
| | 02:23 | braces and the width property followed by
the value of 310 pixels, and then we'll set
| | 02:29 | the margin to 0 auto, which as
I said will center the content.
| | 02:36 | Now it's time to remove the headers background
image and set up the brown color in the blogHeader.
| | 02:43 | So .blogHeader, and we'll use the
background property to handle both of these chores.
| | 02:51 | First I'll set the color to a value I've
already noted down, rgba, and within that, the values
| | 02:58 | (65,64,66, and then the opacity, which
I'll have at 1 so that it's fully opaque.
| | 03:10 | Next we want to deal with the URL, which previously
applied our faux column image, and we'll set that to none.
| | 03:17 | So url parenthesis, none, close
parenthesis, add a semicolon.
| | 03:23 | Before we take a look and see how the things are going,
let's go ahead and whip the navigation into shape.
| | 03:28 | This will take four different rules working from the
outside in, all of them using the pageHeader class.
| | 03:36 | So pageHeader nav.
| | 03:39 | We'll set that width to 160 pixels, since
that starts after the logo, and we want to
| | 03:45 | get rid of any background.
| | 03:48 | Next, let's put in our pageHeader ul
selector and here we're going to move the unordered
| | 03:56 | list over to the right a little bit by putting in
a margin-left property with the value of 40 pixels.
| | 04:03 | That will move it past the logo.
Next, pageHeader li for list item.
| | 04:11 | To convert an unordered list which is normally
vertical to a horizontal, we use a float-left property.
| | 04:19 | We want to get rid of that,
so we'll enter in float: none.
| | 04:23 | And to separate the various navigation items,
we previously had a margin-right value of 25
| | 04:28 | or 40 pixels, let's reduce that value to 0.
| | 04:34 | Finally, let's adjust the
height of the pageHeader anchor tags.
| | 04:42 | So we'll set the line-height property to 25, and
that will tighten up the navigation quite a bit.
| | 04:48 | Okay, I am going to go ahead and save
my stylesheet and go into Design view.
| | 04:53 | Now let's go to my Smart Phone size,
and there you can see my revised header.
| | 05:00 | I've gotten rid of the background image, and
I've converted the unordered list navigation
| | 05:06 | items from horizontal to vertical
and brought them a little bit tighter.
| | 05:10 | They still have a rollover effect that
fits in nicely with the rest of the site.
| | 05:15 | We're ready to move on to the content area,
and since we're linearizing the content in
| | 05:20 | sidebar, we'll toss out that faux
column background and reset the width.
| | 05:26 | The way this page is set up, we also need to
change the width of the content area, so we
| | 05:31 | can group these selectors.
| | 05:34 | The selector that held the faux column background
image is a content wrap, and we want to address
| | 05:39 | as I said our content area as well.
| | 05:42 | So with those two selectors in play, let's
set the background to none and the width to
| | 05:46 | 310 pixels to keep that all uniform.
| | 05:51 | Let's add a little padding to that
content area to make it more readable now.
| | 05:56 | So I'll add 16 pixels to the top and
bottom and 10 pixels to left right.
| | 06:02 | Next, let's downscale that really big h1 tag.
| | 06:07 | It was--originally the h1 was set at 2.8 ems,
we reduced that to 1.8 ems for the tablet.
| | 06:14 | Now let's go down to 1.4 ems for the phone.
| | 06:17 | All right, let's get a little gratification
here, I'll click Refresh and then scroll this
| | 06:22 | down a little bit so we can
check out how our content is working.
| | 06:27 | Looks like we could probably bring down the
h2 tags, and everything else is looking okay.
| | 06:36 | Let me see what that h2 tag is
right now, so it's at 1.5 em.
| | 06:40 | Yeah, we definitely don't
want it bigger than the h1.
| | 06:45 | So I am going to make that content h2, and we'll
change that font-size to 1.2 ems, that's nicer.
| | 07:01 | Time to work on the sidebar, so as we
scroll down let's see where we're at now.
| | 07:06 | Well, as you can see, the background color
that's seen in both the tablet and desktop
| | 07:11 | versions was provided by--as you recall--
a faux column background graphic,
| | 07:16 | which is now gone, so we're going to need
to specify that directly, and while we're at
| | 07:21 | it, let's specify the same width as elsewhere.
| | 07:23 | So the sidebar is contained within a class
called widget-area, so widget-area, and we'll
| | 07:31 | set that background color to the same purple
that we see everywhere and those values are
| | 07:39 | (168,88,163,1) of course, you could sample this
if you wanted to, didn't know what the values were.
| | 07:46 | And as I said, we also want to bring in
the width, and let's make that 310 pixels.
| | 07:52 | Let's Refresh the page and
everything is beginning to shape up nicely.
| | 07:56 | Finally, we need to address the footer, and all we need
to do is adjust the padding on the footer's columns.
| | 08:03 | So I'll create a new rule footer space and
then the class of col for column, and we'll
| | 08:11 | set that padding-left to 20 pixels.
| | 08:18 | So we'll save our style.css, go to Design
view, we could see the footer has shift over,
| | 08:24 | and now we have a nice single column
layout now for the phone, and let's go up to our
| | 08:32 | tablet size and our tablet is working
nicely, everything visible and in place.
| | 08:40 | And if we go up to full size, that's working as well
for a completely responsive WordPress blog design.
| | Collapse this transcript |
|
|
7. Extending Editable PagesWorking with categories and posts| 00:00 | If WordPress were just for creating blogs, we
could stop the course right now, but there's
| | 00:05 | so much more that WordPress can do.
| | 00:07 | And much of it revolves
around its use of categories.
| | 00:10 | As in life, a category in WordPress is
used for grouping, you can create and apply
| | 00:15 | an unlimited number of
categories to any or all of your posts.
| | 00:19 | As you will see later in this chapter you
can use WordPress categories to control the
| | 00:23 | look and feel of your site pages.
| | 00:26 | In this lesson we'll lay the
foundation necessary to gain that control.
| | 00:30 | Let's start by going into
our WordPress Dashboard.
| | 00:32 | If I hover over Posts, you'll see in the
fly-out a sub-option called Categories.
| | 00:38 | Click that and you can see on the right that we
have one category cleverly named Uncategorized
| | 00:45 | that serves as the initial default category.
| | 00:47 | On the left is the area for adding
new categories. Let's do that now.
| | 00:52 | So I'll click into the Name field
and name my new category Courses.
| | 00:57 | Press tab, and in the slug I'll
use the same name but lowercase.
| | 01:01 | The slug identifier will come in very handy
when we get to building custom pages using
| | 01:07 | categories later in this chapter.
| | 01:10 | Let's leave both Parent and
Description at their default settings for now.
| | 01:14 | Scroll down a tad and click Add New Category.
| | 01:21 | So there is our new category,
now let's go put it to use.
| | 01:24 | I'm going to switch to All Posts and
click on the Video Production Project Online.
| | 01:30 | Over on the right, you can see my list of categories.
Now that's been updated to include courses.
| | 01:36 | So I'm going to clear
Uncategorized and choose Courses.
| | 01:40 | Let's click Update.
| | 01:42 | And now I'm going to go head and create a
new category so I can show you one of this
| | 01:46 | feature's distinguishing characteristics,
| | 01:48 | the ability to create hierarchies. So I'll
click Categories and here I'll name my new
| | 01:53 | category Video Production, and the Slug will
have the same name but lowercase and separated
| | 02:00 | by a Hyphen instead of a Space.
| | 02:02 | A Hyphen is used because slugs are often used in
filenames, and you can't have spaces in the filenames.
| | 02:10 | So now I'm going to change
Parent from None to Courses.
| | 02:14 | Again, we'll leave Description blank
and just click on Add New Category.
| | 02:20 | Though WordPress will represent any sort of
hierarchy visually, there is really no limit to the
| | 02:25 | number of levels that you can use for your
hierarchy, so I could have something below
| | 02:29 | Video Production here, and
something below that, and so on.
| | 02:32 | Now you may have been wondering, what's
the difference between categories and tags?
| | 02:36 | You'll notice that there is a Tag
option over here under Posts as well.
| | 02:40 | Well, this hierarchical
capability is really the key one.
| | 02:45 | So now that we have our new
category set up, let's assign it.
| | 02:48 | And this time we'll switch to All Posts and
use the Quick Edit feature, and here you can
| | 02:53 | see the categories in the center.
| | 02:55 | I'll keep courses listed because this is still
course related and then just add Video Production.
| | 03:02 | Now I'll click Update, and you can see
Courses has been changed to two levels, and you can
| | 03:08 | see the category entry for my post has been
updated to include both Courses and Video Production.
| | 03:14 | So how is this affecting our page?
| | 03:17 | Let's switch back to
Dreamweaver and check it out.
| | 03:20 | I'm going to go ahead and just
hit Refresh, so I'm in Live view.
| | 03:22 | Let me scroll down to where Categories is listed, and
I'll hit Refresh. Watch the categories while I do it.
| | 03:30 | Now we have our new categories there, but we
still have Uncategorized, which is kind of unsightly.
| | 03:36 | Let's head back to the
Dashboard to see how to clear that up.
| | 03:39 | Now if I go to Categories, and I look over
my categories there is Courses, and you can
| | 03:45 | see that there is a Delete
option, Video Production same thing.
| | 03:49 | If I try the same thing with Uncategorized, which I
want to delete, I can't, there is no Delete option.
| | 03:56 | And the reason there is no Delete option is
because it's the default, so we'll have to
| | 04:00 | change the default to something else
before we can delete Uncategorized.
| | 04:05 | To do that we'll need to go to Settings > Writing,
and here we see the default post category,
| | 04:11 | Uncategorized, and I'm
going to choose Courses instead.
| | 04:16 | Let's scroll down and Save Changes.
| | 04:20 | My settings are saved, so now
let's head back to Categories.
| | 04:25 | I should see a Delete option, and I do under
Uncategorized, so I'll delete that, say OK.
| | 04:32 | And before we go back to Dreamweaver, let's
add one more category to handle our existing
| | 04:37 | posts and also to set up our
work with pages and categories.
| | 04:42 | The category I am going to add is called Conference,
and we'll use the same word in lowercase for the slug.
| | 04:48 | No parents yet, no description, Add New Category.
| | 04:52 | So let's go to our post, and we'll Quick Edit
Roux Academy Art Conference and set that
| | 05:00 | as the new category.
| | 05:01 | Now you'll notice that Courses is selected
as a category right now, and that's because
| | 05:05 | we had switched the default
category from uncategorized courses.
| | 05:10 | All right, so let's update it and head back to
Dreamweaver and see how everything is working.
| | 05:16 | I'll click Refresh again, and I now have under
Categories, Conference, Courses, and Video Production.
| | 05:23 | Now that you understand how to manage your
categories on the WordPress side, you're ready
| | 05:27 | to dive into working with
category-driven page templates.
| | Collapse this transcript |
| Developing category-driven pages| 00:00 | In separate previous lessons, we covered
WordPress Pages and WordPress Categories.
| | 00:06 | In this lesson, I will show you how much more
you can do with them when you combine their power.
| | 00:12 | Let's get started.
| | 00:13 | So the first step is to create an
index page for a specific category.
| | 00:19 | The easiest way to handle that chore is to
duplicate the index.php page that's found
| | 00:24 | in our Roux theme folder, and I can
easily do that in Dreamweaver's File panel.
| | 00:29 | Let me expand it so we can see what's
going on here, and we are in the blog folder, I
| | 00:34 | am going to expand wp-content and then drill down
into themes, and once more I have roux already open.
| | 00:41 | So I am going to go ahead and just create
a duplicate of this, and you can do it with
| | 00:46 | a Command+D or if you are not familiar with
the keyboard shortcuts, right-click, choose
| | 00:51 | Edit and then Duplicate, and Dreamweaver will
make an index or whatever the file name is -copy.
| | 00:58 | So I am going to rename that now to conference.php,
and we will use this page template eventually
| | 01:06 | for all of our conference postings.
| | 01:07 | Okay, I am going to go ahead and
open that up and reduce the Files panel.
| | 01:13 | Now let me switch into Code view, and I need
to add some code to the top to tell WordPress
| | 01:19 | that this is actually a template, and what
template it is, and that's going to be done
| | 01:24 | within the PHP code block, and just as with
the style.css we will use a /* comment, and
| | 01:36 | within that we will put the key phrase
template name and then a colon and the name of
| | 01:42 | the template, which is going to be Conference.
| | 01:44 | Let me save that page. Let's add some
content specific to this page, so it distinguishes
| | 01:49 | it as well as some code so that only posts in a
particular category are displayed on the page.
| | 01:56 | So the content is easy. We will just change
Blog to Conference, and now I'll have to set up
| | 02:02 | the loop in WordPress a little bit differently,
so I am going to need to add in a line right
| | 02:07 | above the if (have_posts()), again we will
just use a PHP code block, and in that code
| | 02:16 | block we will establish a new variable called cat_posts,
and we are going to make that equal to a new WP_Query.
| | 02:25 | So this is setting up a new object using WP_Query,
and there it is in code hint, and we will
| | 02:34 | follow that with an open and closed
parenthesis and a closing out semicolon there, and
| | 02:39 | within the parentheses we name the category.
So we will put in quotes: category_name=conference.
| | 02:52 | Now what is this category
name that I am referring to?
| | 02:54 | Well, remember when we established the
category we had to give it a slug name?
| | 02:59 | The conference value that I have here is that slug name.
| | 03:03 | So if I wanted to do video production instead
of category, I would put in video-production.
| | 03:08 | Okay, we have a few more changes to make,
mostly to apply this variable here, so let's
| | 03:15 | go ahead and just copy cat_posts. Make sure
you get the Dollar sign as well, and instead
| | 03:20 | of a general if you have_posts, we want to
check and see if there are any posts within
| | 03:26 | this specific query that we've set up.
| | 03:28 | So I am just going to paste in cat_posts,
and this is for checking an array, put in
| | 03:33 | a hyphen and a greater-than sign,
so it looks a little bit like an arrow, and
| | 03:38 | now that we have that let's copy that whole
construct and add it to our while (have_posts())
| | 03:45 | as well as the post.
| | 03:47 | Let me shrink this down just for a moment
so you can see the entire line more easily.
| | 03:51 | So again what we are doing is we set up a variable
cat_posts and then we append that to have_posts
| | 03:57 | and while have_posts, and finally if we do
have those posts, then add that to the post.
| | 04:04 | Okay, we are done on the Dreamweaver side of the
operation once I saved the page, which I've just done.
| | 04:09 | Let's head back over to the Dashboard to create a
new page so that we can use our just created template.
| | 04:15 | So I will go to Pages > Add New, so I am
going to name my new page Conference, press Tab
| | 04:23 | to create a Permalink.
| | 04:24 | I am not going to add any body content here,
I am, however, going to go over to template
| | 04:29 | and choose from the list my
newly added conference option.
| | 04:34 | Once that's done, I'll click Publish, and
let's see how things are shaping up now.
| | 04:39 | So will click view page, and you can see
my new Roux Academy Conference H1 tag there,
| | 04:45 | but it also shows up another problem that
here I have my text, and it's stretching all
| | 04:51 | the way across, and it's
pushing down the Sidebar.
| | 04:53 | Now this is likely because in the custom theme
that we based Roux theme on, the parent theme,
| | 05:00 | there is a rule that governs what the
content should look like when the body has a class
| | 05:05 | named page which represents a single page.
| | 05:09 | So to solve this, let's go back to Dreamweaver, and now
I'll go to index.php and click my style.css stylesheet.
| | 05:19 | Make sure that's the one for the Roux folder.
It is. And I am going to scroll down until
| | 05:25 | I find the content rule which should be near
the top, there it is, so now I am just going
| | 05:29 | to add another selector to this so that we
will handle that case when there is a page
| | 05:36 | class added to the body tag automatically
by WordPress and the other selector content.
| | 05:44 | All right, so that should handle this situation.
| | 05:47 | Let's go ahead and save the style.css sheet,
head back to our Browser, and Refresh the page.
| | 05:54 | Well, there it is looking really good now.
| | 05:57 | All right, now that we have a Conference template,
let's take advantage of it with our existing content.
| | 06:03 | I am going to head to the Dashboard, and you
will remember that we do have a page called
| | 06:09 | Conference Schedule At-A-Glance.
| | 06:11 | Rather than set the At-A-Glance page to the
Conference template, the better approach is
| | 06:17 | to convert it to a post and
then apply the conference category.
| | 06:22 | So I am going to open up my Conference
Schedule At-A-Glance, I can remember the title, so
| | 06:27 | I don't need to copy that, but I want to
get all of this body copy, so I am just going
| | 06:31 | to put my cursor in there and do a Command+A to
select everything and then a Command+C to copy it.
| | 06:38 | Now before I leave here, I am just going to
change the Publish Status here from Published to Draft.
| | 06:45 | That will take it off the board but keep it in our
WordPress system in case we need to access it later.
| | 06:51 | So I will click Update, and now let's go to
Posts > Add New, we will put it in our title
| | 06:58 | Conference Schedule At-A-Glance,
and we will paste it in our content.
| | 07:10 | Now next, we want to set the Category to
Conference, and if I publish this right now, what's going
| | 07:17 | to happen is this Conference Schedule At-A-Glance
would become the first post because if you
| | 07:23 | recall we have our posts set up to show in
descending order, so the newest post will show up first.
| | 07:31 | One way to work around that is to change the
publication date, and you can do that right
| | 07:35 | over here on the right where it says Publish
immediately, and there is an Edit link, click
| | 07:39 | that Edit link and here we have the option
for changing the date. I am just going to
| | 07:43 | go ahead and change it, let's move it back a whole
month, and then click OK, now I will click Publish.
| | 07:52 | Now before we check out how that's looking, we have
one more thing I want to take care of, and
| | 07:56 | that's the Sidebar menu.
| | 07:58 | You may remember that when we first created
the Sidebar, we used WordPress' built-in menu
| | 08:02 | tool to create one with our only page at
the time, which was Conference At-A-Glance.
| | 08:08 | That was the sole entry.
| | 08:10 | Now that we've moved that content to a post,
let's adjust the menu and add another entry.
| | 08:15 | So I am going to go down to Appearance > Menus,
and here is my Sidebar menu, and as I said
| | 08:21 | I do have Conference At-A-Glance here, let
me extend that, and we are just going to go
| | 08:26 | ahead and remove the existing one.
| | 08:30 | Now let's add in our Conference page.
I'll add that to the menu, save the menu.
| | 08:37 | Now to add in the Conference At-A-Glance, which is
a post, I am going to need to pull up its Permalink.
| | 08:44 | So let's head back over to Posts for just
a quick second, and we will do Conference
| | 08:50 | At-A-Glance, I am going to click the Edit button
and then copy the Permalink which you see here.
| | 08:59 | With that copied we can go back to our menu,
and we're going to add this in as a custom
| | 09:04 | link, and we will give it the label
of Conference Schedule At-A-Glance.
| | 09:14 | Okay, click Add to menu, and I should have
those two items now. Let's go ahead and click
| | 09:21 | Save menu, now let's head back to Dreamweaver,
and I will go into Design view, click Refresh,
| | 09:30 | and here you can see my menu. Under Hot Links I now
have Conference and Conference Schedule At-A-Glance.
| | 09:37 | Let me enable under Live view options
Follow Links Continuously, and let's see what do
| | 09:43 | we have under Conference, and this will pull
up the Roux Academy Conference with whatever
| | 09:48 | posts that we have there.
| | 09:49 | There is the first post that we assign the
Conference category to and then below it is
| | 09:53 | Conference Schedule At-A-Glance, and it looks
like there is still a little bit of CSS work
| | 09:58 | that we will need to do to
take care of that unordered list.
| | 10:02 | So you know what to do to handle this? You
turn on Inspect mode--let me open up my CSS
| | 10:08 | Styles panel--and then let's take a look at
what it is that we have to work with here.
| | 10:14 | I will hover over the list items
and then go off the DOM a little bit.
| | 10:18 | I should have a <ul> entry here. Let's go
into the stylesheet, scroll down to just under
| | 10:31 | the content area, so I'll put in my content
selector, add a ul and a comma so we can
| | 10:37 | do .page #content ul, and we will
set the margin left to 20 pixels.
| | 10:48 | All right, I will click over here to refresh the
page, and everything is lined up again. Excellent.
| | 10:54 | So let me save style.css, so I want to make
sure that my Live view options are set to Follow
| | 11:03 | Links Continuously, and then we can click on
Conference Schedule At-A-Glance, and there
| | 11:09 | is that solo post all by itself, looking okay.
| | 11:12 | All right, we are in pretty good shape, but
there is more that we can do to make a Category
| | 11:17 | page really stand out, and we will
tackle that chore in the next lesson.
| | Collapse this transcript |
| Changing headers by category| 00:00 | In the developing category driven pages lesson
you saw how to limit the posts and the content
| | 00:06 | area to a specific category, but what about the other
elements of the page like the header, sidebar, and footer?
| | 00:13 | Can those change according to
the chosen category as well?
| | 00:16 | Well, the answer is you bet.
| | 00:17 | In this lesson I'll show you two different techniques
that work together to create custom headers by category.
| | 00:25 | To illustrate these techniques, what we're going to do
is swap out this background image that you see here.
| | 00:32 | So to start, I'll need to create a new header
file that's dedicated to the Conference category.
| | 00:39 | Let's expand the Files panel here in Dreamweaver,
and in my roux theme folder I'm going to select
| | 00:45 | header.php, and this time I'm just going to
press Command+D which will duplicate the file.
| | 00:52 | With a PC you can use Ctrl+D, and now I'm
going to rename header-Copy, and I'll make
| | 01:00 | that header-conference instead.
| | 01:04 | So let's customize our new
header-conference.php file a bit.
| | 01:09 | I'll open it up, close down the Files panel
and switch to Code view, and what we're going
| | 01:15 | to do is just add a new class to the header tag.
So we have blogHeader and pageHeader so far.
| | 01:22 | Let's add conferenceHeader.
| | 01:25 | Now if we were working with a standard foreground
image like the logo, we could just swap that out.
| | 01:30 | But because it's a background image that's
applied to this h1 tag here, we'll use CSS instead.
| | 01:39 | So let's save our page, and now we're going
to need to call the new header page, and we
| | 01:44 | want to call that from conference.php.
| | 01:48 | So again, I'll just expand my Files panel for a
moment so we can quickly access conference.php
| | 01:54 | and then collapse it.
| | 01:55 | Now you'll notice that the first real PHP
directive here is get_header, rather than
| | 02:00 | leave it at the generic get header we're going to
specify, and we'll specify conference in single quotes.
| | 02:07 | Notice that we don't specify header-conference.php
or something like that, it's just conference.
| | 02:14 | You only need to put in the keyword and
WordPress will do the rest of the work.
| | 02:19 | Okay, we're ready to save this. That's
the only change we need to make here.
| | 02:24 | Now let's go to our style.css
sheet via our index.php.
| | 02:30 | Make sure that we're going to the Roux style.css
sheet, and I'm going to copy blogHeader right here.
| | 02:37 | The rule that's on line 59, paste it
right below, and change blog to conference.
| | 02:44 | Now you may recall when we first copied in the
blogHeader we didn't just copy in blo_header01,
| | 02:49 | we copied in blog_header01, 02, and 03.
| | 02:53 | So let's just change the 01 to 02, Save the
page, and now I'm going to go to Design view.
| | 03:01 | Again, let's go to view option just to make sure
that follow links continuously is still selected.
| | 03:07 | And now if I refresh the page, I
am on my Conference page already.
| | 03:10 | I have a new header that's dedicated
to the Conference page. So far so good.
| | 03:17 | Now this is fine and dandy for the General
conference page, but let's see what happens
| | 03:22 | when we drill down into a single post.
| | 03:25 | So I'll click on Roux Academy Art Conference,
and it switches back to the general header.
| | 03:31 | WordPress is now using a
single.php page template.
| | 03:37 | Let's copy that file into our child theme.
| | 03:40 | Again, I'll expand the Files panel, and
let's scroll up a little bit and then roll down
| | 03:45 | into Custom where you'll see single.php.
I'm going to copy that file, collapse custom,
| | 03:53 | select roux, and paste it right in.
| | 03:56 | Okay, we'll collapse the Files panel again, and
let's open up the file that we just brought in.
| | 04:02 | So here's roux, I'll go to code, and as
you can see, it's from the roux theme folder.
| | 04:09 | Unfortunately, we can't just use a single-conference.php
file like we did a header-conference.php file.
| | 04:18 | We'll need to create some code to discover
which category is applied for a specific post
| | 04:23 | and then serve the appropriate header,
and I've got just the code to do that.
| | 04:28 | Let's go to File > Open, and we'll go to
our Desktop where the exercise files are, and
| | 04:34 | here's Chapter 07/07_03, and there you'll
see the single_header_code file, open that,
| | 04:44 | and here's our PHP code block.
| | 04:47 | Let me explain a little bit
of what's going on with this.
| | 04:49 | There is basically two different areas here.
| | 04:52 | The first going from line 3 to line 7, check
to see if there are posts, and if there are,
| | 04:59 | it gets whatever categories
that there are assigned to it.
| | 05:03 | Now this is a pretty robust routine that I
developed for a client once, so I decided
| | 05:07 | just to use it rather than
strip it down to the bare minimum.
| | 05:12 | This second part of the routine that you see
here actually goes through and gets whatever
| | 05:17 | parent category that there is, so it gets the
top level category, and we'll use that instead
| | 05:23 | of multiple categories that appear.
| | 05:25 | All right, so the rest of the routine goes
through and looks to see what categories are being used.
| | 05:33 | The very uppermost category that's being used
that becomes the top parent and then it looks
| | 05:38 | to see if the top parent is conference, get_header
('conference') and otherwise get_header ('archive').
| | 05:47 | And this last bit of code here
wp_reset_query is very important.
| | 05:52 | Because we have looped through the posts,
you want to make sure to reset the query so
| | 05:58 | that any other times that you engage in
the loop on the page it will work correctly.
| | 06:03 | All right, so all we need to do is to copy
our sample code, go to single.php, and I'm
| | 06:10 | just going to replace this one
get_header file that you see here.
| | 06:14 | We'll save that code, and now let's head
back over to index.php, and we're in the single
| | 06:20 | mode already, so I'll just
refresh, and there is my new header.
| | 06:25 | So it looks like we've got our header rocking
to the Conference category, and if you wanted
| | 06:29 | to you could apply the same
techniques to the sidebar and footer.
| | 06:33 | It's all up to your design.
| | Collapse this transcript |
|
|
8. Enhanced JavaScript with WordPressAdding Spry accordion panels| 00:00 | Dreamweaver has a good number of layout
power tools built right in, many of which rely on
| | 00:05 | the Adobe fostered framework Spry.
| | 00:09 | Putting them in a standard
Dreamweaver page is pretty much point and click.
| | 00:13 | Adding them to a WordPress page takes a
bit more work, but it's definitely doable.
| | 00:18 | In this lesson, I'll show you how to add a
Spry Accordion panel to a WordPress page.
| | 00:23 | But first, let's create a new
page template to work with.
| | 00:27 | To do that, I am going to
copy the index.php page.
| | 00:31 | So let me expand my Files panel, and in the
roux folder, I'll select index.php, and then
| | 00:39 | press Command+D for duplicate.
| | 00:42 | Once that's done, I'll select the index - Copy.php
and rename it, and I am going to name it events.
| | 00:50 | Now, let's open it up.
| | 00:53 | I'll collapse the Files panel
and go into Code view.
| | 00:57 | Now, I need to add my template
declaration header up top here.
| | 01:01 | So, I'll do that starting with a PHP code
block, and then my comment frame, and inside
| | 01:09 | of there, Template Name: Events.
| | 01:15 | So now, I'll save that page, and let's create a
new page in WordPress that uses our Events template.
| | 01:22 | So I'll go to Pages > Add New.
| | 01:24 | I'll put in a title for
this one, Homecoming is coming!
| | 01:33 | And just some sample placeholder
text for now, Text for homecoming event.
| | 01:39 | Let's switch the Template
to Events and Publish. Okay.
| | 01:45 | We'll view the page, and there is our
Roux Academy Blog, Homecoming is coming!
| | 01:51 | Now, let's customize this a little bit more.
| | 01:54 | We'll go back to Dreamweaver, and change Roux
Academy Blog to Roux Academy Events. I'll save that.
| | 02:03 | Once I go back to my browser and click
Refresh, that update will take place immediately.
| | 02:08 | You can easily go back and forth between
Dreamweaver and WordPress, making changes as needed.
| | 02:13 | So now we're ready to
add in our Accordion panel.
| | 02:16 | I am going to go into Split view here, and you'll
notice that I have Invisible Elements turned on.
| | 02:22 | Now, that's found under the view options,
and it's very handy sometimes for quickly
| | 02:27 | isolating certain code blocks, especially
when you've got lots of PHP code, and you're
| | 02:32 | not quite sure what is what. Rather than
staring at the code, sometimes I'll go into Split
| | 02:36 | view, and if I know about where the code
block takes place, I can find it more easily.
| | 02:41 | So, what I want to do is select the
PHP code block right after Not Found.
| | 02:47 | That PHP code block ends
the loop within WordPress.
| | 02:51 | So, we're going to go just outside that.
| | 02:53 | So I am going to click my right arrow once,
and move, as you can see, in Code view just
| | 02:59 | to the right of the code block.
| | 03:01 | And now we're ready to
insert our Spry Accordion panel.
| | 03:04 | So, let me double-click on the Insert Tab here.
Then I will switch to Spry.
| | 03:11 | You could also go to Layout if you
wanted to, but sometimes Spry is easier.
| | 03:15 | And I'll scroll down 'til I see Spry
Accordion, and click it once to insert it.
| | 03:20 | Now, let me open up my Property Inspector.
| | 03:23 | It's very handy when working with Spry,
especially when you're working in Split or Design view,
| | 03:29 | you can really take advantage of Spry's
tight integration and use the Property Inspector
| | 03:34 | for a lot of different kinds of manipulation.
| | 03:37 | For example, now that I have the Spry Accordion Tab
selected, that will give me my custom Property Inspector.
| | 03:45 | And if I want to add a third panel here, I'll
just select Label 2, that's the second panel,
| | 03:53 | and click the Add button. That will put
a third panel right after my selection.
| | 03:57 | Now, let's go ahead and change the headings.
| | 03:59 | I am going to go ahead and just
select the first one to open it up.
| | 04:04 | I'm going to make the
first heading Transportation.
| | 04:07 | This Accordion panel will contain some standard
content that I want to appear on every events page.
| | 04:14 | So, we'll have some
information about Transportation.
| | 04:17 | We'll also cover Restaurants, and I'll put
that label in Label 2, and Label 3 will become
| | 04:24 | our Lodging category. All right.
Let me save the file.
| | 04:29 | When you save any file with a Spry component,
Dreamweaver lets you know that it needs to
| | 04:33 | copy some files to the site root.
So, let's okay that.
| | 04:38 | Now, I am going to go back into my Files panel,
expanding that, and show you what just took place.
| | 04:44 | Here is a folder just added.
| | 04:46 | Let me collapse blog, so we can see
better what's going on for SpryAssets.
| | 04:51 | If I expand that, we'll find two files,
one for the CSS and one for the JavaScript.
| | 04:56 | I want to copy both of these files.
| | 05:00 | So I've selected them now, and I'll press
Command+C to copy them, and I am going to
| | 05:04 | put them in the roux folder.
Let me just scroll down.
| | 05:07 | I believe it's already
opened up, and there it is.
| | 05:09 | I am going to go ahead and just put it in a
similar folder that I'll create now by right-clicking
| | 05:15 | on roux, and name it the same, SpryAssets.
| | 05:22 | And with that selected, press
Command+V to paste in my files.
| | 05:26 | Now what we're going to do is go back to our
code, where if we scroll to the top, you'll
| | 05:35 | see that a script and a link tag were added,
pointing to where the files were initially
| | 05:42 | saved in the site root.
| | 05:44 | We're going to change this path so that it
points to the roux folder, SpryAssets folder.
| | 05:51 | And for that, I'll use a WordPress function
called bloginfo to find the stylesheet directory.
| | 05:58 | So, it's a PHP code block.
| | 06:00 | And within that is the function bloginfo with
the parentheses and followed by a semicolon.
| | 06:10 | Within the parentheses, we'll use double
quotes and the key term stylesheet_directory.
| | 06:18 | This will point to whatever folder is using
the current theme's stylesheet which works
| | 06:25 | really well when you're
working with child themes as we are.
| | 06:28 | Okay, I've retained a trailing
slash after that. That's good.
| | 06:33 | So now I can just copy this PHP code and use it to
replace most of the initial path for my link tag.
| | 06:41 | So, let's save that. Now, let's
take a look at that in the browser.
| | 06:45 | So, I am going to head back to the browser
page that I had opened with Roux Academy Benefits.
| | 06:51 | And if I refresh the page, I'll now see my
Accordion panel has been added to the page
| | 06:58 | after the text that I put in.
| | 07:00 | So, I can click on Restaurants,
Lodging, go back to Transportation.
| | 07:06 | All seems to be working very well.
Obviously, we'll need some styling.
| | 07:10 | But before we get to that,
let's add in some content.
| | 07:13 | So I'll go back to Dreamweaver, and
I have some content already prepared.
| | 07:18 | It's stored within our exercise files.
| | 07:21 | So I go to File > Open, go to Desktop/Exercise Files/
Chapter 8/08_01/accordion panel copy.htm.
| | 07:36 | Open that up.
| | 07:39 | I'll go into Split view so you
can get a better sense of it.
| | 07:43 | And here you can see it's divided into certain areas.
The last one, Lodging, even has a few images there.
| | 07:49 | So, I'll just copy this initial text here
for Transportation, go to my Events page.
| | 07:55 | And because I copied it from Design view,
I am going to paste it in Design view.
| | 08:00 | So let me highlight my Spry Accordion here.
I am already in Content 1.
| | 08:05 | So I can select that bit of placeholder
text and paste it in my code there.
| | 08:11 | Now, let's go back, and let's get the
next one which is under Restaurants.
| | 08:19 | This time just to do a little variety of things,
I am going to go ahead and copy the text in
| | 08:25 | Code view, and following my basic rule
of pasting in wherever you copied from.
| | 08:33 | Here is Content 2, the
Restaurants, so let's paste that in.
| | 08:37 | Now, I notice that when I copied in my text
from above, it didn't bring in a paragraph tag.
| | 08:44 | So I can quickly adjust that.
| | 08:47 | I'll put my cursor right after the
end here and just hit Enter once.
| | 08:51 | That not only creates a new paragraph line
with a non-breaking space, but it also wraps
| | 08:57 | the previous text in a paragraph line.
So, that's a quick little shortcut.
| | 09:01 | Let me hit my Delete key to go back and
get rid of that unneeded P tag. All right.
| | 09:07 | Let's go ahead and get the
final option which is Lodging.
| | 09:13 | So, I'm going to just select the first
image there to go right down to the code.
| | 09:18 | Now you want to be sure to get the div
that's above that image, and the h3 tags, and then
| | 09:24 | scroll all the way down to the bottom
here, and get the closing div as well.
| | 09:30 | There is a couple of divs that are being used
here to provide some in-line styles, specifically
| | 09:36 | a margin bottom to separate these two.
| | 09:39 | Obviously, for the final product, you would
want to incorporate that into your CSS stylesheet,
| | 09:44 | and not use the in-line styles,
but for our purposes, it works.
| | 09:47 | So, I am going to copy that, head over to events.php,
and let's scroll down to where Content 3 is.
| | 09:57 | I am going to click the Delete key to remove
it, and now I'll paste in my other content.
| | 10:03 | Now, if we take a look at this in Split view, you
will notice that the paths are not coming in correctly.
| | 10:09 | In fact, we need to adjust the paths so
that they point to the Roux theme directory.
| | 10:16 | And for that, I am going to go up and since
we already have used this code block once,
| | 10:22 | I am going to grab that same PHP
bloginfo stylesheet_directory code block.
| | 10:29 | Copy that, head back down to where the
images are, and put it right in front of the first
| | 10:37 | source value, paste that in.
| | 10:40 | Now, we're not quite done, so the bloginfo
stylesheet_directory will take us to the roux folder.
| | 10:45 | Now we want to go into the _images folder.
| | 10:47 | So I'll add that to my path
and put another trailing slash.
| | 10:51 | Now, this entire bit of code here is really the
path that we want in front of the other image as well.
| | 10:58 | So I am going to copy that, go down to
fancy_hotel.png, and paste that in. All right.
| | 11:04 | Let's save that page, and head on over to
our browser, where if we refresh the page,
| | 11:10 | we'll see some content added.
| | 11:12 | There is my Restaurant list, and let's check out
the Lodging, and there is our hotels. All right.
| | 11:18 | All the content is in place, we
definitely need some styling now.
| | 11:22 | Let's go back to Dreamweaver, and I am
going to close my Accordion panel copy file.
| | 11:26 | We don't need that anymore.
| | 11:27 | Now, let me go over and reduce both the Insert
panel and the Files panel so we can give full
| | 11:33 | focus to our CSS Styles panel.
| | 11:36 | Now, one thing that I've noticed when working
with Spry components, I find that it's actually
| | 11:40 | easier to use the All mode of the CSS Styles panel
rather than the more frequently used Current mode.
| | 11:47 | Now, you'll notice right here in the events.php
file, if I switch to the All mode, I have
| | 11:53 | a listing for SpryAccordion.css
but no style rules.
| | 11:58 | That's because you cannot make
modifications to just the events page.
| | 12:03 | You have to go to the index.php page
with all of its dynamically related files.
| | 12:09 | So let's switch to that.
| | 12:11 | And I don't have a events page
linked from the navigation anywhere.
| | 12:15 | So when you're working with your pages,
the easiest way to handle it is to go back to
| | 12:19 | the browser for just a second, select and
copy the URL for the page you want to work
| | 12:24 | with, and then head back to Dreamweaver, and insert
it into the location bar and press Return or Enter.
| | 12:31 | So now, I'm working with my Accordion panel
right within Dreamweaver, and I have my stylesheet
| | 12:36 | in All mode, and I can expand that.
| | 12:39 | Let's bring the Properties down just a little bit
so we can see some of the various properties there.
| | 12:43 | And we're ready to crawl down
the SpryAccordion.css sheet.
| | 12:47 | So, the first thing I'm going to change is
the color of the tab that we see here, so
| | 12:53 | the AccordionPanelTab.
| | 12:54 | What I want to do is instead of using this
light gray background color, I am going to
| | 12:59 | sample the purple that we see here.
So I'll sample that.
| | 13:03 | Now, notice that two of them changed, but we'll
get to the one that did not change in just a second.
| | 13:08 | I also want to make sure that the color
is white rather than this default black.
| | 13:13 | So, let's add a color property
here, and I'll just type in white.
| | 13:19 | Next up is the one right below that
which is the AccordionPanelContent.
| | 13:23 | And as you can see, the content here under
the Transportation tab that's open kind of
| | 13:29 | goes right up to the edge of the screen.
| | 13:31 | So, that's because there
is 0 padding by default.
| | 13:33 | Let's make that 10 instead of 0.
| | 13:36 | Next up is the next rule which handles the
properties for the Accordion panel tab when
| | 13:42 | the panel is actually open, and I
am going to just keep it consistent.
| | 13:46 | Let's make our background color the same,
sample purple there, and let's go ahead and
| | 13:51 | add a color: white just to be sure.
| | 13:54 | Next, let's do AccordionPanelTabHover, and I
am going to scroll up the page just a little
| | 13:59 | bit, so I can pick up the
orange here that's in the R.
| | 14:02 | So I'll click into the color swatch
and go over and sample that color.
| | 14:05 | So, let's scroll down all the way to the ones that
are close, and you can see the orange appearing there.
| | 14:10 | Now, we have to do the
same thing for the Open panel.
| | 14:13 | So we'll scroll back up and
sample that orange. All right.
| | 14:18 | We are almost done, we have two more rules to do
here, and that is the AccordionFocused section.
| | 14:24 | So, if you notice that when I roll over
and if I click on anything, once the Accordion
| | 14:28 | panel has focused, it has a
whole other set of colors.
| | 14:32 | And we want to of course make that
conform to what we've been using.
| | 14:36 | So here I have my background color.
I'll sample again the purple.
| | 14:40 | Let's add the color property, and set that
to white, and we're just going to duplicate
| | 14:46 | that exact same thing for the
next rule, color: white.
| | 14:53 | Okay, so let's take a look.
| | 14:54 | There is all the various panels seem to be
working correctly and they definitely are
| | 14:58 | fitting within our style.
| | 15:00 | Now, there is one last style issue to
address that's not related to the Spry components.
| | 15:05 | If you expand the Restaurants panel as I
have here, you can see the list of Restaurants
| | 15:11 | is pretty bland, and honestly,
it's not terribly readable.
| | 15:15 | If we take a look at the code on the events.php page for
that section, we can see that definition lists are used.
| | 15:23 | Rather than just generically style all
definition lists for the site, let me show you how to
| | 15:28 | target a specific template page.
| | 15:30 | So, I am going to go back to my index.php
file, and let's enter into Live code.
| | 15:35 | And I am going to go up to the body tag.
| | 15:38 | Let me just choose on the tag
selector here so it will go right below that.
| | 15:41 | Now, you'll notice there are number of classes
that are dynamically added by WordPress, there
| | 15:46 | is page, there is page-id-55, there is page-template,
and there is also a page-template-events-php.
| | 15:54 | That's the exact class that we need in
order to target our definition list CSS rules.
| | 15:59 | So, with that selected, I'll copy it, drop
out of Live code, go back to our style sheet,
| | 16:04 | and I am going to add about three rules.
| | 16:06 | I am going to put them
down towards the bottom here.
| | 16:08 | Let's put them in between the
footer and the video container.
| | 16:12 | So first, I'll put in a dot for the class
and then paste in my selector, and we want
| | 16:17 | to first style the definition list itself.
| | 16:20 | And all we need to do here is
just add a margin-left of 20 pixels.
| | 16:26 | Next, we'll target the definition term which
is the first phrase in the definition list,
| | 16:33 | and let's make those stand out a
bit with a font-weight of bold.
| | 16:37 | Now, let's do the definition data with our
same selector and set that padding so that
| | 16:46 | there's some separation on the
bottom and on the left. So, padding: 0 0.
| | 16:52 | Let's do 15 pixels for bottom
and 20 pixels for the left. Okay.
| | 16:57 | I'll save all of our files.
| | 16:59 | Let's go up to File > Save All Related Files
to make sure we've got everything, and I'll
| | 17:03 | click on Design view.
| | 17:05 | And now you can see the results
of our little bit of styling.
| | 17:09 | Well, that looks pretty good.
| | 17:10 | Now, let's head back to the Dashboard and
make it easy for us to access our page by
| | 17:15 | adding the homecoming page to our sidebar menu.
| | 17:18 | So go to Appearance > Menus,
and here is Homecoming is coming!
| | 17:23 | I'll just add that to the
current menu and save the menu.
| | 17:27 | So now when we take a look at the page,
we'll see that there, and I can click on it, and
| | 17:32 | there's my Accordion panel looking pretty good.
| | 17:35 | All of the techniques we used in this
lesson can also be applied to Dreamweaver's other
| | 17:39 | Spry layout tools, including
tabbed and collapsible panels.
| | Collapse this transcript |
| Working with Spry form validation| 00:00 | Form validation is one of the
things web designers love to hate.
| | 00:04 | You know you need it, your forms would be
better off with it, but it can be so tricky
| | 00:08 | to implement it's often left undone.
| | 00:11 | Luckily spry validation is pretty straightforward
to integrate into a page even on a WordPress page.
| | 00:18 | Let me show you how.
| | 00:18 | So I am going to start off by adding some
basic form elements to our events template page.
| | 00:24 | I will switch to events.php that I have
opened. I am here in Split view, so I want to put
| | 00:31 | this form right above the Accordion
panel that we inserted in the last lesson.
| | 00:37 | To do that, I am going to select the
Accordion panel here. As you can see, in Split view
| | 00:42 | on the left-hand side of the screen, all of
that code is now highlighted and then I am
| | 00:47 | going to use my left arrow key to move right
in front of it but staying in Design view.
| | 00:53 | All right, double-click on the Insert panel
tab to open that up, and this time I am going
| | 00:58 | to switch over to Forms and
start to build out my form.
| | 01:03 | So first let's add that Form in, and there
you can see the red outline of the form, and
| | 01:09 | now I want to add a field set to that, so
we will scroll down to where we see Fieldset
| | 01:14 | and click on that, Dreamweaver will ask
what's the legend is that you want to put in, and
| | 01:19 | this is going to be a small form that just
tries to encourage people to sign up for the
| | 01:25 | events and newsletter.
So Sign Up for Our Newsletter.
| | 01:29 | Now I am going to add a paragraph right after
that, just a little descriptive text, and let's
| | 01:35 | just put in Get all the
news hot off the presses.
| | 01:40 | With an Exclamation Mark of course.
| | 01:43 | Next up is the actual field that I will be
using for my Spry form, and this form will
| | 01:49 | just have one field, and that will be an email field
so that starts off as a Spry Validation Text Field.
| | 01:56 | So let me click on that entry in the
Insert panel and the id will be emailNewsletter,
| | 02:03 | press Tab, the Label is just Email.
| | 02:08 | We want to make sure to attach the label
tag using the for attribute and have it come
| | 02:12 | before the form item.
| | 02:15 | Let's leave the other values
at their default and click OK.
| | 02:19 | There is my Spry TextField.
| | 02:22 | Now once it's inserted, we have
our custom property inspector.
| | 02:25 | I am going to change the type to Email Address,
and that will give us another preview state
| | 02:33 | of invalid format, while that's highlighted,
let's change the message a bit, and instead
| | 02:39 | of a somewhat formal but totally uninformative
invalid format, let's make it Full email address
| | 02:48 | and add a comma and a
please because we are nice.
| | 02:52 | Now we also want to change the other text
message, the other preview state that we have
| | 02:56 | is one for required, so I am going to go
ahead and instead of a value is required, let's
| | 03:03 | just make that the simple word
Required, with an uppercase R.
| | 03:08 | Okay, so at the end of this field I am going
to hit Return again and add a Submit button
| | 03:15 | so that's a button here. Just going to
put in an id of submit and click OK.
| | 03:22 | No label is needed for such a button.
| | 03:25 | Now I'll save the file, and we will go through
the same steps we did when adding the Spry
| | 03:31 | Accordion to the page in the previous lesson.
| | 03:34 | So I will click OK, that will add the
SpryAssets to the site root. Let me expand my Files
| | 03:41 | panel, and now I am going to scroll down
to where my SpryAssets folder is in the site
| | 03:47 | root, and you will notice two new files have
been added, one CSS and one JS, both dedicated
| | 03:52 | to the spry validation text field.
| | 03:55 | So with those selected I will copy them and
then do a little scroll up to where I find
| | 04:00 | the SpryAssets folder that's within the roux
folder and paste those files right in there.
| | 04:08 | Okay, let's collapse the Files panel, and
we are going to adjust the paths, so I will
| | 04:14 | go ahead and expand to Code view here, so we
can go up the top of the page where Dreamweaver
| | 04:19 | has inserted this code.
| | 04:22 | Now since we already did this code block
here at once, I am going to go ahead and select
| | 04:26 | it and then copy and then replace all of the
path up to the leading slash before SpryAssets,
| | 04:34 | paste that in, and let's do it not only for
the link tag but also for the script tag.
| | 04:38 | All right, I will save our page, and now we
are ready to head on over to the index.php
| | 04:45 | page, where I will refresh it, and then scroll
down, and there you see our form kind of jammed
| | 04:54 | on top of the Spry panel, we will take care
of that as we do with a little styling, let's
| | 04:59 | take care of the various styles first.
| | 05:03 | So again, I will collapse the Insert panel
and the Files panel to give full precedence
| | 05:09 | to my CSS Styles panel.
| | 05:11 | Now I have these SpryAccordion.css
stylesheet expanded, let's collapse that, and there is
| | 05:16 | my SpryValidationTextField style sheet, so I will
open that up, and we are ready to start work on this.
| | 05:24 | Before we do, I just want to demonstrate a
little bit about how this works, so here is
| | 05:28 | the Email field. If I click into it, you can
see a little active background appears.
| | 05:35 | If I try to just click Submit, I do get an error
message. If I put in a partial email address
| | 05:45 | and click Submit, I will get
a different email message.
| | 05:49 | Now there are specific characteristics here,
the red background is to show the error, there's
| | 05:54 | also a border on the error messages, which
I don't like from a design perspective so
| | 05:58 | we will remove that and make
some other adjustments as well.
| | 06:01 | Again I am going to just work my way down
the SpryValidationTextField.css, so let's
| | 06:06 | just start at the very top and move down.
| | 06:09 | Now the first one we are going to leave alone.
This sets up the initial state for whether
| | 06:14 | messages are required or not. We
don't display that until it's necessary.
| | 06:18 | So now we will go down, I will just press
the Down Arrow key in order to move down to
| | 06:22 | the next CSS rule, and as I said I am not
a big fan of the border here, so I am just
| | 06:28 | going to select the border
and then click the Trashcan.
| | 06:31 | I think red is very appropriate for an
error message, so we will leave that.
| | 06:36 | Let's go down to the next rule.
| | 06:38 | Now this is for the ValidState input. I didn't
demonstrate this but if I had put in a valid
| | 06:43 | email address, we would have
had this lovely green color.
| | 06:47 | Again, not a big fan, so I am going to go
ahead and change that to white, and let's
| | 06:51 | continue down our rules. Here is a background
color, that's okay. I think this light red
| | 06:55 | is okay with me, so I am going to keep moving.
| | 06:58 | Now here is the background color for the
input state, and rather than use their version of
| | 07:04 | the light green, let's work with the one we
already have on our comp, so I am going to
| | 07:08 | click on the Color Swatch and then sample
that, and that's going to look a lot better
| | 07:14 | and here is our red color, that's fine,
and one more for the TextField state.
| | 07:21 | I want to go through it just one more time
just to make sure I got everything, looks good.
| | 07:28 | So we have taken care of the Spry elements,
but how about adding some style to the other
| | 07:32 | form elements so it fits into our site better?
| | 07:36 | The few select rules again using our page
template events PHP selector as we did with
| | 07:42 | the Accordion panel, we can
target our CSS rules for the form.
| | 07:48 | So I am going to go to style.css, and let's
go right down to where we define the CSS rules
| | 07:54 | for our definition list.
| | 07:55 | I am just going to pick up this selector one more
time here, and let's put in a new rule for the fieldset.
| | 08:04 | Let's go to Code so we can
see this just a tad easier.
| | 08:08 | Okay, so there is my fieldset up top, I
will add my opening and closing curly braces.
| | 08:15 | Now I like fieldsets that have slightly rounded
corners, so I am going to put in a border-radius
| | 08:20 | of 5 pixels, let's separate the fieldset from the
Accordion panel with a margin-bottom of 20 pixels.
| | 08:29 | We are going to put a blue border around it,
so we will put in border: 2 px solid,
| | 08:38 | and I am going to use the same color that
we've used elsewhere in the site, and that's
| | 08:45 | (168,88,163) with an opacity value of 1, and
finally let's add 10 pixels of padding all round.
| | 08:56 | All right, let's take a quick
look and see how that's shaping up.
| | 08:59 | Well, I think that's working out pretty well. We are
on our way. Let's now do the legend, so back to code.
| | 09:08 | Paste them in my page-template selector and
add the tag legend, we will make this a different
| | 09:15 | color that's in our site.
| | 09:18 | Now this will be a blue color, and let's
make the font-weight bold. How we are doing?
| | 09:29 | Much better. Okay, we need to adjust the P tag
just so we can space that out a little bit, my
| | 09:34 | selector and then P, and this will be just a
padding property with 5 pixels top and bottom
| | 09:44 | and none left and right.
| | 09:48 | Next up, we want to address the two actual form
elements, the text field and the Submit button.
| | 09:55 | Again when we take a look at that we can see
that they are little bit scrunched, so I am
| | 09:59 | going to add some padding, and we will
also move the Submit button over to the right,
| | 10:05 | and because we have more than one form
on here, we have a search form as well.
| | 10:09 | I am going to target this very form, which
is Dreamweaver's default of putting in form1
| | 10:14 | as an id, and then we will look for the input
tag with a attribute that has the type set to text.
| | 10:26 | And that one we will only need a little bit of
padding all around. Let's do 3 pixels of padding.
| | 10:31 | Now I am going to copy this whole selector
here, paste it in because the only thing we
| | 10:36 | need to change now is the
type value from text to submit.
| | 10:41 | All right, let's put in our opening and
closing curly braces, adding some padding value.
| | 10:48 | Let's do again 3 pixels on the top, but I
want to add 5 pixels left and right, and this
| | 10:54 | will make that Submit button a little bit
bigger, and as I said I want to move it to
| | 10:59 | the right, we will do that with a
margin-left property of 45 pixels.
| | 11:04 | Okay, all that's left is to kind of save and test.
There is my New button. Let's head back
| | 11:10 | to the Browser so that we can do
our testing in a proper environment.
| | 11:16 | So my form looks good.
Let's see how it acts.
| | 11:18 | So if I click Submit, I get the
message that the Email form is required.
| | 11:24 | Now when I click into it, I can see I have
the active focused background, that's the
| | 11:30 | same as the search, that's great.
| | 11:32 | I will just put in my name because that's
all they actually need, right? And hit Submit.
| | 11:38 | Again, Full email address, please.
| | 11:41 | Fine, so let's go ahead and put in a full
email address and then hit Submit, and it's
| | 11:48 | submitted, everything is good.
All right, pretty sweet.
| | 11:52 | We've got Spry Form validation up
and running in a WordPress page.
| | Collapse this transcript |
| Integrating jQuery functionality| 00:00 | While there are more than a few advanced web
widgets and effects that use the Spry JavaScript
| | 00:06 | framework, there are thousands that use
jQuery, the most popular JavaScript framework.
| | 00:12 | Many WordPress widgets and plug-ins rely on
jQuery, and as you'll see in the chapter using
| | 00:17 | WordPress plug-ins, they are
drag and drop simple to use.
| | 00:21 | However, if you just want to include a little custom
jQuery code, you'll need to take a few extra steps.
| | 00:28 | To illustrate the process, let's draw a
little attention to our Newsletter Sign Up form by
| | 00:33 | making it fade in when the page first loads.
| | 00:36 | In a standard Dreamweaver page, the first
step for adding jQuery functionality is to
| | 00:41 | include the library, either from a self-hosted
file or a content delivery network, also known
| | 00:47 | as a CDM, but WordPress already includes jQuery.
| | 00:52 | It's actually used in the dashboard as well
as a good number of other framework scripts.
| | 00:58 | All you need to do is to invoke the desired
framework, or as they say in WordPress speak, enqueue.
| | 01:05 | Here's one way to do it.
| | 01:08 | Let's open up our header.php file from the
roux theme, and I'm going to put this code
| | 01:14 | right above the WordPress function wp_head.
| | 01:19 | This will go in its own PHP code block,
and we'll use the WordPress function enqueue.
| | 01:27 | Now I'm going to bring up code hint that
we set up with our site-specific code hinting
| | 01:32 | earlier so that I can make sure to spell
enqueue correctly, which is not the easiest word.
| | 01:38 | And here is what we want, enqueue_scripts.
So I'm going to go to the second one here.
| | 01:43 | So now before I put in jQuery in the center
of those parentheses, I want to be sure to
| | 01:47 | get rid of the trailing S here, because
really what I'm doing is just wp_enqueue_script.
| | 01:52 | So, now I'll add in my quotes and
put jquery, lowercase, in there.
| | 02:03 | So I'll save my header.php page.
Now that jQuery's all queued up, what's next?
| | 02:09 | Well, next we'll add in the specific jQuery
code for whatever functionality we want to set up.
| | 02:16 | The current best practice regarding
JavaScript is to insert your code just before the end
| | 02:20 | of the page, which in
WordPress means the footer page.
| | 02:25 | Now we don't want this little bit of jQuery
magic we're working with to run on every page
| | 02:30 | just those using the events template.
| | 02:33 | So let's create a custom footer for just
that page and put our jQuery code there.
| | 02:39 | I'll expand the Files panel and select my
footer.php page that's in the roux folder,
| | 02:47 | press Command+D to duplicate it and
then rename footer-copy as footer-events.
| | 02:58 | Once that's renamed, I'll open it up,
collapse the Files panel, let's go into Code view it
| | 03:05 | make it a little bit easier, and scroll
all the way down to the bottom of the page.
| | 03:10 | Now I'm going to put my script tag right
above the wp_footer rule, and this is a standard
| | 03:18 | script tag with a type of text/javascript,
and within it is the jQuery call.
| | 03:29 | Now the syntax for this is a little bit
different than your normal jQuery colon.
| | 03:34 | I'll point out what is different.
| | 03:35 | Typically, you start with a document.ready
function envelope, and this will be about
| | 03:42 | the same but just a slight tweak.
| | 03:45 | So instead of starting with document.ready, we
start with jQuery and then add the document.ready.
| | 03:52 | So it's (document).ready and they we'll open
a parentheses again, put in function and then
| | 04:04 | another open parenthesis.
| | 04:06 | Now typically, this parenthesis is left empty,
but to allow the code within WordPress to
| | 04:11 | recognize the dollar sign syntax that
we'll be using, we put it in a dollar sign.
| | 04:17 | So the two differences really are just adding
jQuery to the start of this line and putting
| | 04:22 | a dollar sign in your
parentheses following function. All right.
| | 04:26 | So let's go ahead and put our first opening curly
brace here, and let's put in the first of two lines.
| | 04:32 | We'll put in a dollar sign so that we
can identify our selector which is going to
| | 04:37 | be the fieldset tag and then encase that
in quotes and also parentheses and then .css
| | 04:45 | because we're going to change the CSS
property, and the CSS property we are going to change
| | 04:50 | is the display property.
| | 04:52 | So I'll put that in quotes as well,
followed by a comma and then the property we're
| | 04:57 | setting it to, which is none.
| | 04:59 | So basically what this is saying is when
the page first loads, hide the fieldset.
| | 05:05 | Now let's display it.
| | 05:07 | So I'm just going to copy that first selector
there, all the way up to and including the dot,
| | 05:12 | and then on the next line paste it in
and then we'll call a jQuery function, fadeIn,
| | 05:21 | and give it a value of 2000.
| | 05:22 | So that's 2 seconds and close it all out
with a semicolon, and then let's close
| | 05:29 | off our curly braces as well as the
parentheses and the final semicolon.
| | 05:38 | Okay, that's all good.
We'll save this page, footer_events.php.
| | 05:42 | Now we are ready to tie
footer_events.php to the events template.
| | 05:48 | So I'm going to go over to my events.php page,
scroll down to the bottom where we have get_footer
| | 05:55 | on line 84, and rather than have the generic
get_footer empty parentheses, let's add in
| | 06:03 | two single quotes and put in
our template name which is events.
| | 06:07 | Believe it or not, we
are done, it's that simple.
| | 06:12 | So I'll save the page, and let's run it
through its paces and see how it looks.
| | 06:17 | I'll go back over to Dreamweaver, go into
Design view, and let me scroll down just a
| | 06:23 | little bit so we see our
form. I'll hit Refresh.
| | 06:28 | And when the page loads, our Sign Up for
Newsletter is not there and then it fades in.
| | 06:32 | While it works in Dreamweaver, it's not
quite as smooth as it will appear in the browser.
| | 06:37 | So everything's working as expected.
| | 06:40 | Of course, this is just the bare minimum of
what you can do with jQuery in WordPress.
| | 06:45 | Keep in mind that if you want to work with
other jQuery libraries, like jQuery UI, you'll
| | 06:50 | need to enqueue that script as well.
| | Collapse this transcript |
|
|
9. Using WordPress PluginsUnderstanding WordPress plugins| 00:00 | Although WordPress is very powerful right
out of the box, there is a rich landscape
| | 00:05 | of plug-ins that extends
its capabilities tremendously.
| | 00:09 | A WordPress plug-in is very similar to a
Dreamweaver extension except you don't use the Extension
| | 00:14 | Manager as you do in
Dreamweaver, we use the Dashboard.
| | 00:18 | So let's switch over to WordPress and go to
the category on the left called Plugins.
| | 00:24 | Let's open that up so we can see all the
Plugins that are currently installed.
| | 00:29 | WordPress comes with two extensions or
Plugins preinstalled: Hello Dolly, which is just
| | 00:34 | kind of a fun thing that you can implement on
your own WordPress site if you like, and Akismet.
| | 00:40 | Now Akismet is a very powerful plug-in
that performs a totally necessary service.
| | 00:46 | A lot of times with blogs, you'll get
comments that include a ton of spam.
| | 00:50 | Akismet can greatly reduce that spam for you.
| | 00:54 | So let's activate Akismet. I'll click
Activate here, and I want to point out that once you
| | 00:59 | activate any plug-in the options change below
its name, now it says Deactivate & Edit Settings
| | 01:06 | instead of Activate.
| | 01:07 | You'll notice up here we have two messages,
one saying Plugin is activated, but we have
| | 01:12 | to enter here Akismet API key for it to work.
| | 01:15 | So let's click that link, and that will
take you to a new screen, that's just installed
| | 01:20 | with the Akismet activation, and
that allows us to enter an API key.
| | 01:26 | The Akismet API key is available for
anywhere from free to relatively low-cost.
| | 01:31 | Visit akismet.com/wordpress to get yours.
| | 01:36 | Now I already have an API key, so I'm going
to paste it in here, and I'm going to go ahead
| | 01:41 | and click my options here to Auto-delete spam that is
submitted on post more than a month old, that's good.
| | 01:48 | Showing the number of comments, I'm not so
keen on having that there, so I'm not going
| | 01:52 | to choose that option, and then I'll
click the Update options button.
| | 01:57 | I get a message indicating that the key
has been verified, and I want to point out as
| | 02:01 | we go, scroll down a little bit, that there's
some more information here about the Akismet servers.
| | 02:06 | There are four available, and
they're constantly updating these.
| | 02:10 | So let me point out also under the Plugins
section, there is now an Akismet Configuration,
| | 02:15 | which will take you to this page here.
| | 02:17 | Other plug-ins will put their own panels
under Settings or list them separately.
| | 02:21 | Now that's a nice free plug-in that I can
recommend you implement very, very quickly on your own
| | 02:27 | site or on your own client-site, but there
are also other plug-ins that you can add, and
| | 02:32 | the way that you get to them is by
going to the Add New option under Plugins.
| | 02:37 | As with the themes there are
numerous ways that you can search for it.
| | 02:41 | We're going to look for an Event Calendar.
| | 02:43 | So I'm just going to go ahead and enter a
Search for those two terms, event calendar.
| | 02:49 | Now I click Search Plugins. As you can see,
there's a good number of event calendars available.
| | 02:56 | Let's scroll down a little bit, and I'll show
you the one that I have used successfully before.
| | 02:59 | It's this one that just lists as Events
Calendar and the author is Luke Howell.
| | 03:04 | So let's go ahead and click Install Now.
| | 03:08 | I'll get a request for a
confirmation, I'll click OK.
| | 03:11 | WordPress quickly unpacks it and installs it,
and all you need to do is to activate it.
| | 03:16 | Now that the events calendar has been
activated, you see a listing for right here, as well
| | 03:21 | as some coding information, including
how to put it on your page very simply.
| | 03:25 | So if you want to put a large calendar on
the page, you put in this bit of code, that's
| | 03:30 | in square brackets, right here.
| | 03:33 | This is called a short code in WordPress Jargon.
| | 03:36 | So now that I have that selected, I'm going
to go ahead and copy it, and let's go over,
| | 03:41 | and we'll create a new page, and we'll call
this Events Calendar, and here in the body
| | 03:48 | I'm just going to paste in
that bit of short code I copied.
| | 03:51 | So in square brackets, it's events-calendar-large.
| | 03:56 | Let's use the Events Template
and then click Publish.
| | 04:01 | Once it's published, let's take a look at the page, and
here you can see the large calendar that's been added.
| | 04:07 | The calendar is showing the current month
when I'm recording this lesson, and the current
| | 04:11 | day has this light blue background here.
Now you can see it's very functional.
| | 04:16 | If I click on the month, it switches to the
next month, then I can go back and forth to
| | 04:22 | future and previous months.
| | 04:24 | And if there were any events, you would
see them listed right on the calendar.
| | 04:27 | So how do you add an event?
| | 04:29 | Well, in this case, let's go back to the
Dashboard, and I'll scroll down, and as you see, as I
| | 04:35 | mentioned before, some plug-ins add their own
listing and here's one for Events Calendar.
| | 04:41 | So we'll click on Events Calendar, and then
below the calendar itself is the Add Event screen.
| | 04:47 | Let's go ahead and put in an event, I'm going
to call this one Art Conference, and the Location
| | 04:52 | will be Roux Academy.
| | 04:53 | We'll leave the Link out blank for now, and
let's put in a short Description, call this
| | 05:00 | An excellent conference for
emerging and thriving artists.
| | 05:04 | Now let's set the Start Date, notice
the year format that you'd have to follow.
| | 05:10 | I'll put in a Date in upcoming October, and
we'll do a Start Time, let's start it at 9
| | 05:16 | in the morning, and we'll put in
an End Date the four days later.
| | 05:20 | And an End Time, now I want to enter in 6:30,
but because this is using the 24-hour clock,
| | 05:26 | we'll need to put in 18:30 instead, and
everything else we can leave as it is.
| | 05:31 | As you can see, we could, if we wanted to
create a separate Post for the Event, but
| | 05:35 | we don't have to do that.
And let's click Add Event.
| | 05:38 | And now you can see on the calendar within
the Dashboard, my conference is already listed.
| | 05:44 | Let's go ahead and take a
look at that on the page.
| | 05:46 | So I'll go to All Pages, and here's my
Events Calendar. Let's take a look at it.
| | 05:52 | So I'll scroll down, and let's go to
October, and there is the Art Conference.
| | 05:56 | If I hover over it, I get more of my description,
all the fields that I have entered, including
| | 06:00 | the Starting Date, Starting
Time, End Date, and End Time.
| | 06:04 | Obviously, you could put a lot more information
in here, and your clients can use this to update
| | 06:07 | their events very, very easily.
It's really a very powerful thing.
| | 06:12 | Without a doubt, the popularity and usefulness of
WordPress is greatly broadened by its extensibility via plug-ins.
| | Collapse this transcript |
| Styling plugin output| 00:00 | Like widgets, plug-ins output generic code
which needs to be customized with CSS to properly
| | 00:06 | integrate into a site.
| | 00:08 | Dreamweaver provides a perfect
vehicle for styling plug-in generated code.
| | 00:12 | In the understanding WordPress plug-ins lesson,
we added the Event Calendar plug-in and created
| | 00:17 | the calendar page which you see here.
Now it seems to work okay in the site.
| | 00:21 | But honestly, it doesn't really match perfectly.
| | 00:24 | I think the header bars that you see behind
each of the days really should blend in better
| | 00:29 | with the site, and I think if we use this color
found in the heading, and that would work well.
| | 00:34 | So to work on this page what I'm going to
do is pick up the URL from a browser, copy that,
| | 00:39 | and then head over to Dreamweaver, and
since were in Live view, I'll paste that
| | 00:44 | into the location bar and hit Enter or Return,
and now I have in Live view my Events Calendar.
| | 00:51 | I am going to go ahead and show all
file types, make sure we get everything.
| | 00:56 | So now that I've open the Filter wide open again,
let's go right down to just showing the CSS.
| | 01:02 | So first I'll knock out PHP, and then let's
knock out JavaScript, and here we see more
| | 01:10 | of what we are looking for, including
very important the event-calendar.css.
| | 01:15 | Now what I'm want to do is find a CSS rule or
rules that control this background color we see here.
| | 01:21 | Let me scroll down a
little bit so we see more of it.
| | 01:23 | So I'll go into Inspect mode
and then try to pinpoint it.
| | 01:28 | So as I go into the various areas here, if I
click down into this section, it looks like
| | 01:34 | I have my table there and table head and <tr> tag.
Let's expose more of the CSS styles panel,
| | 01:42 | so I can explore a little bit more fully.
Now there's the overall table calendar large.
| | 01:47 | But I need to go deeper into it.
So let me do Inspect one more time.
| | 01:51 | What I'm looking for something that
indicates what the actual header is here.
| | 01:57 | There is, as you can see, WP calendarLarge
and then there is a class of day header, and
| | 02:03 | that seems to have the background that I need,
so I'm going to click once to turn off Inspect
| | 02:08 | mode while that's highlighted.
| | 02:09 | And now let's scroll up, so I have my
Events Calendar listed there, and I can click on
| | 02:15 | the background color color-swatch that will
stop the hovering from going on, and I can
| | 02:20 | sample the blue of this H2 color here,
and that changes the background nicely.
| | 02:25 | Now the other thing I might want to change
is the current day selected here.
| | 02:30 | Here we still have a light blue, and let's see if we can
Inspect that and find out exactly where that is.
| | 02:35 | Now because this is added dynamically, often
the better course is to use Live Code to determine
| | 02:42 | how exactly it's being styled.
| | 02:44 | So I'm going to turn off Inspect
mode and switch over to Live Code.
| | 02:48 | So now when I go over, and I click on this
one particular area here, the 13th, I can
| | 02:54 | see right now at the very bottom of the
code there on line 94 the id of todayLarge.
| | 03:01 | Let's go, bring that up a little bit, and that is
in fact the id that I'll need to change the style.
| | 03:09 | So let's locate todayLarge
in the events-calendar.css.
| | 03:14 | Now rather than scrolling through everything,
trying to locate it, I'm just going to go
| | 03:18 | head and use Dreamweaver's Find capability,
and we're looking for todayLarge, just choose
| | 03:24 | Find Next, and there it is on line 82,
so I can now click Next to that selector.
| | 03:31 | So let's bring todayLarge up into focus a
bit more, and what I want to do is sample
| | 03:36 | the background of the search field.
| | 03:38 | So let's try and locate that on the page,
and this in Dreamweaver has temporarily pushed
| | 03:42 | everything down, that's okay,
that'll come back to normal.
| | 03:45 | But there is our keyword search, so when I
click back into todayLarge, that's now on
| | 03:51 | screen, so I can go to
background color and sample that field.
| | 03:54 | Now I'm a little worried that the contrast
is going be not good between the background
| | 03:58 | color and the color here, so let's change
that color value, and then I'm going to go
| | 04:03 | back up the page, click back into
todayLarge to recover that, and let's sample the dark
| | 04:09 | brown that we have here
in the navigation. Okay.
| | 04:13 | I think that will be a good combination.
| | 04:17 | The color that you see here will only
appear if there is an event at that day and time.
| | 04:21 | All right, let's head back to Design view
and just take a look at everything.
| | 04:26 | Well, there is our newly revised calendar,
and as you can see, it seems to fit a lot
| | 04:30 | better into the site.
Obviously, there's a lot more that you can do.
| | 04:34 | But this will give you a
good example of what's possible.
| | 04:37 | It's really very easy to modify even plug-in
style content so that it fits in perfectly
| | 04:42 | with your site with Dreamweaver's
Inspect and Live Code features.
| | Collapse this transcript |
|
|
10. Extending the User ExperienceCustomizing the Dashboard| 00:00 | While the WordPress administration implementation is
sophisticated and powerful, it's not carved in stone.
| | 00:06 | In this lesson, I will show you how to
remove unwanted features, add new content, and even
| | 00:12 | customize the login
screen with your client's brand.
| | 00:16 | Let's start by reducing
the clutter on the dashboard.
| | 00:20 | The Dashboard is comprised of a series of
widgets, some more informative than others,
| | 00:25 | and some more pertinent than
others for the standard client.
| | 00:29 | All of the widgets are divided in two areas,
the left, which is referred to as Normal by
| | 00:34 | the WordPress programmers, obviously, all south-paws,
and the right, which is known as the Side.
| | 00:41 | Now, to remove them, we will need to know
which is which, as well as their id names.
| | 00:46 | The ones I am targeting, WordPress Blog and
Other WordPress News, are both on the side.
| | 00:53 | Here is a list of the current dashboard
widgets and their positions, Normal or Side.
| | 00:59 | You will notice that WordPress Blog is known
as dashboard_primary, and it's on the side,
| | 01:06 | and Other News has an id of dashboard_secondary.
| | 01:09 | In this lesson, all the action
is in the theme's function file.
| | 01:13 | So let's head over to Dreamweaver and hone
in on the functions.php page that's within
| | 01:20 | the roux theme folder,
which is this middle one here.
| | 01:24 | So I am going to go ahead and go into Code view.
| | 01:26 | And as you can see, we just have a couple of
functions so far, and now let's go ahead and add one more.
| | 01:33 | To make life a bit simpler, I've
prepared a series of snippets for this lesson.
| | 01:38 | Let's go to File > Open and then navigate
to the Desktop, in our Exercise Files, open
| | 01:45 | up Chapter 10/10_01 and open
custom_dashboard_functions.php.
| | 01:53 | So this has three different snippets of code.
Let's look at the first one initially, which
| | 01:58 | will remove unwanted widgets from the dashboard.
| | 02:01 | So dashboard widgets are all stored in a
global variable called wp_meta_boxes, and that's
| | 02:09 | what that first line addresses.
| | 02:11 | Next, you see the unset function on line 4
and 5 here, and this will remove anything
| | 02:19 | that's already there, and it's removing from
the wp_meta_boxes on the dashboard side elements,
| | 02:26 | not normal ones, but side, that are part of
the core and then their id, dashboard_primary
| | 02:32 | and dashboard_secondary.
| | 02:33 | Now, after the function ends, there is an
add_action which calls that function. All right.
| | 02:39 | So copy this little bit of code, move over
to our functions page, and I am going to put
| | 02:45 | it at the end, right after
my two existing functions.
| | 02:48 | I like to keep my functions separated
by individual lines wherever I can.
| | 02:53 | So once that's pasted in,
let's go ahead and save it.
| | 02:57 | Now, let's head back to the dashboard and
keep an eye on WordPress Blog and Other WordPress
| | 03:02 | News here, after I click Refresh.
And now you see that they are no longer there.
| | 03:09 | So that's how you remove something from
the dashboard, but how do you add something?
| | 03:13 | Let's add a small help widget with some
helpful info to illustrate the process.
| | 03:18 | Let's switch back to Dreamweaver and my
little snippet file here, and I will scroll down
| | 03:24 | so we can concentrate on the second bit of code
where it sets up a function called contact_help,
| | 03:30 | and this is the text that
will appear in my little widget.
| | 03:34 | Notice that it has an echo statement,
that's a PHP function for printing something out,
| | 03:40 | and I have just some basic text in quotes here.
| | 03:43 | The next function register_widget actually
adds the dashboard widget as the function
| | 03:47 | wp_add_dashboard_widget says.
| | 03:50 | And the first argument you see there,
contact help widget is the widget id, Need help?
| | 03:56 | Is the title and contact_help
is the function name.
| | 03:59 | Finally, there is the add_action to hook in these
functions into the existing WordPress installation.
| | 04:06 | It's going to hook into the dashboard_setup, and the
function that will be hooked in is register_widgets.
| | 04:13 | Okay, let's copy this, and again, paste
it at the bottom of our function file.
| | 04:19 | I will save the page, and let's head back to
Dashboard and do another Refresh, and we'll
| | 04:27 | scroll down, and there is our Need help?
option right there on the left at the bottom,
| | 04:33 | unobtrusive, but available.
| | 04:35 | Finally, let's add a little
branding to our WordPress installation.
| | 04:41 | The very first encounter that your clients
and their workers will have with the WordPress
| | 04:45 | application is the login screen.
| | 04:47 | I am going to log out, so we
can take a quick look at it.
| | 04:50 | So if I go up to where it says Howdy, admin
and then choose Log Out, that will bring me
| | 04:56 | back to the default WordPress login screen.
| | 04:58 | Now, as you can see, WordPress is front in
center, but Roux Academy is nowhere to be seen.
| | 05:04 | Let's go back to Dreamweaver
and remedy that situation.
| | 05:07 | First, I am going to need to copy an
image that I created for the login screen.
| | 05:12 | We'll find that also in the Chapter 10/10_01
folder, and I will use Finder to go get it.
| | 05:18 | You want to pick up ralogo_admin.png, and
we're going to put it in the htdocs/roux_academy/
| | 05:28 | blog folder, drill down to wp-content/themes/roux/_images.
| | 05:35 | Paste that right in, and you will see it there.
| | 05:38 | Okay, let's close that window, and now we'll
go back to Dreamweaver and get the code from
| | 05:44 | my snippet file for this final operation.
| | 05:48 | Here, we have a function called custom_login_logo,
and it echoes out a bit of HTML that will
| | 05:55 | replace the existing h1 anchor tag which
utilizes the WordPress background image, and we'll
| | 06:02 | change that so that we have our own background image,
as you can see, here in _images/ralogo_admin.png.
| | 06:10 | I am going to go ahead and set !important
to make sure that it takes precedence.
| | 06:14 | We'll add_action, we'll hook in this
function to the login_head function.
| | 06:19 | So, let's copy that, and in our
functions.php page, paste it right in.
| | 06:26 | I will save the page, go back
to our browser and click Refresh.
| | 06:32 | Now the logo has been replaced with a Roux
Academy specific logo and the clients will
| | 06:37 | be assured that they're in the right
place when they first come to log in.
| | 06:41 | This lesson is really just the start of
what's possible in customizing the dashboard.
| | 06:46 | In other lessons in this chapter, you will see how
to add new functionality, as well as interactivity.
| | Collapse this transcript |
| Working with WordPress functions| 00:00 | The initial lesson in this chapter
demonstrated how you could customize the dashboard.
| | 00:04 | In this lesson we'll extend the administrative
customization by adding an additional sidebar
| | 00:10 | widget area which will be used for
inserting an advertisement, one that the client can
| | 00:15 | manage without designer intervention.
| | 00:18 | Customizations like these empower the client,
while simultaneously freeing up the designer.
| | 00:24 | Now because we are going to be modifying the
sidebar code, we'll need to copy sidebar.php
| | 00:30 | from the parent theme folder
into the child theme folder.
| | 00:34 | So I am going to expand my Files panel and
then scroll up just a little bit expand custom,
| | 00:40 | select sidebar.php and copy it, close
up custom, select roux, and paste that in.
| | 00:47 | I'll Collapse my file.
| | 00:49 | Now I am going to need to close down index.php
and reopen it in order for it to recognize
| | 00:54 | the new sidebar.php file.
| | 00:59 | So I'll locate that in my blog site here,
here is index.php, and let's discover the
| | 01:05 | dynamic files, and then set it into Live view
and use the Custom Filter to hone in on just
| | 01:13 | the files we want work with, which in this case are
style.css, sidebar.php, and functions.php, click OK.
| | 01:24 | And the next up is to transfer some assets from the
exercise file into the images folder for our child theme.
| | 01:32 | So I am going to finder, so I'm already
pointing to folder 10_02 which is within the Chapter 10
| | 01:39 | exercise files, and I want to pick up ad_box.gif,
which as you can see, is just kind of a placeholder
| | 01:45 | and then also sharp_ad.png, which is
an ad that we are actually going to use.
| | 01:51 | So I'll select both of those and copy the files,
and now let's head over to htdocs/roux_academy,
| | 01:58 | and as we've done before drill down into
blog/wp_content/themes/roux and then _images.
| | 02:06 | And once we're there, Command+V
will paste in those images.
| | 02:10 | Now we are ready to bring the code for the
new sidebar widget into the sidebar.php file.
| | 02:14 | To save time, I have stored both the HTML/PHP code
as well as the associated CSS in the exercise files.
| | 02:25 | So from Dreamweaver, let's go to File > Open
and then navigate to our Desktop/Exercise Files folder,
| | 02:30 | open up Chapter 10/10_02, and we want
to get the advert_widget_code.php file.
| | 02:38 | So let's go into Code view, and this first
group of code that you see up here starting
| | 02:45 | with the div acts as a
placeholder for our widget functionality.
| | 02:50 | The initial div tag as an in-line style
which sets the background to transparent and uses
| | 02:57 | a specific image that ad_box.gif as a placeholder.
| | 03:02 | Now within that div wrapper is a PHP if
function that checks to see if the dynamic_sidebar
| | 03:10 | function exists, and if there is also a dynamic_sidebar
named home_ad_1; otherwise, it puts in another bit of code.
| | 03:18 | So let's grab that code block, and we'll head
over to sidebar.php, let's go into Code view
| | 03:26 | here, and I want to put my new sidebar_widget
below the existing sidebar widget area, and
| | 03:33 | I want to put my new sidebar widget below
the existing one, so I'm going to put it right
| | 03:38 | before the closing div here, and that should
make the advertisement fall right below all
| | 03:43 | of the other widgets, no
matter how many are defined.
| | 03:46 | Our advertisement is going to needs some styling,
so let's go grab that bit of CSS that I have
| | 03:51 | in the advert code widget, and as you can
see, this just targets the class advert and
| | 03:57 | sets up a specific width and height
as well as some padding and margin.
| | 04:01 | So I am going to copy that and go over to our
roux stylesheet, which is the first one listed here.
| | 04:08 | We'll go down right in front of the phone
declarations that we've been working on and paste that in.
| | 04:15 | Okay, two of the constituent parts are in place.
Time to bring in the real engine, the function code.
| | 04:21 | Again, I've put the necessary code in an exercise file.
| | 04:25 | So I'll go to File > Open, and we'll head
on over to our Exercise Files/Chapter 10/10_02
| | 04:33 | and choose the widget_function_code.php file.
| | 04:38 | Now this is the code for registering a new
sidebar, and it specifies the Home Ad Space 1,
| | 04:44 | so let me go ahead and copy this and back
to index.php, and we'll go to our roux functions
| | 04:53 | file, and I am going to put it pretty much
right at the top but within my PHP code block.
| | 04:58 | So I'll make a little
room and paste it right in.
| | 05:01 | As you can see, working with functions is more than
just adding a code snippet to the functions.php page.
| | 05:07 | Now let's save all the related files by
going to File > Save All Related Files and then
| | 05:13 | we go into Design view,
and I'll Refresh the page.
| | 05:16 | And once that's down, let me scroll down, and
there below the last widget, which is Categories,
| | 05:22 | you see a placeholder for an advertisement.
| | 05:25 | Now if you squint really hard, you can see
the word Advertisement written in very small
| | 05:30 | type at the top there.
| | 05:33 | Okay, time to move to the WordPress side of
the workflow where we'll see our new widget
| | 05:38 | area and put it to use.
| | 05:40 | So now I am going to go to Appearance > Widgets,
and where there was just Sidebar Widgets before--
| | 05:46 | and let me expand that so you see the ones
that we have in place--there is now a new
| | 05:50 | Home Ad Space 1 widget.
| | 05:52 | I could drag any of the existing widgets into
my ad area, but none of them do exactly what
| | 05:58 | I want, which is to insert an image.
| | 06:00 | Luckily there's one that does,
and it's very easy to set up and use.
| | 06:05 | Let's go get it by going to Plugins >
Add New and search for image widget.
| | 06:12 | The one at the very top of the
list is what we are looking for.
| | 06:16 | So let's click Install Now, click OK to confirm, and
after WordPress has installed it, activate the plug-in.
| | 06:24 | Now when we head back to Appearance Widgets,
I have an image widget here, and I can go
| | 06:30 | on drag it and drop it
right into my Home Ad Space.
| | 06:35 | The parameters will open up here, and we
want to leave the Title blank, add a new image,
| | 06:41 | and I am going to select the files from my
computer, and we can get this from either place.
| | 06:47 | I am going to ahead and just get it from my
htdocs/_images folder where I copied in the
| | 06:54 | sharp_ad.png file, click Open, and there it is.
| | 06:59 | Now we'll scroll down, leave everything
else as is, and click Insert Into Widget.
| | 07:04 | Now one little gotcha, this widget tends
to add the file name as the default Title.
| | 07:10 | You want to remove that because we don't
need to have a Title for an advertisement.
| | 07:15 | There is lots of other features here, we could
put in a Caption, again probably not necessary.
| | 07:20 | You could link to the advertiser, an excellent
idea, and you probably want to open that into
| | 07:26 | a new window when you do.
| | 07:27 | You can see the specific Width and Height
that's given and the Alignment should be at center.
| | 07:33 | Let's sharpen up the Alternate Text, no pun
intended, just happens sometimes, so I'll make
| | 07:39 | this Sharp Art Supplies.
| | 07:41 | All right, now let's click Save, and
let's see how that new ad is looking.
| | 07:47 | So I'll go back and visit the site, click Refresh
and scroll down, and there is our advertisement.
| | 07:54 | Now that we have our single ad system in
place which gives total control to the client, we
| | 07:59 | are ready to take it to the next level and allow the
client to interactively add multiple advertisements.
| | Collapse this transcript |
| Including administration interactivity| 00:00 | Increasingly, I found clients are asking
for more and more control over their website.
| | 00:05 | WordPress gives you the power to expose that control
right in its administrative interface of the dashboard.
| | 00:12 | In this lesson, we'll take the sidebar
advertisement that was introduced in the previous lesson
| | 00:17 | and extend it so that the client can decide
how many ads to show, or whether not to show
| | 00:23 | any ads at all, right from a
Custom option in the dashboard.
| | 00:26 | To build a custom interface, we are going
to be working in Dreamweaver with two of our
| | 00:31 | roux theme pages, sidebar.php, and functions.php.
| | 00:36 | So I have used a Custom filter to restrict
our dynamically related files to those pages
| | 00:41 | as well as the style.css files.
| | 00:44 | Let's start in sidebar.php, and I'll go
into Code, so we have a maximum view here.
| | 00:50 | First we are going to put in a PHP code
block that will get the options for this specific
| | 00:54 | interactive operation, and we are going to put
this code block right in front of our new ad space.
| | 01:00 | So as I said, this is the PHP code block
that sets the variable $options= the function
| | 01:08 | get_option(); of course, and the option
that we are going to be getting in single quotes
| | 01:16 | is named ('plug-in_options').
| | 01:20 | WordPress stores a full table of options,
everything from the site name to how many posts to show.
| | 01:26 | With this code we are getting some Custom
options that we'll create a little later.
| | 01:30 | Next, I am going to add a conditional
wrapper around my ad code so that it will be shown
| | 01:36 | if the Select menu that we're inserting into
the dashboard shows one or higher; if it shows 0,
| | 01:43 | the ad won't be displayed.
| | 01:45 | Let's scroll down a little bit and then
after the Options code block, we'll add another.
| | 01:51 | And this one is
if ($options square bracket'home_page_ads' square bracket >= 1),
| | 02:05 | then finally close the parentheses
and leave an open curly brace.
| | 02:09 | If that's all true, then all of this that we
have here, starting with the <div id="home_ad_1"
| | 02:15 | and ending with the closing
of that div will take place.
| | 02:19 | Now let's add the closing part of that
wrapper after the ad code, and all we need here is
| | 02:23 | just a closing curly brace.
| | 02:26 | Now that I have this solid foundation for
a conditional ad, I can copy and paste it
| | 02:32 | as many times as I need to, and this
fictional scenario. The client has requested that she
| | 02:37 | will be able to display up to three ads.
| | 02:40 | So I am going to copy my ad Code
block along with a conditional wrapper.
| | 02:45 | Now that that's selected, let's copy it,
and I am just going to add an additional line
| | 02:48 | down below here and paste it in, first one
time, and we will change three different values
| | 02:54 | to make it a unique ad.
| | 02:56 | So the first one we will change is the
condition itself, and if the options show two or more,
| | 03:02 | we will be able to show this ad.
| | 03:04 | Now we want to change the id from home_ad_1
to home_ad_2, and we also want to change
| | 03:09 | the dynamic_sidebar from
home_ad_1 to home_ad_2.
| | 03:13 | Okay, so you see how this works.
| | 03:15 | Let's go ahead and copy 2 this time and
then paste it in and make another change, so we
| | 03:22 | will change the options from 2 to 3, the id
from home_ad_2 to the home_ad_3, and then
| | 03:28 | finally, the dynamic_sidebar
from home_ad_2 to home_ad_3.
| | 03:31 | All right, so our work in sidebar.php is
actually done, so I am going to Save the page, and
| | 03:38 | let's move onto functions.php, making sure that
we are working in the roux functions.php file.
| | 03:45 | Now the first bit of work is going to parallel
what we just did in the sidebar. Every potential
| | 03:51 | ad widget we put in the sidebar--and we
had three--will need to be registered.
| | 03:56 | And they'll be registered only if the client
wants the advertisement there and has selected
| | 04:02 | the appropriate option.
| | 04:03 | So right after if function exists, we are
going to put in our options variable and set
| | 04:11 | that =get_option function with the argument
('plug-in_options') closing off the quotes
| | 04:19 | and parentheses as needed.
| | 04:21 | Add a semicolon at the end,
and we are ready to move on.
| | 04:24 | Now we are going to wrap our
sidebar_registration with the same PHP if block.
| | 04:29 | So if ($options and then the options we
are interested in are the home_page_ads are >= 1,
| | 04:41 | and we will insert an opening curly brace
to indicate where we start to do
| | 04:45 | our objects, and now after the double parentheses,
semicolon, we put in the closing curly brace.
| | 04:53 | So if the options are pointing to one or
more, we will register this as sidebar.
| | 04:58 | Now we'll do the same copy paste routine as
we did on the sidebar of duping the Code block
| | 05:03 | twice more and changing the pertinent values.
So let's grab all of that code there.
| | 05:09 | I am just going to create a little bit extra line
here to separate these, so it makes it easier to read.
| | 05:14 | Again, we'll need to change three places, first
the if options, we'll change that from 1 to 2.
| | 05:22 | Now we are going to change the name, also
from 1 to 2, and the id from home_ad_1 to
| | 05:27 | home_ad_2, pretty simple, eh?
So let's move on and do the next one.
| | 05:31 | I'll copy what I just inserted, add another line, and
paste my second one in and then change to the 2s to 3.
| | 05:43 | Now let me save my functions.php file
before we move on. All of our foundation work is
| | 05:50 | now done, and it's time to add the code that
we'll create and insert the new Admin setting page.
| | 05:56 | It will take a fair amount of sophisticated
code to pull this off, but I have stored it
| | 06:01 | all as an exercise file page.
| | 06:03 | Let's open it up, so I can
explain how it all works.
| | 06:06 | You'll find that there are five major Code
blocks, so I am going to File > Open, navigate
| | 06:12 | to the Desktop where our exercise files
are, and open up Chapter 10/10_03, where you'll
| | 06:19 | find the file custom_settings.php.
| | 06:23 | Now we are going to eventually insert all
of this code, so I am going to walk through
| | 06:27 | the code on this page, and then we
will copy and paste the whole thing over.
| | 06:31 | First, there is the function that creates
the theme Options page, and this inserts a
| | 06:37 | menu item into the Admin
menu called Advertisements.
| | 06:42 | You can see the title that's here as the
second argument for add_options_page and the final
| | 06:47 | options is the next function
that is called build_options_page.
| | 06:50 | Let me scroll down a little
bit here, so you see it all.
| | 06:53 | This will create the actual page
that is presented in the Dashboard.
| | 06:58 | You can see we're working with standard
HTML here. There is a larger div with an id of
| | 07:04 | theme-options-wrap, that's a standard
WordPress id, and then within that there is a method
| | 07:10 | div with a class of icon32
and an id of an icon-tools.
| | 07:15 | Now what this will do is present as Standard
WordPress icon on that page so that our page
| | 07:21 | fits in with the rest of
the Administrative Dashboard.
| | 07:24 | After that we have regular HTML that sets
up a title, Advertisements, puts in a little
| | 07:30 | bit of descriptive text as to what you should do,
| | 07:32 | set the number of ads in the sidebar and a form,
and within that form are some specific PHP
| | 07:39 | code blocks that will bring in the
setting fields that we are about to define.
| | 07:44 | These setting fields will be a label and a
select menu. After that is the Submit button
| | 07:50 | that you see here, and as you can see, the
value is another PHP code block that gives
| | 07:54 | the title for the button Save Changes, all
very familiar interface elements in WordPress.
| | 08:00 | Let's move on to the next code block which
has the responsibility of initializing different
| | 08:05 | sections of the page, including the form
elements. Following that are two small functions that
| | 08:11 | validate the setting and set up
the section for any check boxes.
| | 08:15 | We'll notice there is no functionality
here, because we're not using check boxes.
| | 08:19 | You do need to include this,
however, to make the form work properly.
| | 08:23 | The final function sets up the select menu
specifically, and here you can see on line
| | 08:28 | 43 is an array, and these are the actual values
that will be displayed in the select element,
| | 08:34 | starting with 0 and going up to 3.
| | 08:36 | In the next line, line 44, writes in the HTML
code for the select list, then there's a loop
| | 08:43 | that will go through each of the items that
are in the array and determine whether they
| | 08:47 | are selected or not, and that's all there is.
| | 08:50 | So I'm going to go ahead and do a Command+A to
select everything and then Command+C to copy it.
| | 08:57 | Now let's go over to our index.php file, and
I am going to scroll to the top of the page
| | 09:03 | and paste it in there as a
separate code block. Okay.
| | 09:07 | Let's save this page and head over
to the Dashboard to see how it works.
| | 09:12 | Back at the Dashboard, all you need to do
is Refresh the page. Once it's refreshed,
| | 09:17 | let's look under Settings, and now you see a
new entry all the way at the bottom called
| | 09:21 | Advertisements, click that, and there's our
Advertisements page with the Tool icon I was
| | 09:28 | referring to earlier, a little bit of
descriptive text, here is the label for the field,
| | 09:33 | Page Ads, however many do you want.
So the default setting is 0.
| | 09:37 | Let's go to our site and see
if there are any ads or not.
| | 09:41 | So I'll click on that, Refresh the page,
and then scroll down, no Advertisements.
| | 09:47 | All right, let's head back, now let's add
our first advertisement and Save the Changes.
| | 09:53 | Let's check out the site, and there is
the Advertisement that we had put in before.
| | 09:58 | Let's try one more time. This time let's go
up to three advertisements, Save the Changes,
| | 10:04 | and visit our site, and there is our Sharp
Art Supplies and two placeholder advertisements.
| | 10:10 | Now let's go to the Dashboard, into our
Widgets area, and here you see the additional two
| | 10:19 | widgets available to the client.
| | 10:21 | Now the client at this point could expand
Home Ad Space 2, drag them Image Widget, and
| | 10:27 | choose another advertisement for that
particular space, and the ads will be good to go.
| | 10:33 | This lesson demonstrates the flexibility of
extending and customizing the WordPress Dashboard.
| | 10:38 | You know that saying, your
only limit is your imagination?
| | 10:41 | Well, it pretty much is
with Dreamweaver and WordPress.
| | Collapse this transcript |
|
|
11. Integrating WordPress Database Content into Dreamweaver PagesSetting up the data in WordPress| 00:00 | The WordPress Content Editor is one of the
hallmarks of the entire Content Management System.
| | 00:05 | While it's great for adding content to blogs,
did you know that you could also include the
| | 00:10 | material entered through the editor into your own
Dreamweaver designed and maintained dynamic pages?
| | 00:17 | One way to do this is by using specific
WordPress categories and the private visibility setting.
| | 00:24 | Let me show you how this is done.
| | 00:26 | Let's switch to the dashboard. We'll start by adding
a new post, which I'm going to call Student Exhibit.
| | 00:33 | Let me put in some sample text.
| | 00:35 | Now I also want to put in a few bullet
points and then one last closing line.
| | 00:43 | For now I want to do a couple of things,
one of which we haven't done before with post.
| | 00:48 | First, over here under the Publish category,
you'll see that there's a visibility option
| | 00:53 | that's set to Public by default.
| | 00:56 | Let me click on Edit to expose the
options, and we'll choose Private.
| | 01:00 | By changing the visibility from Public to Private, it
insures that only the administrator can see the post.
| | 01:06 | So I'll click OK.
| | 01:08 | Next, I want to put this in a new category,
and WordPress actually makes this very easy
| | 01:13 | even directly from adding new posts.
| | 01:16 | So if I scroll down a little bit, you
can see the Add New Category option here.
| | 01:20 | I'll click that and another series of options opens up.
| | 01:24 | Here I can put in my new category name,
and that's going to be Exhibits, I don't need
| | 01:28 | a Parent Category for this, so I can
just go ahead and Add New Category.
| | 01:32 | WordPress not only adds it,
but it selects it as well.
| | 01:34 | So let me click Update and view posts. Because
we're logged in as administrator, we can see it.
| | 01:40 | Now notice if I hover over the category of
links that we see here, down in the lower
| | 01:45 | left of the browser, you see a URL ending in
cat=10. Cat is short for category,
| | 01:51 | and 10 is the id for my new category Exhibits.
| | 01:55 | It's very likely that your category number
may be different. I've created some additional
| | 02:00 | categories and removed some in development
of the course, and WordPress assigns these
| | 02:04 | category numbers sequentially.
| | 02:06 | But whatever the number is, make a note of it,
because we'll be using that value in the
| | 02:10 | next lesson when we bring this data
into a standard Dreamweaver dynamic page.
| | Collapse this transcript |
| Adding dynamic data from WordPress to your web pages| 00:00 | Time to bring the data from
WordPress right into Dreamweaver.
| | 00:03 | In this lesson, we'll show you how to make
a database connection, create a record set
| | 00:08 | and then add the data from that
record set to your Dreamweaver page.
| | 00:12 | So in Dreamweaver, let's open up a
previously created file to hold our dynamic data.
| | 00:17 | Now this is just a standard PHP page.
It's not hooked into WordPress at all.
| | 00:22 | I am going to go to File > Open and then
navigate to my Desktop > Exercise Files, go down to
| | 00:27 | Chapter 11, and open up 11_02. I'll
open that up, and it'll come in unstyled.
| | 00:32 | So the very first thing we are going
to do is save it to the local Site Root.
| | 00:37 | So choose File > Save As and then on the
Save As dialog box, click Site Root and Save.
| | 00:46 | Now you do not want to update the links
because this is coming in with all the links intact,
| | 00:51 | so click No, and there is our basic
page we styled with a Exhibits header.
| | 00:56 | Let me go into Live view, so you can see
the full page, and it conforms to the rest of
| | 01:00 | the site, not to our blog_comp.
| | 01:03 | Now the next step is to create a connection
to the MySQL database used by WordPress.
| | 01:09 | Now I'm going to need to open up my
Database panel, but I need to drop out of Live view
| | 01:13 | temporarily for that to happen.
| | 01:15 | We'll click on Live view and then go to Window >
Databases, and that will open up the Database
| | 01:21 | panel which also has Bindings
and Server Behaviors as well.
| | 01:24 | We want to add a new MySQL connection.
| | 01:27 | So, click on the plus sign
and choose MySQL Connection.
| | 01:31 | Now let's give our connection a name.
| | 01:33 | I like starting with C-O-N-N, conn, and I
am going to call this connExhibits.
| | 01:37 | MySQL server is localhost, my User
name is Root, my Password is also root.
| | 01:44 | Now that we've entered the first
four fields, we can click Select.
| | 01:47 | If you try to click Select before
then, you won't see any databases.
| | 01:51 | So click Select, and there is the databases
that have been set up on my localhost.
| | 01:56 | Here is roux_blog, that's the one
we want, so we'll click OK.
| | 01:59 | Now, it's always a good idea to test to make sure that
it connects all right, and everything looks beautiful.
| | 02:04 | So let's click OK once and then
again to make that connection.
| | 02:09 | Now what Dreamweaver is actually doing is
in the Site Root, it creates a folder called
| | 02:13 | Connections and then puts a PHP page with
your Connection name as the file name, so
| | 02:19 | here we see connExhibits.php.
| | 02:23 | Now we are ready to go to the Bindings tab.
| | 02:25 | So I am going to collapse files and then click
on my Bindings here, and here you can see that
| | 02:30 | we have three out of the four steps
already established, and we are going to complete
| | 02:35 | that forth step by adding a record set, but
that record set is going to employ a fairly
| | 02:40 | complex bit of SQL.
| | 02:42 | So to save a little time, I have
gone ahead and created that for you.
| | 02:46 | I am going to open up that
file from the exercise files again.
| | 02:49 | So go over to File > Open, and let's head
back to our Desktop > Exercise Files in Chapter 11,
| | 02:56 | again 11_02, and this
time open up recordset.sql.
| | 02:59 | So you may look at this, and if you're not
that familiar with SQL and think of it as
| | 03:04 | a very complex SQL statement, it's
actually relatively straightforward.
| | 03:09 | Let me walk through it a little
bit so you understand it better.
| | 03:12 | But basically, what we are doing here is
selecting a set of records, hence the name recordset.
| | 03:18 | So we want the recordset to be distinct so
that there are no duplicates, and that's the
| | 03:22 | keyword distinct here, and we are going to bring
in the WordPress post title as well as the content.
| | 03:29 | So just those two items, the title and the
content, and we're bringing those in from
| | 03:34 | a table called wp_posts which is pretty much self-
explanatory, and then also the wp_term_relationships
| | 03:40 | table is being used.
| | 03:43 | Now that's the table that monitors the categories among
other things and its relationship to the various posts.
| | 03:49 | So after that connection is made here in
the WHERE statement, we want to make sure that
| | 03:55 | we are filtering on a field called post_status
listed here, and that is set to private and
| | 04:01 | then also another field in the wp_term_relationships
table called term_taxonomy_id, and that's
| | 04:09 | going to be set to a specific value.
| | 04:11 | Now just because I use this SQL statement
a lot, I have this set up with a couple of
| | 04:16 | question marks, but we want to replace
those question marks with a certain value,
| | 04:20 | and what is that value?
| | 04:21 | Well, it's going to be the category number that we
saw earlier, which as you might recall for me is 10.
| | 04:27 | The order of the records that is returned,
which is the next and final line on the SQL
| | 04:32 | statement, is set to showing the newest one
first or in other words the dates descend.
| | 04:38 | So I am going to select the SQL statement,
copy it, and head back to my exhibits.php file
| | 04:44 | where we are ready to create the recordset.
| | 04:46 | So I'm in the Bindings panel, I'll choose the
plus sign, and then select Recordset (Query).
| | 04:51 | Now what you see on the screen here is what's
known as the simple version of the Recordset.
| | 04:57 | There are two different views.
We want to switch to the Advanced view.
| | 05:01 | Now if you have done some database work before,
and you have established another recordset
| | 05:06 | where you did use Advanced view,
that will come up automatically.
| | 05:08 | So, I am going to call this rsExhibits.
| | 05:10 | And I want to make sure that my connection
is set to connExhibits, and since that's our
| | 05:16 | only connection, that's what's going to happen.
| | 05:18 | Now after I press Tab, it goes to the SQL
field, and I can delete what's selected and
| | 05:24 | paste in with a Command+V, MySQL statement.
| | 05:27 | Now let's go ahead and test this
by clicking the Test button here.
| | 05:31 | And here you see the one record that we have,
Student Exhibit, and a little bit of content there.
| | 05:36 | That's good. So click OK once and then one
more time to close the Recordset. All right.
| | 05:42 | We are actually ready to
bring the content onto the page.
| | 05:45 | So I am going to put my cursor where I want
it to appear, and you have to do this in Design view,
| | 05:48 | you can't do it in Live view, and I am
just going to put it right after the paragraph,
| | 05:52 | and I am going to expand my Recordset that
you see here--let me bring the Field name
| | 05:58 | over a little bit so you
can see all the information--
| | 06:01 | and here you see the two fields that we
brought in, post_title and post_content.
| | 06:05 | We are going to insert post_title first.
| | 06:08 | So you can drag and drop it onto the screen,
or if you've already positioned your cursor
| | 06:13 | as I have where you wanted to go, you can
select what you want and then click Insert.
| | 06:18 | Now, that will come in as a standard paragraph,
as you can see down here in the Tag Selector
| | 06:23 | at the bottom of the screen.
| | 06:24 | Let me open up my Property Inspector, and I
am going to change that Format to an h2 tag.
| | 06:30 | After that, I'll hit Return so after
the title we'll put in the content.
| | 06:33 | Now, this time I am just going to go ahead and
drag that content in to show you the alternative
| | 06:37 | way that you can work with this, and each time
I do, you see that it lists in curly braces,
| | 06:43 | and it slightly highlighted the Recordset name
rsExhibits and then dot and whatever the field name is.
| | 06:49 | Okay, so there is our two bits of content.
| | 06:52 | Let's save the page, and now I am going to
go into Live view, and Live view works not
| | 06:57 | only for CSS and PHP, but
it also works for MySQL.
| | 07:02 | So we can see that brings in the dynamic
content, and we do have a little bit of work to do
| | 07:07 | here, but that's good because it shows that up.
| | 07:09 | So I am going to go ahead and
create a new CSS rule in main.css.
| | 07:14 | Let's go down a little bit here, and I'll
put it towards the bottom, right above the
| | 07:18 | @media statement for my phone.
| | 07:20 | So this will be one for mainContent and an
unordered list, and that will handle any unordered
| | 07:26 | lists that are encountered here.
| | 07:28 | I am just going to set the margin, 0 at the top,
0 on the right, do 15 pixels on the bottom,
| | 07:36 | and 20 pixels on the left.
| | 07:38 | So I'll save that and then head back
to Design view, and it's much better.
| | 07:41 | But at the moment, this dynamic
page would only show one event.
| | 07:45 | So if I toggle off Live view, you can see
that I just have these two bits of code here,
| | 07:51 | moreover, the event that it would
always show would be the most current.
| | 07:54 | Now that might work in some situations,
that might be in fact exactly what you want to
| | 07:58 | do, but let's say we
want it to show multiple events.
| | 08:02 | So what do we have to do?
| | 08:03 | Well, what we need to do is wrap whatever
it is we want to repeat in what's known as
| | 08:08 | a Repeat Region server behavior.
| | 08:11 | So I am going to add one more bit of content,
and that's a horizontal rule here, and I'll
| | 08:16 | put that right after my content so that we
have a little bit of separation between the two.
| | 08:22 | I am just going to go right to the
Source Code and put my cursor there.
| | 08:26 | So instead of a paragraph tag here,
I'll make this an hr tag, okay.
| | 08:31 | So, we'll save that and then head back to Design view,
and you can see my new horizontal rule there.
| | 08:37 | So now we are ready to add a
Dreamweaver server behavior.
| | 08:40 | I am actually going to go back into the
Split view as I found it's actually easier a lot
| | 08:44 | of times to select exactly
the content that you want.
| | 08:48 | And in this case, what I want are these
three code lines here, the h2 which has the PHP
| | 08:54 | code for showing the title, the paragraph tag
which has the PHP code for showing post_content,
| | 09:00 | and then my horizontal rule.
| | 09:02 | With that selected, let's go over to our
Server Behaviors panel where you can see certain
| | 09:07 | Server Behaviors have already been added.
There is our Recordset, and these are the two
| | 09:10 | items that we inserted into the text.
| | 09:13 | So, I'll click the Add button and choose
the second option which is Repeat Region.
| | 09:18 | Now when it comes up, you'll show a list of
your recordsets. If we had more than one defined,
| | 09:23 | it would be available to us from the
list here, but we only have rsExhibits.
| | 09:27 | So that's pre-selected for us.
| | 09:29 | And there is two options. You can choose to
show a finite number of records at a time,
| | 09:32 | and it's definable, it can be 10 as the
default setting is or 5 or 3, or if you want to show
| | 09:39 | all the records as we do,
you can choose All Records.
| | 09:42 | So then click OK and Dreamweaver will add in
the necessary code, it's a PHP do-while loop.
| | 09:48 | And let's go back to Design view now, and
we'll turn on Live view, click Save and right
| | 09:53 | now what you'll see is basic code, so we
still have just one bit of content here, so you're
| | 09:59 | only going to see one record.
| | 10:01 | Let's go back to WordPress, and I'm going
to add a new post that I'll call Spotlight
| | 10:06 | Exhibit, and we have
some sample content as well.
| | 10:09 | And again, I am going to
add in a few bullet points.
| | 10:11 | Okay, we are going to do those same two things
that we did before when we changed the visibility
| | 10:16 | to private, so let's go over to Edit, next
to Visibility, change that to Private, and
| | 10:21 | click OK, and we already have our Exhibit
category set up, so I'll click Exhibits and Update.
| | 10:28 | Let's head back to Dreamweaver, and I am
just going to refresh the page, and now we have
| | 10:32 | two exhibits listed on our Exhibit page,
Spotlight Exhibit, and Student Exhibit.
| | 10:38 | There is the separator and everything
looks in proper date order that we had set up.
| | 10:42 | So, this is really just the start of what you
can do with data from a WordPress-driven database.
| | 10:49 | All of the other Dreamweaver Server
Behaviors are at your disposal as well.
| | Collapse this transcript |
|
|
12. WordPress AdministrationModifying general settings| 00:00 | A lot of thought has gone into the administrative
settings found in the WordPress Dashboard.
| | 00:05 | You can easily customize it to best
fit the workflow for you or your client.
| | 00:09 | So here in WordPress, let's go right down to
where the settings are over on the left-hand
| | 00:15 | side, and I'll click once to expand that and go
to the first option which is the General Settings.
| | 00:21 | So this is where the blog Title and Tagline
are found, should you ever need to change them.
| | 00:26 | Now, we never used the
description or the Tagline here.
| | 00:30 | So I'm just going to go ahead and delete it.
| | 00:33 | It really depends on the theme, some themes
actually incorporate that as part of the title,
| | 00:38 | so you want to be careful with that to look
up at your title as you're developing your
| | 00:42 | pages, because having the Tagline just another
WordPress site might be a bit of a downer for some clients.
| | 00:48 | We can also, if needed, change the
WordPress Address and the Site Address.
| | 00:53 | Most of the time, you won't have to do that
The little bit of information that it says
| | 00:57 | here about Entering the address if you want
your site homepage to be different from the
| | 01:01 | directory, you install WordPress.
| | 01:03 | It's a little misleading. It's not
quite as seamless as it would appear.
| | 01:08 | So I recommended that you keep these the same
and use some of the techniques that we covered
| | 01:12 | early on to handle that, using the custom
function that I developed called Site Root,
| | 01:17 | for example. Other settings, Email Address,
obviously, this is required for admin purposes.
| | 01:23 | You can set it up if you have a site that
involves people having to register in order
| | 01:28 | to view the site, control who can register
through the Membership option here, and there
| | 01:33 | are other settings,
including the User Default Role.
| | 01:36 | Now I'll be covering Users a bit
later, so let's skip over that for now.
| | 01:40 | Scroll down past the Timezone, and of
course you can modify all of those things.
| | 01:45 | I have made some modifications here, so
I'm going to go ahead and click Save Changes.
| | 01:49 | And now the next settings category
I want to show you is Permalinks.
| | 01:54 | If you recall, every time you create a page
or put up a post, WordPress creates a Permalink
| | 01:59 | to display that page or post.
| | 02:02 | Now by default, it uses the syntax that you
see up top there, where it simply puts the
| | 02:07 | path to your folder a question mark and a P
for post, equaling whatever their database id is.
| | 02:13 | If it's a page, you'll see the word page,
and an equal sign and database id.
| | 02:18 | Now you can make that much more English
readable if you want by choosing any of the other
| | 02:22 | options you see here.
| | 02:24 | I have to issue a very strong warning here.
There's a known bug in Dreamweaver that prevents
| | 02:29 | dynamically-related files from being recognized
as such, should you change the Permalink setting.
| | 02:34 | It's been around for a while and has
caught a great many Dreamweaver users.
| | 02:38 | So hopefully it will be fixed soon, but if
you make a change like choosing Post name
| | 02:44 | for your Permalink Setting and then choose
Save Changes, and you go back to Dreamweaver
| | 02:48 | and encounter this issue,
you'll know what to do.
| | 02:51 | You'll need to come back
here and change it to Default.
| | 02:53 | It doesn't mean that on your Live Site you
can't change the Permalink Setting there to
| | 02:58 | your Post name, which is a
workaround that I've used before.
| | 03:01 | I'm not going to make or save any changes
here, so let's just go on to the next category
| | 03:05 | I want to show you, which is Media.
| | 03:07 | This is where you set up the maximum dimensions
for images that you want to bring into a post.
| | 03:11 | I found that the defaults are okay, but it
really depends on the design of your layout,
| | 03:16 | whether they should be larger or not.
| | 03:18 | The section that I want to focus on, though,
is down towards the bottom, and that concerns
| | 03:23 | the Uploading of Files.
| | 03:24 | By default, WordPress stores its
Uploads in the wp-content/uploads folder.
| | 03:31 | You can customize that if you
want by entering a new path here.
| | 03:34 | Another option that I think is key for
organizing your uploads is the Organize my uploads into
| | 03:39 | month- and year-based folders choice.
| | 03:42 | Now I have clients who really hate the way
that WordPress sets this up, and I have other
| | 03:46 | clients who really like it.
| | 03:48 | So it's something that you may
have to change at some point.
| | 03:52 | If you do change it, any images or other
documents that you've already uploaded will still be
| | 03:56 | in those initial folders, and any new assets
that are added moving forward will be set up
| | 04:02 | according to your new structure.
| | 04:04 | So that's an overview of
the most important settings.
| | 04:07 | In the next lesson, I'll show you how
to manage your WordPress sites users.
| | Collapse this transcript |
| Setting up users| 00:00 | One of the greatest benefits to working with
WordPress is its ability to handle multiple users.
| | 00:06 | Not only is it set up to allow any number of
users to work on entering and editing content,
| | 00:11 | there are built-in roles that
can control who can do what.
| | 00:14 | So I'm going to expand the Users category
that you see here, and besides your own profile
| | 00:20 | you also see a list of all users which in
our case is just the one, and of course you
| | 00:25 | can always add new users.
| | 00:27 | A typical situation that might come into
play is when you hand the site over to a client.
| | 00:32 | So I'm going to go ahead and add in a new
user, and I can choose Add New from the top
| | 00:36 | here or from the navigation over on the
left and start filling out the new User Form.
| | 00:42 | So our fictional client, we'll give her
name of Debra and call here deb@client.com, her
| | 00:49 | name of course is Debra Client.
| | 00:51 | We can leave the website blank, or
you can fill that, not really necessary.
| | 00:54 | We have to put in a Password.
| | 00:57 | The next option is very handy, especially
if you're setting up a lot of users.
| | 01:01 | You can establish temporary passwords for them
themselves and then send it to the new user by email
| | 01:07 | by selecting this box.
| | 01:09 | Now since that email address is not real, I'm
going to go head and deselect the Send the password.
| | 01:14 | But I find that a really helpful option. And
then the next thing, selecting the Role for
| | 01:18 | that particular user.
| | 01:20 | The default Role as set up in the
general settings is Subscriber.
| | 01:25 | You can change that and make the default Role
Contributor if you're adding a number of contributors
| | 01:31 | to your client's website.
| | 01:33 | There are in all five different
roles each with different capabilities.
| | 01:37 | Even though the Subscriber is at the top of
the list, it's really at the bottom of the
| | 01:41 | totem pole in terms of what they can do
so they can basically just read the site.
| | 01:46 | Let's setup Deb Client as
Administrator and click Add New User.
| | 01:51 | That will take us back to the initial list.
You'll notice up here the two link options,
| | 01:55 | there's one for All for showing
all users and one for Administrators.
| | 01:59 | If I were to change Debra here from
Administrator to let's say Editor--and I'm in her profile
| | 02:06 | at this point--and then go back to users, you'll
see that not only is it updated in the listings
| | 02:12 | here, but it's also Updated up top here, so
I can quickly shift to show just my Editors
| | 02:18 | or just my Administrators.
| | 02:20 | One other thing that you should be aware of
is once you set up your additional user, you
| | 02:25 | might want to go back into your Post,
especially if you've had the responsibility for adding
| | 02:30 | in the content as you're developing the site.
| | 02:33 | And what you might want to do is to go in
and do a Quick Edit for a particular Post
| | 02:38 | and change the Author.
| | 02:40 | Now originally, you only have the administrator
Author, but the more users you add, the more
| | 02:46 | options you'll have for Authors.
| | 02:47 | So I can now change this to Debra, and if
there were on the site someplace where we
| | 02:53 | had a byline and that information was made
public, her name would then appear on the site.
| | 02:59 | For many situations, the default
user functionality is often enough.
| | 03:03 | But if you need more control over who can
see your content, you'll probably need to
| | 03:07 | bring in a plug-in, and we'll
look at that in the next lesson.
| | Collapse this transcript |
| Restricting access to specific WordPress pages| 00:00 | While WordPress is great for communicating
across the Internet, all pages within your
| | 00:04 | site don't have to be accessible to everyone.
| | 00:07 | With the help of a plug-in, you can determine who sees
what Pages, Posts, and even what Content within a Post.
| | 00:14 | I'm going to go in and install a new plug-in by
switching to the Plugins category and choosing
| | 00:20 | Add New, and we're going to search
for a plug-in called restrict content.
| | 00:25 | Then one I'm looking for is right up the top of the
page, and it's by a gentleman named Pippin Williamson.
| | 00:32 | As you can see, he also has a number of other
versions that have specific purposes as well
| | 00:37 | as a Pro version of the
general Restrict Content plug-in.
| | 00:42 | But this one is free, and we can
take a look at the Details if you like.
| | 00:45 | I always recommend that you check out the
details before you install a plug-in, because
| | 00:50 | it will have ratings as well as specific
information of when it was updated and whether there have
| | 00:56 | been any problems encountered with
compatibility of most recent WordPress versions, so this
| | 01:02 | was very recently updated, just 6 days ago.
We're ready to go ahead and click Install Now.
| | 01:08 | Once it's installed, I can activate the plug-in.
| | 01:11 | If you're interested more details about this
particular plug-in, I recommend you go to his
| | 01:15 | website, pippinsplug-ins.com, where you can
find information about a variety of free plug-ins,
| | 01:21 | as well as his commercial ones.
| | 01:23 | To show you how this plug-in works, let's add
a new post. I'm going to call this Private
| | 01:28 | Showing and add just a little bit of content.
Of course, you could put in more details later,
| | 01:33 | but the point is that we have a new post here,
and if I scroll down--I'll click Exhibits just
| | 01:38 | so it shows up there--you'll see a new widget category
called Restrict this content, and that was added by the plug-in.
| | 01:45 | Here we can set the User Level, which right now
it's set to None which means everybody can see it,
| | 01:51 | but if I expand the list, here you see my
standard WordPress user roles, and let's say that I
| | 01:57 | want to restrict it to just Administrators,
and I also want to hide it from the RSS feed
| | 02:03 | which is a good point, because you don't
want to broadcast this generally to everyone.
| | 02:08 | So now I'll scroll up a little bit, click
Publish, and I can view the post, which I do
| | 02:12 | of course see because I'm
logged in as the Administrator.
| | 02:16 | So I'm just going to copy this link very quickly,
head back to the Dashboard, now I'm going to Log Out.
| | 02:23 | Now once I've logged out, let me put that
link back in and go back to that same page and
| | 02:28 | here you'll see the title
of the post but no content.
| | 02:31 | Okay, that's pretty good, it gives us a
simple way of restricting the content of a post,
| | 02:37 | but we can actually do a little bit better here.
| | 02:39 | So I'm going to go back, actually log back in,
and let's go to our Posts and do an Edit.
| | 02:48 | Now I'm going to add a second line,
"Please join us for a private reception at 8pm."
| | 02:54 | Now to make sure that only certain people
see this, I'm going to enter in the short
| | 02:59 | code that's part of this plug-in.
| | 03:01 | Short codes are maintained within a square bracket,
so I'm going to put my opening short code in front.
| | 03:08 | So it's a square bracket and then keyword
restrict, and I also want to set a User Level,
| | 03:14 | so I'm going to enter in userlevel, all one word =
and then whatever role that I want to restrict it to,
| | 03:21 | then we want to add in the name of the user
level, in this case administrator is actually
| | 03:25 | shortened to admin, so I'll type
that in and enter it in another quote.
| | 03:29 | And then we want to put in the closing
restrict also in square brackets and like HTML tags
| | 03:37 | it uses a forward slash to indicate that it's the
end of the tag, and then the keyword restrict, okay.
| | 03:44 | So let's click Update and check out our post,
I'll click refresh to bring everything in,
| | 03:49 | and here you see both lines
of the Private Showing post.
| | 03:54 | Now let me go ahead and Log Out, and then I'll
hit the back button and refresh one more time,
| | 04:01 | and now because I'm not a logged in
Administrator, I don't see that bit of content.
| | 04:05 | But I found that this is a pretty effective
way of handling access to your various web pages
| | 04:10 | and their particular content, and it really
adds to the flexibility of your WordPress site.
| | Collapse this transcript |
|
|
13. Publishing a WordPress SiteExporting and importing WordPress files| 00:00 | As noted earlier in the course, WordPress stores
all the site's post pages and other info safely
| | 00:06 | in a database so you never have to worry, right?
Because nothing ever goes wrong, right?
| | 00:11 | Well, in the real world, things do happen, servers
crash, data gets corrupted, web host go offline.
| | 00:18 | It's best to be safe and know how to
take control of your WordPress data.
| | 00:22 | In this chapter we'll
examine two ways to do just that.
| | 00:25 | One method outside of WordPress and in
this lesson one method built right in.
| | 00:31 | WordPress includes tools for both
exporting and importing its data.
| | 00:35 | You'll find them handily
stored right under the Tools menu.
| | 00:38 | So let's take a look at Export first.
| | 00:42 | WordPress exports its data to a text file
utilizing a version of XML they call WordPress
| | 00:47 | eXtended RSS, or WXR.
| | 00:50 | Honestly, it doesn't matter what they call
it because it just works, and the only thing
| | 00:55 | it's really useful for is outputting your
data so you can import it using another of
| | 01:00 | their tools which we'll
get into a little bit later.
| | 01:03 | As you can see, from the Export screen you
have the option of exporting All of your data
| | 01:07 | or just the Posts or just the Pages.
| | 01:10 | Let's try it out with the
Export All Content option.
| | 01:13 | So I'm going to click Download Export File.
| | 01:17 | Google Chrome will save
it down here to the bottom.
| | 01:20 | I'm going to show it in
Finder, and there is a file.
| | 01:24 | WordPress automatically gives a file a name
that includes your site name, the word WordPress,
| | 01:29 | so you know where the
data came from, and the date.
| | 01:31 | This is really helpful when
making backups on a regular basis.
| | 01:35 | Now let's switch over to Dreamweaver and
open up that file, because as you probably know
| | 01:41 | Dreamweaver speaks XML quite well.
| | 01:44 | So I'll go to File > Open, navigate to my
Downloads and then double-click on that XML file.
| | 01:51 | Up top in the Comments section, there are
some instructions on how to work with this file,
| | 01:55 | primarily importing it back into WordPress,
which we'll cover later in this lesson.
| | 02:00 | Then after that, the actual data begins.
| | 02:02 | Let's scroll down a little bit, and here we
can see a number of categories being defined.
| | 02:08 | You see both the term_id listed as the first
item and then after that what WordPress calls
| | 02:14 | the category_nicename, and what's
shown in the Dashboard as the slug.
| | 02:18 | A little further down, you'll
start to see some sample content.
| | 02:22 | Now this is the page that's included as a
sample page, and once we get past that,
| | 02:27 | we can see some content that we entered.
| | 02:30 | Chances are you won't really need to open the
file and look at anything or manipulate anything.
| | 02:34 | You just use it as a source
file that you can later import.
| | 02:38 | Besides backing up your data, one of the
primary uses that I found with WordPress' Export
| | 02:43 | Import features is to move content
developed locally to a live site.
| | 02:48 | So to demonstrate that, I've set up another
WordPress installation on my local server
| | 02:52 | here called roux2 so you can see how it's done.
| | 02:56 | Let's go back to the browser, and there's
a second tab here shows my roux2 site, as
| | 03:02 | you can see by the path up
there, and I'll click Dismiss.
| | 03:05 | I've also named the site Roux Academy Live
just to distinguish it from our development site.
| | 03:10 | As you can see, this WordPress site
is brand-new, just-installed condition.
| | 03:15 | So let's bring in the data that we
exported, and we'll see what happens.
| | 03:19 | So I go to Tools and choose Import.
You'll find a host of import possibilities.
| | 03:24 | The one we're most interested in is
the last one, WordPress. So click that.
| | 03:29 | Now that, that's installed, let's
Activate the Plug-in and Run the Importer.
| | 03:33 | So we get to choose an exported file, which
as you recall we put in our Downloads folder
| | 03:40 | and here it is here.
So I'll select that.
| | 03:43 | Click Open and then Upload file and import.
| | 03:47 | After WordPress has brought in the file it
reads through all the users, and as it says,
| | 03:51 | sets up new passwords that are
randomly generated for each one.
| | 03:55 | Now you will need to go in and modify those
passwords to make sure that they're properly set up.
| | 04:01 | So you have the option for importing an author
and putting them on a new username or assigning
| | 04:06 | them to an existing user.
| | 04:08 | In this case, we're going to set it up as
admin and importing another author here which
| | 04:13 | I could put in as a
separate username if I wanted to.
| | 04:16 | I don't really want to assign it
to my only other existing user.
| | 04:20 | So one strategy is you might before you import
set up additional users and bring in that data,
| | 04:27 | if you know ahead of time that you're
working with that kind of situation.
| | 04:30 | The option for downloading and importing file
attachments, and let's click that and then click Submit.
| | 04:36 | It reminds you to update the
passwords and roles of imported users.
| | 04:42 | So you would want to go over and edit Debra's
and then put in her New Password or her old
| | 04:49 | password, Update the User.
| | 04:53 | Now let's head over to the Dashboard to
see that we have our post that we've added.
| | 04:57 | Now it does because it's a new
installation that we're bringing data in.
| | 05:02 | You're going to find all of that
placeholder content still there.
| | 05:05 | It won't remove data that's
already there, such as the Hello world,
| | 05:09 | or if we go to Pages, the Sample Pages, and
because I didn't remove sample page before
| | 05:16 | installation you'll see it twice.
| | 05:18 | So it's one that came in with the original
installation and one that was still in my
| | 05:23 | data that I imported.
| | 05:24 | So let's take a look at the site.
Now don't be shocked.
| | 05:29 | But when you first choose it you may very
well be, because the first time I saw what
| | 05:33 | was happening I thought, oh no, I've
lost all of that work. Well, you haven't.
| | 05:38 | WordPress just uses the default theme.
It brings in just the content, the posts, and the pages.
| | 05:44 | It does not bring in your theme.
| | 05:46 | So you've the option for zipping up your
theme folders--both parent and child in our case--
| | 05:51 | and installing them or
just transferring the files.
| | 05:55 | I'm going to use Finder to copy
custom and roux theme folders.
| | 05:59 | So here are my two sites.
| | 06:01 | I'm going to extend roux_academy and then go
down into blog, and open up content, open up themes.
| | 06:09 | Here is custom and here's roux.
| | 06:11 | I'm going to copy both of
those and then close that down.
| | 06:16 | Now this particular site that I have here
doesn't use a separate blog folder or anything.
| | 06:21 | So wp-content is going to be in the site root.
| | 06:23 | I'll expand, and then just let me double-
click on themes to dive into that exclusively and
| | 06:29 | then I'll paste in my two folders.
| | 06:32 | Let's head back to the Dashboard, and now
I can go to Appearance > Themes, and you'll
| | 06:37 | see my available themes listed here.
| | 06:40 | Let's Activate Roux and then head on over
to our site one more time, and now our blog
| | 06:46 | site is back in all of its glory.
| | 06:48 | There is definitely some
clean-up you'll need to do.
| | 06:50 | Be sure to budget that time in.
| | 06:52 | I checked all the various sections of WordPress,
Posts, Pages, Categories, Tags, and removed
| | 06:58 | any unwanted elements.
| | 06:59 | While it's not the most robust solution, WordPress'
Import and Export feature definitely fits the need.
| | 07:06 | In the next lesson I'll show
you an alternative approach.
| | Collapse this transcript |
| Backing up and restoring the database| 00:00 | Backing up and restoring your database falls into
the fact of life category of web professional chores.
| | 00:06 | In this lesson, I'm going to walk you through
the process of exporting your database completely,
| | 00:12 | and then moving it to another location.
| | 00:14 | I'll also discuss how you can
restore the data to the same database.
| | 00:19 | So, let's go to MAMP that I have
open here and click Open the start page.
| | 00:24 | So, I can get to phpMyAdmin.
| | 00:26 | We will use this tool which is found on
many web hosts and also accessible for you to
| | 00:33 | download and install on
your own systems at no cost.
| | 00:36 | So, I'm going to select
my roux_blog database here.
| | 00:41 | This is all the information that WordPress stores.
You can see all the tables it creates.
| | 00:47 | And should you so choose, you can easily
choose a table such as posts and then select browse
| | 00:53 | to see all the information.
| | 00:56 | But what we're really interested in is going to
roux_blog here and then exporting the entire database.
| | 01:03 | Now, the latest version of phpMyAdmin has
an option for choosing Quick and Custom.
| | 01:09 | The older versions only have the Custom one.
| | 01:11 | So let's move to that, so you can
see what the whole thing looks like.
| | 01:14 | It's a slightly different screen, but
it basically has all the same options.
| | 01:19 | So, I'm going to select all the
tables, make sure those are all selected.
| | 01:22 | You have two options, one for saving as output
to a file, and one for saving output as text.
| | 01:28 | This time I am going to
save the output as text.
| | 01:31 | We'll keep the format as SQL. Just so you
know, there are a ton of other options here.
| | 01:37 | Then there's format specific options,
including displaying comments, et cetera.
| | 01:43 | Typically, I find that just keeping
the default options works well.
| | 01:47 | So let's scroll down to
Object creation options.
| | 01:50 | Again, if you're moving your data to a
different location, such as going from a development
| | 01:55 | situation to a live server, keep the
Object creation options just as they are, because
| | 02:01 | what you are going to be doing is bringing
your data into an empty WordPress installation.
| | 02:07 | Let's continue scroll down.
| | 02:08 | The Data dump options, again,
keep these all the same.
| | 02:12 | And when you get all the way down to the bottom,
there is a little lonely Go button over here.
| | 02:17 | In older versions, it's on the right; in the
newer versions, it's on the left. So I'll click Go.
| | 02:22 | And pretty quickly, because we don't have a ton of
data, you'll see all that information available to you.
| | 02:28 | So to demonstrate the process here, what I
am going to do is press Command+A to select
| | 02:34 | everything and then copy it all.
| | 02:36 | Now, I am going to go back to
my localhost, choose Databases.
| | 02:41 | Let's create another database.
| | 02:42 | I am just going to call
this one roux3. Click Create.
| | 02:46 | Now, this is in the same situation as if
you were just installing WordPress, and it was
| | 02:51 | going to add all of its
database tables and the like.
| | 02:54 | But instead of running through the WordPress
installation, I'm going to select roux3 here,
| | 03:00 | the database I just
created, and go to my SQL tab.
| | 03:04 | Now, you might think what you
probably would do would be go to Import.
| | 03:09 | You would only do that if you
had saved the data as a file.
| | 03:12 | Because I saved it as a text file and then
copied it into memory, I can go right to my SQL tab.
| | 03:18 | So I'm going to just paste in my
copied SQL by pressing Command+V.
| | 03:22 | Now, before we click Go, you actually want to
go all the way up to the top of the information.
| | 03:28 | In this situation what I will need to do
is to scroll over a little bit to the right
| | 03:31 | so I can see the scrollbar and then
grab it and go all the way to the top.
| | 03:35 | It looks like that's fixed that.
| | 03:38 | What I want to do is get to the
name where it says the Database name.
| | 03:41 | I am going to change that to whatever
database that you're bringing it into.
| | 03:45 | Now, we exported it from roux_blog,
but we want to bring it into roux3.
| | 03:50 | So, we'll add the 3 there, and
now I can go ahead and click Go.
| | 03:55 | Let's see what it did.
| | 03:59 | Now again, another difference between older
and newer versions of PHP, with newer versions,
| | 04:05 | you won't get a confirmation
message that the data was imported.
| | 04:08 | So just click the name of the database,
and you'll see all of your tables in place.
| | 04:13 | Older versions put up a mission
accomplished type of statement.
| | 04:16 | Now, we've bought our data in,
but we are not quite finished.
| | 04:19 | There are a couple of really critical chores.
| | 04:21 | And the first one involves the
wp_options table. So, select that.
| | 04:27 | You want to change two values, the first one is
right up top, and it's actually option_id number 1.
| | 04:34 | And if I go ahead and click on the Pencil Edit
icon, you can see that what this is is the site URL.
| | 04:40 | And you want to make sure to change the path, and I am
just going to change this to my roux3 designation here.
| | 04:48 | You want to make sure to change the
path to whatever your new location is.
| | 04:52 | If it's something that's on the website,
you might want to make it something like this.
| | 04:57 | Now, once you've got the website address
up there, copy that, and then click Go.
| | 05:02 | Now, you copy it because you're going to
need to put it in another location, and you want
| | 05:06 | to make sure that they're the same.
| | 05:08 | Of course, you want to make
sure that they're both correct.
| | 05:10 | Now, we need to go to the next page in order
to see the next item that we have to change.
| | 05:16 | So, click the next button that you see
here, which is just the greater-than sign.
| | 05:21 | We want to go to item 37
and make that edit there.
| | 05:25 | So, this is the home URL.
| | 05:28 | You recall in the General Settings category,
we had both a site URL and home URL.
| | 05:32 | We want to make that they're both the same.
| | 05:34 | If you don't do this, you'll get into this
kind of endless loop where when you try to
| | 05:39 | log in, WordPress thinks that you're trying
to log in to the original URL site and will
| | 05:45 | keep redirecting you there.
So, make sure you make these two changes.
| | 05:49 | I'll click Go to confirm that option.
| | 05:51 | Now, there is one more thing that you may need
to change, and that's the wp-config.php file.
| | 05:57 | Let's head back to Dreamweaver.
| | 05:59 | I am going to extend my Files
panel, open it up all the way.
| | 06:04 | I am going to go into the blog folder here.
| | 06:07 | The file I'm looking for is the one that WordPress first
created when you installed it, and it's called wp-config.php.
| | 06:16 | Now, don't get confused, there is one that's
wp-config-sample which is of course just an
| | 06:23 | example of how the page is structured.
Actually, it's got the information in it.
| | 06:28 | So, double-click on that, and I'll collapse
my Files panel and then go into Code view.
| | 06:33 | So basically, what you want to do is if you are
changing the database name, database username,
| | 06:40 | database password, or the database host,
any of those things on your live installation,
| | 06:46 | you want to make those modifications
here and then upload it to the live site.
| | 06:52 | This process that I've described is great
for moving your database to a new location.
| | 06:56 | But what about just
restoring it to your database?
| | 06:59 | The process is pretty much
the same, except for one switch.
| | 07:03 | You want to be sure to
throw in the export process.
| | 07:06 | So, let's go back to our phpMyAdmin.
| | 07:08 | And I am going to select the
Database again and then Export.
| | 07:12 | Now, let's go through the Custom Options one more
time because I want to show you that one difference.
| | 07:20 | And that's in the Object
creation options section.
| | 07:24 | You want to make sure to add Drop Table.
| | 07:28 | What this will do is before it imports your data, it
will erase any table that is there with the same name.
| | 07:36 | This ensures that you don't duplicate your data.
| | 07:39 | If you forget to check the Drop Table option, and
you've already exported your data, all is not lost.
| | 07:46 | All you need to do at that point is go back to your
Database, Check All, and then with All Selected, Drop.
| | 07:53 | And that will clear out all of the tables
so that you can properly import the data.
| | 07:58 | It's very important to
know how to manage your data.
| | 08:01 | Many web hosts include the ability to
back up your data on a regular basis.
| | 08:05 | I encourage you to seek out and set up
those options with any live WordPress site.
| | Collapse this transcript |
| Transferring files| 00:00 | With your site design finalized,
you are ready to go live.
| | 00:03 | Let's take a look at the best way to accomplish
that to make sure all of your files get transferred
| | 00:08 | properly and WordPress works appropriately.
The first task is to set up the remote server.
| | 00:14 | So we'll need to open up the Site Setup dialog box,
which you can do most easily by double-clicking
| | 00:21 | on the site name in the Files panel.
| | 00:24 | Once that opens up, we'll go into the Servers category
where you'll recall we set up a testing server initially.
| | 00:29 | Now we're going to add another server, so
click the Add New Server option, and let's
| | 00:34 | name this one remote.
| | 00:36 | This time instead of going to
local/network, we'll connect using FTP.
| | 00:41 | So I'm going to put in my FTP Address
which is actually a sub domain that I set up for
| | 00:47 | testing purposes here, and
it's roux.lowerytest.com.
| | 00:52 | The Port stays the same and
put in my Username and Password.
| | 00:59 | Make sure that you've got the Save check box
selected so you won't have to reenter it every
| | 01:03 | time and then click Test.
| | 01:05 | Well, good news. We've been connected to the web
server successfully, always gratifying to see that.
| | 01:12 | Click OK, now this is going to a specific
directory so I don't need to put in a Root
| | 01:17 | Directory entry here, but I can go ahead and change
the web URL so any link checking will be handled properly.
| | 01:26 | Once that information is in,
that's all we really need to do.
| | 01:29 | So let's click Save and note that Dreamweaver
automatically picks up that this is a Remote
| | 01:34 | server and then checks that off, that's good.
| | 01:37 | And let me save this configuration. Dreamweaver
will recreate the cache, and once it's finished
| | 01:43 | we'll be ready to upload the files.
| | 01:45 | Now to do this, I'm going to go ahead and expand my
Files panel, and let's make this pretty big here.
| | 01:50 | We'll have it take over the whole screen.
| | 01:53 | When you first come in, you're very likely
to have your Local Files on the right and
| | 01:59 | a blank site on a Remote Server on the left.
| | 02:02 | Note that there are up top both a
Remote Server and Testing Server icons.
| | 02:07 | You want to make sure that Remote Server is
selected, and once that's selected click the
| | 02:13 | Connect to Remote Server icon.
| | 02:16 | When Dreamweaver makes the connection, it
will show you what files are located in the
| | 02:20 | directory you specified if there are any.
| | 02:22 | Since I just set this up as a
sub domain, the folder is empty.
| | 02:26 | Normally, when you set up a site, there may be
a couple of files that were established by
| | 02:30 | the company, including a standard index.html
file saying that the site is being set up as
| | 02:35 | well as some corporate images perhaps.
| | 02:38 | You want to be sure to
remove any and all those files.
| | 02:41 | Now I'm ready to upload this site, and you
might think that I would just leave the uppermost
| | 02:45 | folder selected and choose Put, but that's
going to upload all of the files on the site,
| | 02:51 | and for our purposes that's not quite correct.
| | 02:54 | We want to upload almost all the files.
In fact, we want upload them all except for two.
| | 03:00 | To explain what I mean, let's
first expand the blog folder.
| | 03:04 | Now the one file in here that I don't want to
upload is wpconfig.php, because I'm planning
| | 03:10 | on installing WordPress remotely.
| | 03:13 | One way to avoid this being uploaded is to right-
click on it, choose Cloaking, and then select Cloak.
| | 03:19 | You'll see a red slash through the file, kind
of the universal symbol of don't do that, and
| | 03:25 | here it's telling Dreamweaver
not to upload this file.
| | 03:29 | The other file that you want to be
concerned with is within the Connections folder.
| | 03:34 | The Connections folder was created in the
lesson adding WordPress dynamic data to pages.
| | 03:40 | And within the Connections
folder is my connexhibits.php.
| | 03:44 | Now this has all of the connection
information for my local database which may be, and most
| | 03:49 | likely is, different from
what's on your Remote Server.
| | 03:53 | Now honestly Dreamweaver doesn't really handle
this very well. There are third-party extensions
| | 03:57 | to Dreamweaver which allow you to work with
any number of database connections and handle
| | 04:02 | those appropriately, but instead of installing
those, let me show you a workaround that I've developed.
| | 04:08 | I'm going to duplicate it twice, so I'll
press Command+D once, and then again, and you can
| | 04:13 | see that Dreamweaver appends the term
Copy and Copy to the file name.
| | 04:18 | I am going to change this first file name
to connexhibits-local, and this file we'll
| | 04:25 | just leave alone. This is actually just a
direct copy of our local Connection file.
| | 04:30 | This other one I'll
rename to connExhibits remote.
| | 04:34 | Now this is the file that you would open up,
go into Code view, and then change the hostname,
| | 04:41 | if there is a change, database name,
database username, and database password.
| | 04:46 | Once you have all of those bits of information,
save the file. I'm just going to make this
| | 04:53 | password just to insert
something different here.
| | 04:55 | I'll save that file, close it, and let's go back
to our Files panel, and I'm going to expand again.
| | 05:01 | Well, now I'm going to use my same Cloaking
ability for the local files, and I can actually
| | 05:07 | select them both simultaneously and then right-
click and choose Cloaking > Cloak, which should Cloak
| | 05:13 | both of those files.
| | 05:14 | And once I close my folder, I'm ready to select all
of my files and put them online. So I'll click Put.
| | 05:22 | Dreamweaver will ask if we
want to put up dependent files.
| | 05:24 | Since I have everything selected, I can go
ahead and click No, and it will begin the
| | 05:29 | process of uploading the files.
| | 05:31 | Now once the files are transferred, you'll
be ready to take the next step which depends
| | 05:36 | on how you want to bring your data in.
| | 05:39 | If you want to use WordPress' import/export
future, follow the steps outlined in the exporting
| | 05:45 | and importing WordPress files lesson.
| | 05:49 | If you'd prefer to go the direct database
route, go for the approach detailed in backing
| | 05:54 | up and restoring your database.
| | 05:56 | Either way, you'll be able to move your local development
to the remote location on your way to go in life.
| | Collapse this transcript |
| Testing and fine-tuning| 00:00 | Once you're live site is up and
running, there is still a little bit to go.
| | 00:04 | It's pretty much critical that you do your
own testing and especially with the WordPress
| | 00:09 | based site engage your client
in the testing process as well.
| | 00:14 | So I like to think of it as divided into two main
areas, your own testing and then client-based testing.
| | 00:22 | Your own testing should
initially address the public-facing site.
| | 00:26 | You want to make sure that all of your output is cross-browser,
cross-platform, and especially today, cross-device.
| | 00:35 | One key tool that you can use to help ensure that
your site is both cross-browser and cross-platform
| | 00:41 | is Adobe BrowserLab, and it's something that
you can access right from within Dreamweaver.
| | 00:46 | Now you also want to be sure to test your administrative
site, and by that I mean the WordPress Dashboard.
| | 00:55 | For the most part there is been a lot of
testing that is already gone into making sure its
| | 00:59 | cross-browser and cross-platform tested well, so
you really only need to do a little bit of that.
| | 01:06 | However, I do recommend that you look at your
WordPress site on a variety of platforms and
| | 01:11 | browsers just to ensure
that there are no surprises.
| | 01:15 | When it comes to different devices like
tablets and phones, that area is under development
| | 01:20 | as they say, and I would especially test
hard on any enhancements that you bring to your
| | 01:25 | site as we did earlier in the course,
especially in the cross-device category.
| | 01:30 | You want to make sure that any menus that
you've added to the Dashboard are easily accessible
| | 01:36 | on both phone, tablet, and desktop.
| | 01:39 | Another aspect to testing and fine tuning
your administrative site is making sure that
| | 01:45 | the client assistance and support is in place.
| | 01:48 | It's one thing if your client is well versed
with WordPress blogs and has worked with them
| | 01:53 | for years and all of their company have used
them for years, but that's not always the situation.
| | 01:58 | I typically encounter clients who are new to
using WordPress and need a lot of support initially.
| | 02:05 | What I do is I create some basic targeted
documentation that includes their log-in details
| | 02:11 | meaning the URL that they go to in order to
log in, what their usernames and passwords
| | 02:17 | are, and how to find them if they don't
have them available to them, and then just the
| | 02:21 | basics of entering posts and editing posts.
| | 02:25 | I try to set up my WordPress site so most of
the hard work--meaning setting up different
| | 02:30 | pages with different themes--is already done.
| | 02:34 | And the client only needs to do a bare minimum,
such as enter a post and assign a category.
| | 02:41 | On the client side of things, you want them to
also be concerned with testing the public-facing
| | 02:46 | site, as well as the
Dashboard administrative site.
| | 02:49 | With the public-facing site, you're going to
be dealing with real-world browser, platform,
| | 02:54 | and device testing.
| | 02:55 | And by that I mean they're going to be using exactly
what it is that they work with in their everyday lives.
| | 03:02 | I always try to find out ahead of time what
browsers and systems people are used to working
| | 03:08 | with so that I can be sure to pretest those a
little more heavily than I would other devices.
| | 03:14 | I want to make sure that when the client
sees the work for the first time, that it looks
| | 03:18 | exactly as they're expecting it to.
| | 03:21 | That being said, you never know when they
will get word from a trusted advisor who's
| | 03:25 | on an Internet Explorer 6 platform
that the site doesn't look quite right.
| | 03:30 | So you have to be prepared for situations
like that, whether you build in the expectation
| | 03:35 | of what browsers, the sites we'll
work on in the contract or less formally.
| | 03:40 | One thing that I found very helpful when working
with clients and WordPress sites is to initiate
| | 03:45 | a soft launch so that the site is launched but
only the client's personnel have access to it.
| | 03:52 | So that they can see not only what it looks
like under real-world circumstances as they
| | 03:57 | add more content and expand
certain areas of the site,
| | 04:01 | but also so that they can get their content
onto the site before it officially launches.
| | 04:06 | One of the most frustrating things from a
web designer's perspective is often getting
| | 04:10 | the content that a client intends to put on the
site ahead of time so that you can incorporate
| | 04:16 | that correctly and see what it
is they're really working with.
| | 04:20 | Having a soft launch allows them both the
experience of getting used to working with
| | 04:25 | the site so you can answer any questions in an
upfront manner as well as populating the site.
| | 04:32 | Typically during this process, you'll
encounter some minor bug fixes and some adjustments
| | 04:37 | where one feature may not work out exactly as they had
thought and so they want something slightly different.
| | 04:43 | Now that's all fine.
| | 04:45 | But one thing I want to caution you about, this
is also an area where feature creep can come in.
| | 04:50 | You want to be aware of the possibility of
that but also alert for ways to take that
| | 04:56 | desire to enhance the site into
an opportunity for future work.
| | 05:00 | Now there is a tremendous amount of
gratification in seeing a client make the site their own
| | 05:06 | by adding content and
bringing your site design to life.
| | 05:10 | Enjoy your work as it takes off and
becomes an important destination on the web.
[00:05:15ll.91]
| | Collapse this transcript |
|
|
GoodbyeNext steps| 00:00 | Thanks for watching Dreamweaver
and WordPress: Core Concepts.
| | 00:04 | I hope you found the lessons to
be both informative and engaging.
| | 00:07 | If you'd like more information on working
with Dreamweaver and WordPress, check out
| | 00:12 | my related courses here in the
online training library at lynda.com.
| | Collapse this transcript |
|
|
