IntroductionWelcome| 00:03 | Hello, I am Morten Rand-Hendriksen and
welcome to start with a theme photo portfolios.
| | 00:09 | In this course, I will show you how to
quickly and easily build and manage a
| | 00:12 | photo portfolio site using
WordPress and two free themes.
| | 00:17 | We will start by setting up WordPress
itself to function as a Portfolio site, we
| | 00:21 | will download and activate an advanced
photo portfolio theme and customize it to
| | 00:25 | look and function the way we want, and
we will download and customize a second
| | 00:30 | completely different photo portfolio
theme to provide you with two great
| | 00:33 | alternatives both in terms of
look and functionality for your site.
| | 00:37 | This course is meant as a primer to get
you up and running with your own photo
| | 00:41 | portfolio site powered by WordPress.
| | 00:43 | It requires no coding skills on your
part, but it does require that you have a
| | 00:47 | self hosted WordPress site to work with.
| | 00:50 | If this is first time working with
WordPress or you are unfamiliar with the
| | 00:53 | application, I recommend you go check
out the WordPress 3 Essential Training
| | 00:57 | course right here on Lynda.com.
| | 00:59 | Now let's build a photo portfolio site
with WordPress starting with the theme.
| | Collapse this transcript |
| Tour of the project| 00:00 | Before we get started, let's take a
look at the end product of this course.
| | 00:04 | Like I said in the intro, the
purpose of this course is to make an online
| | 00:08 | portfolio where you can showcase your
photos and we will do that using two
| | 00:12 | different free WordPress themes.
| | 00:14 | This is the first one, it's called Minimatica.
| | 00:17 | As you can see it showcases your
photography right up front on the home page and
| | 00:22 | also gives you links to important information.
| | 00:25 | How to get to the Home page, the Portfolio itself,
a Blog, a Page About me, and a way to Contact.
| | 00:32 | These are standard components of any
online portfolio and they are easy to
| | 00:35 | build in WordPress.
| | 00:36 | After we are done, you will end up
with the site that not only has dedicated
| | 00:41 | pages for your photos with advanced
features like the ability to blow them up so
| | 00:46 | you can see them more clearly, you also
have a custom menu that leads to static
| | 00:52 | pages, one about yourself, so people
can find out more about you and a page
| | 00:58 | containing a contact form, where people
can fill out information and contact you
| | 01:01 | directly without having to send you an email.
| | 01:03 | All these features are standard staples
of portfolio sites and they are easy to
| | 01:08 | manage from inside the WordPress dashboard.
| | 01:11 | The second theme we will look at
is the Auto focus 2.0 light theme.
| | 01:16 | This is the free version of page theme
and as you can see, everything about the
| | 01:20 | Auto Focus theme is completely
different from the Minimatica theme.
| | 01:24 | These two themes take the same data
from WordPress and display that data in two
| | 01:28 | entirely different ways.
| | 01:30 | The front page of the Auto Focus 2.0
theme after customization looks completely
| | 01:34 | different from the Minimatica theme
but still serves up the same information.
| | 01:38 | And if we follow a link, we still get
that same great focus on images with more
| | 01:44 | information underneath that
we do in the Minimatica theme.
| | 01:47 | Now that you know where we're going
with this course, let's get started.
| | Collapse this transcript |
|
|
1. Setting Up WordPress as a Photo Portfolio SiteAdding photos through posts| 00:00 | When you add new content to
WordPress you use posts. Since the origin of
| | 00:04 | WordPress is as a blogging platform, the main
focus of the post editor is on the post text.
| | 00:10 | But that doesn't mean, we
can't make the main focus images.
| | 00:14 | Using the built-in features in WordPress, we
can add new posts with images front and center.
| | 00:19 | For this course, I have already populated
my site with a series of posts and photos.
| | 00:23 | In this movie, I will show you how I
created these posts so you can repeat the
| | 00:27 | process for yourself with your own
photos, and if you want your own text.
| | 00:31 | Let's say I have been out shooting, and I
have a new photo I want to add to my site.
| | 00:35 | I then log into WordPress and the Admin
panel, go to Posts > Add New and here I
| | 00:42 | get the Post Editor.
| | 00:44 | The first thing I do when I
create a new post to give it a title.
| | 00:47 | This is actually quite important
because if you don't give the post an initial
| | 00:50 | title, it might get saved with a
random number and that's never good.
| | 00:53 | So I will give this post a title that
matches the image because this is how it
| | 00:57 | will get indexed in my index page.
| | 00:59 | In this case it's a photo of mailboxes
in New Orleans, so that's what
| | 01:03 | I'll make the title.
| | 01:07 | Since this is going to be a portfolio
post with just an image, I don't need to
| | 01:12 | fill in any text in the editor, instead
I am going to scroll down to the bottom
| | 01:16 | and find the Featured Image
function in the right hand collum.
| | 01:19 | Here I can click set featured image
and this opens the image uploader, from
| | 01:25 | here I can either click on the Select
Files button and navigate to the image or
| | 01:30 | I can go to the folder with image, find the
image I want to upload and simply drag it in.
| | 01:40 | The image gets uploaded into WordPress,
and when I scroll down, I can give the
| | 01:44 | image a title, and you should always
give your image an Alternate text. And at
| | 01:54 | at the bottom here, I click on
the Use as featured image function.
| | 01:58 | You will see that the image now appears
here inside the Preview window, and this
| | 02:05 | image is now assigned to the
post as the featured image.
| | 02:11 | Now I need to assign a category, so I
have created some Categories for my site,
| | 02:15 | I have one called Portfolio and under
Portfolio I have three new categories;
| | 02:19 | Cityscapes, Nature and Still life. In
this case, I think Cityscapes fits, and
| | 02:24 | finally I will add some
information for search engines.
| | 02:27 | This is done through a plugin called
All in One SEO Pack that you can install
| | 02:32 | through WordPress, you can also
find it here under the WordPress Plugin
| | 02:36 | Directory and all this plugin does is
it provides some information about the
| | 02:41 | image to the search engines because as you
can see, we have no text contents in this post.
| | 02:46 | So I will give the page a title, Photo
of distressed mailboxes in New Orleans,
| | 02:58 | and then in the Description I will say;
Photos of distressed mailboxes in New
| | 03:04 | Orleans by Morten Rand-Hendriksen.
| | 03:08 | So now, if people search for photos of
distressed mailboxes in New Orleans, they
| | 03:14 | will find this post.
| | 03:17 | When I am done with all this, I will
click Publish, and my image will now get
| | 03:23 | published on my site, so I can click
view post, and I will go directly to
| | 03:28 | that post, see my image here and the featured
image content and then see the title down here.
| | 03:34 | I know that this doesn't necessarily
look the way you wanted to yet but that's
| | 03:38 | why we created this course.
| | 03:39 | To get from this kind of strange
blogger's appearance to a full Photo Portfolio
| | 03:44 | appearance in a simple way.
| | 03:47 | Publishing content with WordPress is
incredibly easy, and because of the nature
| | 03:51 | of WordPress nothing you do
inside the application is ever final.
| | 03:55 | If you want to change your content,
swap out an image or correct a text mistake,
| | 03:59 | just go back and edit the post and
everything is changed immediately.
| | Collapse this transcript |
| Creating a separate blog category| 00:00 | Even though your goal with this course
is to make a photo portfolio, you may
| | 00:04 | also want to have a section of your
site where you can write about photography,
| | 00:07 | and other things in a separated space.
| | 00:09 | That way your visitors can check out your
images or read your clever musings or both.
| | 00:15 | To separate the portfolio content from
my blog content, I've created a separate
| | 00:19 | category called blog where
all my blog posts are stored.
| | 00:23 | By doing this my visitors can navigate
to the blog category and see only my blog
| | 00:28 | posts or they can navigate to the
portfolio's category and see only the
| | 00:32 | portfolio with images.
| | 00:34 | Adding a blog posts is no
different from adding a portfolio post.
| | 00:38 | I go into the post as before, Add a New
Post, give it a title, write some text
| | 00:45 | content, and then I want to add an image.
| | 00:53 | So I will place my cursor at the very
front of the post, click on Upload Insert
| | 00:58 | to add an image, find the image I want to
share, drag and drop it into the box,
| | 01:06 | remember to give the image a title, and
an alternate description, and then I can
| | 01:16 | add this image to my post.
| | 01:18 | I can set an alignment, in this case, I
wanted to align the left, I can set the
| | 01:22 | size, and medium is fine for me for
now, and I can click Insert into Post.
| | 01:27 | In this case, I want this image to
both my featured image and insert it in
| | 01:31 | to the post, so I will first click
Use as featured image and then I will
| | 01:35 | click Insert into post.
| | 01:37 | Now you see that the images inserted
into my post and if I scroll down to the
| | 01:43 | bottom, it's here under Featured Images.
| | 01:46 | Now what is left for me to do is to
fill out the All in One SEO Pack, so I will
| | 01:50 | say photo of Pentax K-1000.
| | 01:53 | I will insert a short description, and
under Categories, I will select Blog.
| | 02:11 | If you don't already have a blog
category, you can add it by clicking Add
| | 02:15 | New Category down here, typing in the
name of your new category, it could be
| | 02:19 | whatever you like, it can also be something
like News and then click Add New Category.
| | 02:25 | If you do this a new category is
automatically added and selected.
| | 02:29 | But in this case, I only want it to be
under the Blog category, so I will select
| | 02:32 | Only blog and publish my new story.
| | 02:37 | Now when I go to my front page and
reload it, you will see my new blog post
| | 02:44 | appears at the top here, My new camera,
and when I click on it I not only get
| | 02:48 | the huge featured at the top but when
I scroll down you see the title and the
| | 02:54 | image in the actual post along with my text.
| | 02:58 | When building a site with WordPress,
it's a good idea to think about the
| | 03:00 | structure of the information you
publish and how to organize it.
| | 03:04 | Just like in the library, where they
used taxonomies to organize books so they
| | 03:07 | are easy to find, so should your
postings on your site, whether they are
| | 03:11 | portfolio photos, blog posts or
something else, you organize it in a logical and
| | 03:15 | easy to understand way.
| | Collapse this transcript |
| Creating static pages for more info and a contact form| 00:00 | In addition to your portfolio and an
optional blog, you should add a couple of
| | 00:04 | static pages to your site.
| | 00:06 | At a very minimum, you just set up an
About or Bio page with information about
| | 00:10 | yourself and a Contact page that
allows people to get in touch with you.
| | 00:14 | When it comes to the contact page, I
always recommend using the contact form.
| | 00:18 | This solves two problems at the same time.
| | 00:21 | It makes it easy for people to get in
touch with you without having to open an
| | 00:24 | e-mail application and it prevents your
e-mail address from being snooped up by
| | 00:28 | evil spambots with
resulting thousands of spam e-mails.
| | 00:32 | Building these pages is as
easy as publishing posts,
| | 00:34 | you just do it in the pages sections instead.
| | 00:37 | If I go to the Pages section, you see
I've already create an About me page and I
| | 00:43 | can right click on View and open in a
New Tab and you can see that page It's
| | 00:47 | just a picture of me and a short bio.
| | 00:51 | Now I want to create a contact page
as well, but before I do that I have to
| | 00:55 | install a plug-in that will allow me to
create a contact form, so I'll go to
| | 00:59 | Plugins > Add New plugin
then search for contact form 7.
| | 01:06 | Now there are hundreds of contact form
plug-ins available for WordPress, I just
| | 01:10 | like this one because it's easy to use.
| | 01:12 | So I'll Install It > OK and I'll
Activate it and now I get a new tab here in my
| | 01:20 | Admin bar called Contact when
I can create a new contact form.
| | 01:25 | In this case, I want to keep the
default contact form, so all I need to do is
| | 01:29 | copy out this line of code here.
| | 01:31 | This is the line of code that'll insert
the contact form into my page, so I'll
| | 01:35 | highlight it, copy it and then
I'll go to Pages and Add New page.
| | 01:42 | Here I am going to say Contact as the
title and then in the body, I'll say Feel
| | 01:48 | free to contact me about my
photography by filling out the form below.
| | 02:01 | And then I'll paste in that line of
code that I copied out from the contact
| | 02:05 | form and all I have to do now is
simply published a page, you'll notice that
| | 02:09 | pages have no categories, they do
have featured images, but in this case I
| | 02:13 | don't need to use it.
| | 02:15 | So I'll publish my new page, go back to
my front page and you'll see I now have
| | 02:25 | both the Home button and About me
button and a Contact button on my menu, I
| | 02:30 | also have a Sample Page button, so I
should really go back to All Pages and
| | 02:35 | Delete the Sample Page.
| | 02:37 | I'll Reload the front page again and
then when I go to the Contact page,
| | 02:43 | you'll see, you now have my text along
with a form that people can fill out to
| | 02:49 | contact me directly.
| | 02:51 | Creating a limited number of pages with
extra information about your site will
| | 02:55 | make it easy for your visitors to
understand who you are, what the site is about
| | 02:59 | and how to get in touch with you.
| | Collapse this transcript |
| Creating a custom menu| 00:00 | WordPress comes equipped with a
powerful and easy to use custom menu system and
| | 00:05 | most advanced themes support this menu system.
| | 00:07 | For you, that means creating a
custom menu is easier than ever.
| | 00:11 | Let's take a look at the custom menu
system in WordPress and create a basic
| | 00:15 | menu that points to our homepage, our
portfolio, our blog and our about and contact pages.
| | 00:22 | If you don't create a custom menu,
WordPress will automatically create menus for
| | 00:25 | you and those menus
always have the same structure.
| | 00:28 | To start with a link to the homepage and
then they list off every static page in
| | 00:32 | alphabetical order, but if you want to
create a custom menu, you can do that
| | 00:36 | from the dashboard, so I go to my
Dashboard go under Appearance and Menus.
| | 00:42 | From here, I can create one menu or
a set of menus that I can assign to
| | 00:46 | different place on my site.
| | 00:47 | In this case, I just want to make a
header menu, so I'll call it Header Menu and
| | 00:51 | I'll click Create Menu.
| | 00:54 | When the menu is created, I can
assign it to the Theme Location.
| | 00:59 | Now the Theme Locations vary from
theme to theme, so you may have to do this
| | 01:03 | when you activate a new theme.
| | 01:05 | In the 2011 theme that is the default
theme in the WordPress, you have one
| | 01:09 | theme location that's called Primary
Menu, so I use the drop down here and select
| | 01:13 | Header Menu to be displayed in the
Primary Menu area, I'll click Save and now
| | 01:18 | that menu is assigned, but of course this menu is
empty right now, so I need to add some content.
| | 01:23 | If I scroll down, you'll see I can add
Pages and Categories, if I want to and I
| | 01:28 | can also add Custom Links.
| | 01:30 | I want to add all my pages plus the
homepage, so I'll click on View All, so
| | 01:34 | I can see them all.
| | 01:34 | I'll select all three pages click Add
to Menu and the three pages are added.
| | 01:40 | Then I want to add a button for
the blog category, one for portfolio
| | 01:44 | category and have the drop-down display, the
cityscapes, nature and still life categories.
| | 01:49 | First I'll just select all
of them and click Add to Menu.
| | 01:55 | This displays all of them in order,
then I want these three last ones to be
| | 01:59 | sub-items of the portfolio menu, so I
simply grab them and pull them to the side
| | 02:03 | and you see the indent.
| | 02:05 | That way they become drop-down elements.
| | 02:08 | Now I want to reorganize by menu, so I
want it to be first Home, then I want it
| | 02:13 | to be Portfolio, then Blog,
then About me and then Contact.
| | 02:20 | When my menu structure is the way I
want it I click Save Menu, Reload the front
| | 02:26 | page and you see now I have all the
menu items and if I hover over Portfolio, I
| | 02:33 | have the sub-items for each category.
| | 02:36 | Custom Menus are great because they
allow you to experiment with your site and
| | 02:39 | control the display of your
content in a very detailed way.
| | 02:42 | Two things to keep in mind though.
| | 02:44 | Not all themes display the custom
menu at the top of the site and not all
| | 02:48 | themes support the custom menu system
at all, but, if you get a well-built theme
| | 02:53 | the custom menu system will work very
well and help make your site easier to
| | 02:56 | navigate.
| | Collapse this transcript |
|
|
2. Using the Minimatica ThemeInstalling and activating the Minimatica theme| 00:00 | When you create a new WordPress website,
you always start off with the default theme.
| | 00:04 | In this case, the 2011 theme.
| | 00:07 | Although the 2011 theme is great for
bloggers, it's not so great if you want to
| | 00:11 | create a photo portfolio.
| | 00:12 | As you can see when I scroll down on
the front page for example, you are not
| | 00:16 | really seeing the photos showcase,
| | 00:18 | this really is a blog theme.
| | 00:20 | What we need to do is swap out the
2011 theme, for a photo specific theme.
| | 00:26 | If you don't know what a theme is, I
will give you a very short explanation.
| | 00:30 | In WordPress, a theme decides
what your website looks like.
| | 00:34 | You can swap themes around and the content
will automatically adjust to the new themes.
| | 00:39 | So, the website looks like this right
now but we can add a new theme and it will
| | 00:43 | look completely different.
| | 00:45 | Because you want to make a photo
portfolio, we are going to use a
| | 00:47 | photo portfolio theme.
| | 00:49 | So find and add a new theme
from the WordPress theme directory.
| | 00:53 | To do that, I'll go to the Admin
Panel, go under Appearance and Themes.
| | 00:59 | From here, I can either activate
existing themes and by default, I only have two, the
| | 01:03 | Twenty Eleven and the Twenty Ten
theme or I can install new themes.
| | 01:07 | So I will click on Install Themes
and then I can search for a new theme.
| | 01:12 | I already know what I am looking for
here so I will search for Minimatica which
| | 01:16 | is a great photo portfolio theme.
| | 01:18 | Now when I click Search, that's what I get.
| | 01:21 | From here I can either Preview it, I can
look at more Details or in this case, I
| | 01:26 | just want to install it.
| | 01:27 | So I will click Install, confirm the
Installation and WordPress downloads and
| | 01:34 | installs the theme into my site.
| | 01:36 | Now all I have to do is click Activate
and I have activated the theme on my site.
| | 01:43 | Let's take a look at what that looks like.
| | 01:44 | I'll go to the front page
again and just reload the page.
| | 01:51 | Now just to clarify, all I did here
was add a new Theme and activate it.
| | 01:55 | I've done nothing else.
| | 01:57 | This is the same exact website, just
using a different theme to display it.
| | 02:01 | As you can see the minimatica theme
is very photo centric and it has some
| | 02:05 | really cool features.
| | 02:06 | If I hover over to any of these
images, you will see that the image title
| | 02:09 | appears and whatever text I put in and I
can click on it to go to another image.
| | 02:14 | And as I go through this NAV bar,
you will see other images appear.
| | 02:20 | I can also scroll to the four next
images by clicking the scroll button.
| | 02:26 | And that way, I can navigate through my
site and see everything I have uploaded.
| | 02:32 | You can also see I have a menu here
at the bottom, that points to the
| | 02:35 | Homepage and then to my categories.
| | 02:37 | It even gives me a drop up in this case
for the subcategories from my Portfolio item.
| | 02:43 | If I click on any of the posts, I go
to a single page that displays the posts
| | 02:50 | and I can then click on the image
and get the image to pop up in a nice,
| | 02:55 | light box configuration.
| | 02:58 | As you can see, out of the box the
Minimatica theme is a cool and visually
| | 03:02 | stunning photo portfolio theme.
| | 03:04 | Now that you have it installed, we
can start playing around with it to
| | 03:07 | personalize the site.
| | Collapse this transcript |
| Fixing incorrectly sized images with a plug-in| 00:01 | Light most photo portfolio themes for
WordPress, the Minimatica theme uses the
| | 00:05 | featured images function, to
display these images on the front page.
| | 00:10 | The featured images function in
WordPress, it's actually a very advanced
| | 00:12 | function that resizes
images to fit with the theme.
| | 00:16 | And each theme ships with a list
of image sizes it's going to use.
| | 00:20 | The problem is, when we uploaded the
photos to the site, they were uploaded
| | 00:24 | while we were using the Twenty
Eleven theme, which has its set sizes.
| | 00:29 | The minimatica theme uses a
different set of image sizes.
| | 00:32 | So we need to resize all our images
to fit with what minimatica needs.
| | 00:36 | This sounds complicated but as with
most things in WordPress, there's a plug-in
| | 00:41 | created just for this purpose.
| | 00:43 | It's called Regenerate Thumbnails and
all it does is regenerate the thumbnails
| | 00:47 | to fit with the current theme.
| | 00:49 | So we will install this plug-in, go
to Plugins, Add New and search for
| | 00:57 | regenerate thumbnails and we will
install this plugin and Activate it.
| | 01:14 | Once activated, you will find the
Regenerate Thumbnail function under Tools, so
| | 01:18 | we scroll down to Tools, you see we now
have a new button saying Regenerate Thumbnails.
| | 01:23 | And when I click on it, we get to a
single page that allows us to click one
| | 01:27 | button that says Regenerate All Thumbnails.
| | 01:32 | When I do this, WordPress will cycle
through every single photo on the site,
| | 01:36 | create the new versions and the new
sizes of the thumbnails that I need for this
| | 01:40 | current theme, and then
save them into the system.
| | 01:45 | This might take some time
if you have a lot of images.
| | 01:47 | When the process is done, we can go back
to the front page and reload it and you
| | 01:53 | will see that the images
will be cropped differently.
| | 01:57 | It's a subtle difference but
WordPress has now resized images to fit what
| | 02:01 | minimatica is looking for and as a
result for example, when you hover over the
| | 02:05 | picture of the monkey, we see the
entire monkey rather than the image where
| | 02:09 | his head is cut off.
| | 02:11 | The regenerate's thumbnails plug-in
should always be used whenever you switch
| | 02:14 | from one theme to another.
| | 02:16 | That way you know that the current
theme always has the image sizes it's
| | 02:19 | looking for.
| | Collapse this transcript |
| Adjusting Minimatica theme options| 00:00 | Many WordPress themes come with theme
options that allow you some form of customization.
| | 00:05 | In minimatica's case, the
customizations are fairly basic but they serve an
| | 00:10 | important purpose and allow you to
customize the visitor's experience.
| | 00:13 | Before we get into the theme options
though, you may have noticed that on the
| | 00:16 | front page the menu has defaulted
to display only the Home link and then
| | 00:21 | links to the Categories.
| | 00:23 | That doesn't mean custom menus aren't supported.
| | 00:25 | It just means that the name of this
theme area is different from what it was in
| | 00:29 | the Twenty Eleven theme.
| | 00:30 | So if you go to the Dashboard, go under
Appearance and Menus, you will see that
| | 00:35 | we need to assign our menu to
this Primary Navigation area now.
| | 00:39 | So we'll use the drop-down, click
Header Menu, Save and when we now go back and
| | 00:45 | reload the front page, you see we have
the same as it was in our list before.
| | 00:50 | And the portfolio still has
this drop-down or in this case,
| | 00:53 | drop-up functionality.
| | 00:56 | Now let's take a look at the
theme options in minimatica.
| | 00:59 | You will find them in the same place
as the menus, under Appearance, that
| | 01:03 | right here Theme Options.
| | 01:06 | Theme Options will vary from theme to theme.
| | 01:08 | In Minimatica's case, the theme options
have to do with what kind of template is
| | 01:12 | used when different indexes are displayed.
| | 01:15 | Minimatica has two types of templates,
the Gallery template and the Blog template.
| | 01:20 | And from the Minimatica Theme Options,
you can choose which template the Home
| | 01:23 | Page uses, which one the Category View uses,
which one Tags, Author and Archive use.
| | 01:29 | By default, Home Page and Category
View are set to Gallery which is what you
| | 01:33 | see on the front page, whereas Tag view,
Author View and Archive View are set to Blog.
| | 01:39 | Finally, you have the option
of assigning a Blog Category.
| | 01:42 | If you select Blog as the Blog Category
and click Save Changes, we can go to the
| | 01:48 | front page and select Blog and
you'll see the other template.
| | 01:51 | If I click Blog, you will see that blog
items are displayed in a blog like template.
| | 01:57 | It's quite different from the
front page and that's the point.
| | 02:00 | A blog should be displayed as a blog
because it has text content and it's
| | 02:04 | different from the portfolio content.
| | 02:07 | So with that simple change in the Theme
Options, you now have a site where the
| | 02:10 | Portfolio displays one way and the
Blog displays a completely different way.
| | 02:15 | So your visitors will know when
they're in the Portfolio and when they're in
| | 02:18 | the Blog section.
| | Collapse this transcript |
| Configuring the theme header and background| 00:00 | Some WordPress themes come with the
option of changing the header and background
| | 00:04 | to a different color or a different image.
| | 00:07 | This is core WordPress functionality,
theme developers can choose to use or not use.
| | 00:11 | In minimatica both functions are active,
| | 00:14 | but using them requires
some forethought on your part.
| | 00:17 | To customize the header and background
on your site, you go to the Dashboard and
| | 00:22 | under Appearance you'll
find Header and Background.
| | 00:26 | Let's take a look at the Header first.
| | 00:27 | I'll click on it and this
opens the Header Admin page.
| | 00:31 | On this page, you can see a Preview of
what the Header is going to look like,
| | 00:35 | you can Upload an image, you can
choose whether or not to Display the text,
| | 00:39 | And if you want to display
the text, you can set a color.
| | 00:42 | What a lot of people want to do is swap
out the header for an image usually a logo.
| | 00:47 | So let's see what happens if I upload an
image and use that as the header image.
| | 00:50 | I will click on Browse and
I'll upload a header image.
| | 01:01 | Because this header image has the
wrong size to what the theme expects, I'm
| | 01:05 | giving the option to crop my
image down so that it fits.
| | 01:08 | So I will crop this image down, so
that it contains all the text I want to
| | 01:12 | add, click Crop and Publish and then
because I added an image, I should really
| | 01:18 | turn off the text here so I will go down and
say Display Texts, No and click Save Changes.
| | 01:25 | Now you see in the Preview, the text
is gone and you just see the image.
| | 01:30 | And if I go to the front page and
reload it, you will see that I now have this
| | 01:34 | image instead of my text.
| | 01:37 | But here's that thing I was saying, you have
to have some forethought when you use this.
| | 01:41 | You may notice that if I hover over
this image, I can't click on anything.
| | 01:45 | That means I've lost the ability to
click to go back to the Home Page, something
| | 01:49 | a lot of people expect from a website.
| | 01:51 | If you see a logo, you tend to think that
if you click on it, you go to the Home Page.
| | 01:55 | So for minimatica, instead of
uploading a large image that covers the whole
| | 01:59 | space, I suggest you upload a
transparent image with some text over here on the
| | 02:04 | right side and then leave the title as it is.
| | 02:07 | I will show you what I mean.
| | 02:09 | I have created a transparent PNG that
has this exact size, 940x100 pixels.
| | 02:15 | That will ensure that, WordPress doesn't
try to resize it and save it as a JPEG.
| | 02:19 | So I will upload that image instead.
| | 02:26 | You see, it just has this piece of text
and then I will set Display Text to Yes.
| | 02:31 | I will Save Changes again.
| | 02:35 | Sometimes that doesn't work in which case
you have to go and click Yes, one more time.
| | 02:39 | This has to do with the text color.
| | 02:41 | You may have notice previously it said,
pound none but now it says pound 151515.
| | 02:47 | I click Save Changes again and
now I see the text appears and my
| | 02:53 | background image appears.
| | 02:54 | And if I reload my front page now, I
have both the text which I can click on, and
| | 03:01 | the image in the background. That's the header.
| | 03:03 | Now let's look at the background image.
| | 03:06 | In WordPress, you can change the
background to either a set color or you can add
| | 03:10 | an image, that's either stuck to the
left or the right or the center or is
| | 03:15 | tiling throughout the site.
| | 03:17 | This can lead to a very cool look or
it can lead to something that looks
| | 03:21 | absolutely dreadful.
| | 03:22 | It depends entirely on
what kind of image you upload.
| | 03:24 | For example, if I go in, go to the
Background Option under Appearance, in this
| | 03:31 | case I want to upload an image.
| | 03:33 | But like I said, if you use an image
you have to really think about what that
| | 03:36 | image does to your site.
| | 03:37 | I will show you what I mean.
| | 03:39 | This is some pictures of some anemones
that I took at the Vancouver Aquarium.
| | 03:43 | I will click Upload, the image is
uploaded into the site and already in the
| | 03:48 | Preview you can see that this might
end up looking a little bit strange.
| | 03:53 | Before I get there, I will
just show you the options.
| | 03:55 | Now that I've uploaded an image,
I have a bunch of Display Options.
| | 03:58 | I can Position the images
either Left, Center or Right.
| | 04:02 | I can choose No Repeat, Tile
which is what you see here,
| | 04:06 | I can also Tile it only Horizontally
then you get one row horizontal or only
| | 04:11 | Vertically, where you get one row vertically.
| | 04:14 | This is great if you want
to make gradient effects.
| | 04:17 | And you can also Attach it so it is
either Scroll which means as you scroll the
| | 04:20 | page, the image moves with the page or
Fixed, which means the image is stuck and
| | 04:25 | when you scroll the text is
moving but the images are not.
| | 04:28 | So I will set it to the
default which is Tile and Scroll.
| | 04:33 | When I Save Changes and go to the
front page, you will see, this looks a
| | 04:40 | little bit strange.
| | 04:41 | First of all, it's hard to see my
header and my menu and if I go to a single
| | 04:46 | post, you will see that the image is
now taken over pretty much the whole site,
| | 04:52 | which makes it impossible to read.
| | 04:54 | What I need to do is upload an image
that won't interfere with my content.
| | 04:59 | To make this happen, I create
an image that's largely white.
| | 05:02 | So I will go down to Browse again and
find my jellyfish background instead.
| | 05:07 | I will upload this image and then I
will scroll down, align it to Center and
| | 05:15 | click No Repeat so it doesn't repeat.
| | 05:18 | Now when I Save Changes and reload the
page, you will see, I have a background
| | 05:26 | image that kind of jives with the content.
| | 05:29 | We scroll down, you will see that
image appear again and it also fades out so
| | 05:33 | that if the page is long, it
doesn't start over at the bottom.
| | 05:38 | This image also works well with the front
page and everything looks nice and pleasant.
| | 05:42 | As you can see, by customizing the
header and background of your theme, you can
| | 05:47 | get a nice, customized look.
| | 05:49 | Just remember to test your
customizations, to ensure you don't create a site
| | 05:52 | that either looks bizarre or has
content that's impossible to read.
| | Collapse this transcript |
|
|
3. Using the AutoFocus 2.0 LITE ThemeGetting and installing the AutoFocus 2.0 LITE theme| 00:00 | In addition to the WordPress theme
directory, you can also find some great
| | 00:04 | themes on other websites, usually
provided by theme developers that want to bend
| | 00:08 | the frame of WordPress and not adhere
to the strict blog centric guidelines
| | 00:12 | enforced by the WordPress theme directory.
| | 00:15 | These themes come in two
flavors, free and premium.
| | 00:19 | And you will often find that there
are free scaled-down versions of premium
| | 00:22 | themes available, for the frugally minded.
| | 00:25 | The world of premium themes
is one rife with, shall we say,
| | 00:28 | interesting characters.
| | 00:30 | And in many cases, a premium theme is
not more premium than a free one you can
| | 00:34 | find in the WordPress theme directory.
| | 00:37 | There is money to be made here and a
lot of developers cut corners and put a
| | 00:40 | glossy coat on something that really
shouldn't be offered up as a premium for pay product.
| | 00:45 | Even so, there are some exceptions.
| | 00:47 | One of which is the AutoFocus 2 theme.
| | 00:50 | Having finished with the minimatica
theme, let's now turn our focus to the free
| | 00:54 | version of the AutoFocus 2.0 theme.
| | 00:56 | This is a photo portfolio theme
with more of a focus on photo-blogging.
| | 01:00 | Like minimatica, it has a strong
focus on photos, but the experience is
| | 01:04 | completely different.
| | 01:06 | It is also a very solid and well built
theme, which is why I am featuring it here.
| | 01:10 | Because the AutoFocus 2.0 theme is
not featured in the WordPress theme
| | 01:14 | directory, we need to download it onto
our computer first, so we can upload it
| | 01:18 | into our WordPress site.
| | 01:20 | You will find it on the developer website.
| | 01:23 | And here you see that there are two options.
| | 01:25 | You have the for pay option which cost
$25 and you also have the free option
| | 01:30 | which is the one I am going to use here.
| | 01:31 | So if we scroll down, you will find a
list of Features and you can see what is
| | 01:35 | available in the Lite and the Pro version.
| | 01:38 | And then right below, you can download the
Lite version or you can purchase the Full version.
| | 01:43 | I will download the Lite version onto
my computer and once it's downloaded, I
| | 01:54 | will go back to my Dashboard, under
Appearance, select Themes, click on Install
| | 02:01 | Themes and from here I can select Upload.
| | 02:05 | This allows me to upload a
zipped version of any theme.
| | 02:09 | And the file I just downloaded from the
AutoFocus 2.0 website is a zipped format.
| | 02:14 | So I'll Browse, navigate to my
Downloads, find the zipped folder,
| | 02:19 | autofocuslite-2.0.1 and click Install Now.
| | 02:26 | WordPress now uploads the zipped folder,
unpacks it, installs the theme and now
| | 02:31 | we can either Preview,
Activate or Return to Themes page.
| | 02:34 | I am just going to Activate it now
and then we will see what happens.
| | 02:41 | This is our site running the Minimatica
theme and now when I reload it, you'll
| | 02:45 | see the same site running the
Auto Focus2.0 Lite theme instead.
| | 02:49 | As you can see, AutoFocus2.0 theme is
quite different from the minimatica theme.
| | 02:55 | You also see that all
these images are weirdly sized.
| | 02:59 | That's because like with the
minimatica theme, the AutoFocus theme is looking
| | 03:03 | for specific sized images.
| | 03:05 | And because we now have images
sized for minimatica, they don't fit in
| | 03:09 | the AutoFocus theme.
| | 03:11 | So to get all these images to fit
properly, so we don't get these blue bars, I
| | 03:15 | have to back to Dashboard, go into
Tools and click on Regenerates Thumbnails,
| | 03:20 | which is that plugin we downloaded
earlier, and click Regenerate All Thumbnails.
| | 03:25 | WordPress will now again cycle through
all my images, resize them to fit the new
| | 03:31 | theme and save them.
| | 03:34 | When the resizing is complete, I can
go back to my front page, reload it, and
| | 03:39 | you will see, now all my images fit.
| | 03:42 | And I can go to a single post and I
can see what a single post looks like.
| | 03:47 | It has a huge image at the top and then
the text body below, and everything else
| | 03:53 | you'd expect, like Comments and a Browse button.
| | 03:57 | If you trust the developer, getting
a WordPress theme from outside the
| | 04:00 | WordPress theme directory, can provide you with new theme experiences that are quite interesting.
| | 04:05 | The AutoFocus 2.0 theme is
just such a unique experience.
| | 04:09 | And it's quite stunning.
| | 04:10 | Now that we've installed it, it's
time to look at the customization
| | 04:13 | options available to us.
| | Collapse this transcript |
| Adjusting AutoFocus 2.0 LITE theme options| 00:00 | Out-of-the-box the Autofocus 2.0
Lite Theme is already visually stunning,
| | 00:05 | just looking at the front-page we see this theme is quite different from what else is available.
| | 00:09 | It features this disjointed grid
pattern that showcases the featured images
| | 00:14 | for each post, from the top left and down,
and when you add new posts, they appear
| | 00:19 | in this top box and then the other
images shift to the right and down.
| | 00:24 | It also features a lot of
images on the front page.
| | 00:27 | So for photographer, this is a
fantastic way of showcasing the latest work.
| | 00:32 | If we click on any one of these posts,
let say this one for example, we go to a
| | 00:38 | full-page that showcases a large
version of the main image along with some
| | 00:42 | information about the date published,
the author, the categories and so on.
| | 00:47 | The look of the site is great, but you
may want to change some things about it,
| | 00:50 | like for instance the colors.
| | 00:52 | You notice that the main color for
text here is this light gray color and
| | 00:56 | the link color is blue.
| | 00:58 | These along with other things can be
changed from the Theme Options inside the
| | 01:03 | WordPress Dashboard so
let's go there and check it out.
| | 01:05 | If I go to the Dashboard and
under Appearance I find Theme Options.
| | 01:11 | The Autofocus 2.0 Lite Themes comes
with this Theme Options function and it
| | 01:15 | largely has to do with colors
and how the images are displayed.
| | 01:18 | So if I want to change the text color
to a darker gray and also want to change
| | 01:24 | the link color to an orange, I
can do it from right in here.
| | 01:27 | First, I'll change the text color, and
here if I click on it, I can either pick
| | 01:32 | the color with this color picker or
I can set a hex color specifically.
| | 01:37 | In this case I want
333333 which is the dark gray;
| | 01:41 | I can do the same for the link color,
so I'll set this link color to an orange
| | 01:48 | and then I'll Save the page.
| | 01:52 | Now when I go back and reload my page,
you see the text has much darker gray and
| | 01:59 | the links are orange, and if I go to the
front-page, the hover state for each of
| | 02:06 | my images is now orange as well.
| | 02:11 | You can also change the background
color and if you're smart about it, you can
| | 02:14 | actually invert the color
on the entire site here.
| | 02:17 | If I swap the background color to that
dark gray, and then swap the text color
| | 02:23 | to white and save it, when I reload
it, the site will appear inverted.
| | 02:35 | The background is dark
gray and the text is white.
| | 02:40 | There are further options to this theme.
| | 02:42 | If we go back to this Oslo Opera
House image, you see that the image is
| | 02:47 | displayed in this large format, but
because the image is so large, you have to
| | 02:51 | scroll up and down to see the whole image.
| | 02:53 | What if you want to scale this image
so it fits with the screen? There is
| | 02:56 | an option for that.
| | 02:57 | I go to Theme Options and I scroll
down to Image Display here, and here I can
| | 03:02 | pick between Full and Fixed.
| | 03:04 | Full will display the image you uploaded
in the largest version possible as long
| | 03:09 | as it doesn't exceed 800 pixels.
| | 03:11 | Fixed on the other hand will constrain
the image to fit 800x600 pixels, which
| | 03:16 | basically means it'll fit in the
browser window without scrolling.
| | 03:19 | So if I switch to Fixed and Save the
Options, you'll see that my large image
| | 03:26 | here, when I reload it, it scaled
down so it fits in my browser window.
| | 03:31 | You also now see that there is a
background to the image that fills out
| | 03:35 | the remaining space.
| | 03:36 | I can change the background color to
match with the overall background color
| | 03:40 | using the Photo Background Color option here.
| | 03:50 | And when I reload the page, the
backgrounds melt together and we get
| | 03:55 | this seamless view.
| | 03:58 | Scrolling further down, we have a couple
of more options. The Post Title and Date
| | 04:02 | Display relates to the front-page.
| | 04:04 | If I go to the front-page, you see that
by default each Post displays the Post
| | 04:12 | Title, and when I hover the mouse
over it, the Title changes to the Date.
| | 04:17 | I can change this to either display the
Post Date first, and then when I hover
| | 04:22 | over, displays to Post Title, or I can
display the Post Title only, when you
| | 04:27 | hover over or the Post Date
only, when you hover over.
| | 04:29 | So if I pick Post Title only, and Save
Options and Reload the page, you see the
| | 04:38 | Post Titles disappear and you see the
picture without any interference, and only
| | 04:42 | when I hover over the
picture, you see the Title.
| | 04:45 | For a photo portfolio, this is
probably the right option, because now you're
| | 04:48 | showcasing the images undisturbed.
| | 04:54 | At the very bottom you have three more
options the Exif data option allows you
| | 04:58 | to append exif data to the images, this
only works with WP Gallery images and I
| | 05:03 | don't really recommend using it unless
you are showcasing exactly what you're
| | 05:07 | doing in photography.
| | 05:08 | The next option is more
interesting, Info on Author Page.
| | 05:12 | If you go and look at a single post,
you see that down here in the metadata
| | 05:19 | there is a link to me, because I'm the
one that posted this article, and if I
| | 05:23 | click on that link, I get to an index page
that showcases all the posts posted by me.
| | 05:29 | If you have more than one person
posting on your site or if you're featuring
| | 05:32 | more than one photographer, this can be
useful because then people can go in and
| | 05:36 | only see the images or
posts, posted by one person.
| | 05:40 | By default, it only says author
archives and then my name, but if I'm go into
| | 05:45 | the Theme Options and click on Info
on Author Page and Save it and then I
| | 05:51 | reload the page, you'll see now it
displays a Thumbnail of me, my Bio and even
| | 05:57 | a link to e-mail me.
| | 05:59 | All this information is gathered from
my user profile inside WordPress and now
| | 06:04 | I'm display more information about
myself, which means if you have multiple
| | 06:07 | photographers, each photographer can
now have their Bio displayed on the site
| | 06:12 | along with the posts or photos uploaded by them.
| | 06:17 | At the very bottom, you can change the
text in the footer using straight up HTML.
| | 06:21 | If you scroll down to the very bottom of
the page, you see the footer is right here.
| | 06:27 | Right now it says copyright mor10.com,
all right reserved, blah, blah, blah, blah.
| | 06:31 | You can go in here and change that
HTML to anything you like, and it'll
| | 06:36 | display in the footer.
| | 06:37 | One final thing, if we scroll back up
to the top, you see that the menu here
| | 06:42 | has defaulted back to the regular menu, the
home button and the lists of the static pages.
| | 06:49 | To get back to my custom menu, I have
to go to the Dashboard under
| | 06:55 | Appearance>Menus and assign my Header
Menu to the Primary Navigation.
| | 07:05 | Now when I reload the page, I have my
five menu items, and if I hover over
| | 07:10 | portfolio, I have a drop-down
with the three drop-down items.
| | 07:15 | By knowing the Theme Options for your theme,
you're better equipped to build a powerful site.
| | 07:19 | Also keep in mind that in Autofocus 2.0
Lites' case, what you're seeing is just
| | 07:24 | the options for the free version.
| | 07:26 | If you get the Pro version, you get a
whole range of additional options for
| | 07:29 | further customization and personalization.
| | Collapse this transcript |
| Embedding video and setting other post-specific options| 00:00 | Some themes add custom functions
to the Post or Page Edit pages.
| | 00:05 | In the case of Autofocus 2.0 Lite,
you'll find two new fields in the Post
| | 00:09 | page that allow you to provide a
copyright statement for each of the images
| | 00:13 | you upload, and allow you to share embedded
content like YouTube videos in an easy way.
| | 00:18 | Let's look at the Custom
Copyright Statement function first.
| | 00:22 | Let's say I want to add a custom
copyright statement to the image I added about
| | 00:26 | the new Monkey I got.
| | 00:29 | You see that by default when I hover
over the image, there's a copyright
| | 00:32 | statement here at the top.
| | 00:33 | Copyright 2011, Morton
Rand-Hendriksen, All rights reserved.
| | 00:37 | This automatically gets added
when you post a page with an image.
| | 00:40 | What I want to do is go in and change
that so I can release this image under a
| | 00:44 | Creative Commons License.
| | 00:46 | I've already found the
license I want up here, it's called
| | 00:49 | Attribution-Noncommercial 3.0 Unported,
so I'll copy that and then I can go to
| | 00:57 | my post and click Edit Post up here in
WordPress menu, this takes me directly to
| | 01:03 | the Edit Post view, and if I scroll
down, you'll see under AutoFocus Post
| | 01:08 | Options we have this option called Photo Credit.
| | 01:11 | Here I can add some basic text, and I
can also wrap it a link if I want, so I
| | 01:16 | can point back to the source of this text.
| | 01:18 | In this case I just wanted
to add this, and I'll say,
| | 01:21 | CC-Attribution-Noncommercial 3.0 Unported.
| | 01:26 | When I update this post, and then click
View Post, you'll see that when I hover
| | 01:32 | over, we now have CC-
Attribution-Noncommercial 3.0 Unported.
| | 01:37 | You can do this for each of your images
and customize the copyright information
| | 01:41 | so that it matches with the image itself.
| | 01:45 | In addition to custom copyright
information, you can also use an Embed function
| | 01:49 | to simply embed videos
from YouTube or other sources.
| | 01:53 | If I go to the Dashboard, I can
create a new post, and I'll call it
| | 01:58 | Explore California.
| | 02:02 | In this post I want to add a video I found
on YouTube, so I'll just explain it first.
| | 02:14 | And I'll assign a category, so I'll set
the Blog category for now, and then down
| | 02:19 | here under AutoFocus Post
Options, you see Embed URL.
| | 02:22 | Now I can go to YouTube, find the video
I'm looking for, and simply grab the URL
| | 02:27 | for that video, copy it, go into my post
again, and paste it in under Embed URL.
| | 02:36 | I'll publish this post and then go
to my front page, and here you see
| | 02:43 | something really important.
| | 02:45 | When you add a post to AutoFocus, it
automatically gets featured on the front
| | 02:49 | page, but if that post has no
images, you just get a big color box.
| | 02:54 | So you really have to keep in mind that
if you're adding a post using AutoFocus,
| | 02:58 | you either have to add an image, or you
have to add some other information, so
| | 03:03 | that you have something to see.
| | 03:04 | If I hover over the box, you can see
the title, Explore California, and I can
| | 03:08 | follow this to the post, and here you
see the video got automatically embedded.
| | 03:13 | However it's really small.
| | 03:16 | This is because when you install
WordPress it has a default setting for how
| | 03:20 | big embedded videos are.
| | 03:21 | So I need to go change that default.
| | 03:23 | I'll go back into WordPress Admin, go
down to Settings and Media and here you
| | 03:28 | find Embeds > Auto-embed is activated
which means that that function I just used
| | 03:34 | works, and then I can set a
Maximum Embed Size, Width and Height.
| | 03:38 | I'll change the Width of the embed to
800 pixels, because that's how wide the
| | 03:42 | design of the site is, and
then I'll set Height to nothing.
| | 03:45 | That way the embeds will always fit to 800
pixels Wide and however tall they need to be.
| | 03:51 | I'll click Save Changes, reload the page,
and the video will now be 800px wide
| | 04:00 | wide and embedded properly.
| | 04:03 | From here I can play the video--
| | 04:04 | (Video Playing)
| | 04:07 | I can share the video, I can go
directly to YouTube, and we have the title,
| | 04:13 | the texts, and comments, and
everything else we need at the bottom.
| | 04:16 | The AutoFocus 2.0 Lite Theme is quite
advanced, especially for free theme.
| | 04:22 | As you can see, with the embedding
feature you can use distinct include video
| | 04:26 | in your portfolio or your blog and make it
easy for your visitors to access those videos.
| | 04:31 | It's also worth mentioning that this
embed function works not only for YouTube,
| | 04:35 | but for Vimeo and other video channels as well.
| | Collapse this transcript |
| Configuring widgets| 00:00 | AutoFocus 2.0 Lite comes with five
widgetized areas for added customization.
| | 00:05 | Let me take you through them and also
give you some ideas about how to use them
| | 00:09 | in a smart way to get your
visitors to dive deeper into your site.
| | 00:13 | If we go to a single post on the site,
you'll see the regular sidebar here on the side.
| | 00:20 | This top part of the sidebar, the Date,
the Name of the Author, the Category,
| | 00:26 | the Permalink, and Link to
Leave a Comment will always be here.
| | 00:29 | Directly underneath you have the
sidebar, and if we go to Dashboard and under
| | 00:34 | Appearance and Widgets you can see
where you can customize this sidebar.
| | 00:39 | It is right here, Singlular Widget Area,
and from here we can dump in more content.
| | 00:44 | Let's say we want to add Archives to
our categories, so I will add Archives and
| | 00:50 | when it reloads the page, you'll see
Archives appears underneath Categories.
| | 00:56 | We also have four widget areas, and
here we can be creative about what we add,
| | 01:01 | so that when people get to the
bottom of the site, they get links to more
| | 01:03 | information and are more likely to pass
through the site and go to other places.
| | 01:08 | In these four widgetized areas, I want to
add content that people will actually click on.
| | 01:12 | I'll start with the first one,
and in here I'll add Recent Posts.
| | 01:19 | I can customize it by changing the
title and also see how many posts I want to
| | 01:23 | show, but I'll leave it the way it is for now.
| | 01:25 | In the Second Footer Area, I want
to add Recent Comments, same thing.
| | 01:31 | I can customize it or just leave it as it is.
| | 01:35 | In the Third Footer Area, I
want to add a Twitter box.
| | 01:38 | Now I've added a plug-in called
the Wickett Twitter Widget plug-in.
| | 01:42 | All this plug-in does is add
this Twitter Widget to my options.
| | 01:47 | I can pull it in and from here I can
set a name for it, so I'll say Mor10 on
| | 01:53 | Twitter and then I'll set the
Twitter username, which is my username.
| | 01:58 | I want to see five, I want to Hide
replies, I do not want to Include
| | 02:03 | retweets and I'll save it.
| | 02:06 | Finally in the Fourth Area,
I want to add a Text box.
| | 02:10 | In a Text box you can add anything you like.
| | 02:12 | In this case I want to make it easy
for people to contact me, so I'll say
| | 02:16 | Contact Mor10, then I'll write in
some text, and here I can also add HTML.
| | 02:25 | So I'll add a link and this
link goes to the Contact page.
| | 02:31 | I'll give it a title, and I'll close my
anchor tag, and here at the bottom I'll
| | 02:43 | click the Automatically add paragraphs so
that these are two paragraphs and I'll save it.
| | 02:48 | So now I've added four widgets one to
each of the four footer widget areas.
| | 02:54 | Let's take a look at what that looks like.
| | 02:56 | If I go to my page right now and
scroll to the bottom, you see that under
| | 03:00 | Comments we just have the regular footer,
but if I reload the page, we now have
| | 03:05 | four new widgetized areas.
| | 03:07 | We have the Recent Posts,
| | 03:09 | we have Recent Comments, which
currently is empty, because we don't have any
| | 03:12 | comments on the site yet,
| | 03:13 | I have my foremost recent tweets,
and I have Contact Mor10 with a link
| | 03:19 | directly to my Contact page.
| | 03:22 | The four widgetized areas also appear
at the bottom of my front-page, so if I
| | 03:25 | scroll down to the bottom, you'll
see those four areas again down here.
| | 03:29 | By using these wisely, you can create
more navigation information for the people
| | 03:34 | visiting your sites and make it easier
for them to dive further into your site
| | 03:38 | and find further information.
| | 03:40 | The Recent Comments function is
actually very effective, because it allows
| | 03:43 | people to see what's being actively
commented on, on your site, and participate
| | 03:48 | in that discussion.
| | 03:49 | Of course, because this is a new site
there are no comments right now, but as
| | 03:53 | comments come in, they'll appear in this Widget.
| | 03:56 | Widgets can be powerful tools if you move
beyond just dumping in standard content.
| | 04:01 | With some strategic thinking, you can
use the Footer widget in a theme to drive
| | 04:05 | people further into your
site and make them stay longer.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:01 | In this course I've showed you how to
build an advanced Photo Portfolio Website
| | 00:04 | using WordPress starting with a Theme.
| | 00:07 | And as you can see, you don't need to
understand or even build any code to be
| | 00:11 | able to make an advanced
Photo Portfolio Website.
| | 00:14 | We ended up creating one site using the
Minimatica Theme, and then we switched
| | 00:19 | it over to the AutoFocus 2.0 Lite Theme.
| | 00:22 | If you like either of these, I suggest
you go to the website for the developers
| | 00:26 | of these two Themes and
check out further information.
| | 00:29 | For the Minimatica Theme, go to
onedesigns.com, and check out the full
| | 00:34 | article on this Theme.
| | 00:35 | It provides information about how the
Theme works, examples of customization,
| | 00:40 | and also links to support
and further development.
| | 00:43 | If you like the AutoFocus 2.0 Theme,
go to the AutoFocus 2.0 website where
| | 00:48 | you'll see examples of both
the free and the premium Theme.
| | 00:51 | You can find Documentation that can you
download over here, you have a Feature
| | 00:56 | list that shows the difference between
the Lites and the Pro version, there's
| | 00:59 | even a demo video down here on how to add
images and how to use images the right way.
| | 01:04 | And if you click on the View Demo
button, you get a full demo of the Pro
| | 01:08 | version of the Theme.
| | 01:10 | So if you like the free Theme and
you're considering getting the Pro one, you
| | 01:13 | should run this demo first
and check out how it works.
| | 01:17 | Now of course, Minimatica and AutoFocus
2.0 are just two of many photo related
| | 01:23 | Themes available. And if you don't like
either of these or you want to explore
| | 01:26 | further, you can find other photo
related Themes or portfolio Themes, either on
| | 01:31 | the WordPress Theme directory or on Google.
| | 01:33 | If you go to your Dashboard, you can go
to Appearance > Themes, select Install
| | 01:39 | Themes, and then search for either
photography, where you'll find the Minimatica
| | 01:47 | Theme, or you can search for just photo,
or you can even search for portfolio,
| | 01:59 | all of which will return the different
options that can use and experiment with.
| | 02:03 | The cool thing about Themes is that you
can install them, experiment with them,
| | 02:07 | set them up, and if you don't like it
you can always revert back to the Theme
| | 02:10 | you had before and WordPress will
remember all your Theme settings.
| | 02:14 | So you're never in a place where you
have to scrap what you did and start over.
| | 02:18 | Now that you know how to install and
activate Themes on your sites, and how to
| | 02:22 | configure those Themes, you're ready to
start building your own photo portfolio
| | 02:26 | starting with the Theme.
| | Collapse this transcript |
|
|
