IntroductionWelcome| 00:04 | Hi, I'm Morten Rand-Hendriksen and
welcome to Start with a Theme Creative
| | 00:08 | Portfolios in WordPress.
| | 00:10 | In this course I'll walk you
through a step-by-step process to build a
| | 00:14 | Portfolio for creative professionals,
using WordPress in three different
| | 00:18 | attractive Portfolios Themes.
| | 00:21 | We'll start off by setting up a
Portfolio site with WordPress and installing and
| | 00:25 | configuring the Hatch Portfolio
theme from the WordPress theme directory.
| | 00:29 | Then we'll change the look of the
site to Modern Tiling, or Masonry style
| | 00:35 | layout, by downloading and installing
the Gridly theme. And finally, we'll use
| | 00:40 | the Touchfolio theme for unique and very
different look with lots of enhanced functions.
| | 00:46 | Let's get cracking with Start with a
Theme Creative Portfolios in WordPress.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Before you dive headfirst into this course,
there are four things you need to keep in mind.
| | 00:05 | One, if you've never used WordPress
before or you've only used wordpress.com, I
| | 00:10 | urge you to watch my WordPress
Essential Training course, found here in the
| | 00:14 | lynda.com online training library first.
| | 00:17 | Two, to follow this course, you
need a self-hosted WordPress site.
| | 00:22 | The themes featured in these cores
are not available on wordPress.com.
| | 00:26 | Three, we intentionally did not
provide any assets for this course.
| | 00:31 | Instead, I want you to follow
along using your own assets.
| | 00:35 | That way, when you finish, you'll have a
great web site with your own content to
| | 00:40 | show off to the world.
And four, most importantly, have fun.
| | Collapse this transcript |
|
|
1. Setting Up a WordPress Portfolio SiteAdding content| 00:00 | I don't think anyone would argue with
me if I said the most important part of a
| | 00:04 | portfolio is images and content.
| | 00:08 | So before we do anything else it's important
to get some images and content onto to web site.
| | 00:14 | As you can see here, I've added
a bunch of content in advance.
| | 00:17 | The content is split into two categories.
| | 00:19 | We have the blog content, which is
longer articles about different types of
| | 00:24 | works, and you can see we have links to
individual pieces of work here that you
| | 00:29 | can open up and see in more detail.
| | 00:31 | And we also have the portfolio
category, which is where you have the showcase
| | 00:36 | of portfolio contents.
| | 00:38 | This is a simple way of organizing
content in the post landscape of WordPress
| | 00:44 | where you only have posts or pages.
| | 00:47 | So what we're going to do is add one
more blog post and one more portfolio item.
| | 00:51 | So I go up here to the WordPress menu
and just click add New > Posts and first
| | 00:57 | I'm going to add a portfolio item.
| | 00:59 | So I'll go to my document, where
I have all my nice written texts, and
| | 01:04 | I'll find the portfolio item I
want--it's this Paisley image--copy out the
| | 01:08 | text, paste that in, set Paisley as the
title, add the image, which I can find
| | 01:16 | on my computer, and I'm going to go
down and set the title and ultimate texts
| | 01:23 | of the Paisley image.
I'll set it as featured image.
| | 01:27 | Make sure that the Link URL is set to File
URL, and then I'll click Insert into Post.
| | 01:33 | Now this image is pasted into my post,
and because I want to add a little bit
| | 01:38 | of descriptive text here, I'll hit
Enter to go down and then copy out the
| | 01:43 | descriptive text and paste that in.
| | 01:47 | And then I'll set this
under the Portfolio category.
| | 01:49 | I'll scroll down just to make sure I have a
featured image, and then I'll click Publish.
| | 01:55 | I also want to add a blog post that
has multiple images so again I will go
| | 02:00 | click Add New up here.
| | 02:02 | I'll find my blog article, then in this demo
content that's right down here, under Birds.
| | 02:08 | Set the title to Birds, and
I'll find all the bird images.
| | 02:13 | So I will go Select Files on a
desktop find For Blog > Birds.
| | 02:20 | I'll select all three images, let them
all upload, and then I'll open each of them
| | 02:26 | and give them a title.
| | 02:27 | So I'll say, Birds by Destiny Willow Brown,
and I'll just give all these images the same title.
| | 02:38 | Again, I'll make sure that the Link
URL is set to the correct image, and I'll go
| | 02:43 | down here, and just set the title and the
final image set the title and Alternate Text.
| | 02:52 | And then instead of clicking
Insert Into Posts for these images, I'm going to
| | 02:56 | click save all changes at the very bottom here.
| | 02:58 | This will save all that information and
takes me directly to the Gallery option.
| | 03:03 | From Gallery I can insert a
gallery of thumbnails of these images.
| | 03:07 | So I set it to Link to the Image File
for the gallery so they can pop-up, and
| | 03:12 | I wanted to display according to the Menu
order in Ascending with 3 Gallery columns.
| | 03:16 | So I'll click Insert gallery, and here
you have the gallery--or what will become
| | 03:21 | the gallery--and then we can go and
copy out the text, go to the bottom, and
| | 03:27 | I'll use the advanced paste as
plaintext function to paste it in.
| | 03:31 | Paste it in and set the
category to Blog and click Publish.
| | 03:39 | When I now jump to my front page
you'll see we have Birds, which is the Blog
| | 03:43 | category, and we have Paisley, which is
the Portfolio category. And if I want to
| | 03:49 | add specific buttons to that the menu
I'll go up to the WordPress toolbar, go to
| | 03:54 | Menus, I'll create a new menu called
Main menu, click Create Menu, and under
| | 04:02 | Categories I'll select Portfolio
and Blog and add them onto my menu
| | 04:07 | so now we have Portfolio and Blog.
| | 04:08 | I'll save the menu and assign Main menu
to the Primary Menu area, and now when
| | 04:15 | you go back to the front page.
| | 04:17 | You'll see we have Portfolio or Blog,
and if you click Portfolio, you see just
| | 04:22 | Portfolio items and likewise if we
click Blog, we see only the blog items.
| | 04:29 | That's how easy it is to
populate your portfolio.
| | Collapse this transcript |
| Setting up an About page and a contact form| 00:00 | Now we have a site full of portfolio
content and blog content, but there is two
| | 00:05 | things that are missing that are very
important for this to become full-fledged
| | 00:09 | portfolio site, it's the about page
with information about the artist, and it's
| | 00:14 | the contact page that makes it easy for
people who find this content to be able
| | 00:18 | to contact the artist.
So let's make those two.
| | 00:21 | First I'll go to WordPress toolbar,
click on New and Page to create the about
| | 00:27 | page, and just like the Blog page, this is
simply a matter filling out of content.
| | 00:33 | So I'll go to my document and find
information about the artist that I want.
| | 00:37 | So I'll grab her name, and
then I'll say Artist Bio, colon,
| | 00:43 | and then the name of the artist.
| | 00:46 | I do this so that the name is upfront
and center and Google and other search
| | 00:50 | engines will index the title with the
artist name in it. And then I'll go grab
| | 00:56 | the actual content, copy it, and I'll
use the advanced Paste as Plain Text
| | 01:03 | function to paste it in, just to make
sure there's no formatting that I don't want.
| | 01:06 | And then I'll attach an
image of the artist at the very top.
| | 01:11 | So I create a new line, go to Upload/Insert
and on my Desktop I have an image of
| | 01:17 | artist that I want to use.
| | 01:19 | So I'll upload the image, and here I'll
plug in the name of artist as both the
| | 01:27 | Title and Alternate Text, so that if anyone
searches for the artist they'll see this image.
| | 01:32 | And I will take the Link and set it to
None, display it in the Center and in
| | 01:38 | Full Size, then click Insert into Post.
| | 01:40 | So now we have a simple page with an
image of the artist along with a short
| | 01:45 | bio that I can publish.
| | 01:48 | In addition to the Artist's Bio
I also want to add contact page.
| | 01:52 | But instead of adding a page with just a
phone number or something on it, I want
| | 01:56 | to add a contact page that has a contact form.
So first I'm going to add a plugin.
| | 02:01 | So I go to Plugins > Add New and
search for a contact form 7, click Search
| | 02:08 | Plugins, and I'll install Contact Form 7.
Activate the Plugin, and then you see
| | 02:17 | a new option appears here on the side
menu. So I'll click on that option and
| | 02:22 | here we have a contact form already
created for us, and a short code, so I'll
| | 02:26 | grab that short code, copy it.
| | 02:29 | Then I'll go to New > Create a new Page,
Contact me, and simply paste that short
| | 02:38 | code in, it's all I'm going to do.
| | 02:41 | Click Publish again, and
then I'll go to the front page.
| | 02:46 | Now because I already have a custom menu
here, you'll see we don't have links to
| | 02:50 | those new pages yet.
So we need to add them to the menu.
| | 02:53 | So I go back to the back end, go under
Appearance and Menus, and scroll down, where
| | 03:00 | I find both Contact me and Artist Bio,
so I click those two to add to the menu.
| | 03:06 | And then I'll place Contact me at the
end just because that's the normal way of
| | 03:10 | doing it, save the menu, go back
to the front page to reload it.
| | 03:17 | We now have Portfolio, Blog, Artist
Bio, and Contact me. And if I click on
| | 03:22 | Artist Bio, we get the page about the
artist, and if I click on Contact me, we
| | 03:29 | get a nice contact form where you can
fill out your information and send it
| | 03:33 | directly to the artist.
| | 03:35 | Now we have all the basic
components of a portfolio site.
| | 03:38 | The next step is to use a theme to
make the portfolio site look appealing to
| | 03:42 | the people who find it.
| | Collapse this transcript |
| Understanding what a theme is and how it works| 00:00 | WordPress works by separating style from
content. By that I mean, when you could
| | 00:06 | content into WordPress, let's say
images or text or even settings of WordPress
| | 00:11 | in general, you're actually
putting entries into a database.
| | 00:15 | How that information is displayed on a
web site though is controlled by the theme.
| | 00:20 | The theme that defines the colors, the
layouts, the fonts, and everything else
| | 00:27 | you see on the site.
| | 00:28 | What that mean is, if you want to change
the look of your site, all you have to do
| | 00:33 | is change that site's theme.
| | 00:36 | By default when you install
WordPress, you have two themes.
| | 00:40 | If you go to the back end, and go to
Themes, you can either get there from
| | 00:46 | WordPress Toolbar or you can go to
back end and go to Appearance and Themes,
| | 00:50 | you'll see we've Twenty Eleven theme,
and we also one called Twenty Ten.
| | 00:54 | These are stock themes that come
with every WordPress Installation.
| | 00:58 | You can also go to the Free Themes
Directory on wordpress.org and download other
| | 01:04 | themes to make your site
look completely different.
| | 01:07 | Or you can even create your own themes
to make your site look entirely different
| | 01:12 | from every other site.
| | 01:13 | If you look at my blog, Design is
Philosophy--and you really should look at my
| | 01:18 | blog because there's lots of
interesting information you can use there.
| | 01:21 | You'll see that this looks now things
like the default Twenty Eleven theme, but
| | 01:26 | it's still WordPress, and if I wanted
to, I could simply with a couple clicks
| | 01:29 | switch back to Twenty Eleven.
| | 01:32 | Or you could go to an artist Portfolio
site, like this one, for the Director
| | 01:36 | of Photography named Philip Lanyon,
looks completely different, but again,
| | 01:40 | this is just WordPress.
| | 01:41 | What I'm trying to communicate to you
is that what your site looks like has
| | 01:47 | nothing to do with the content, it has
to deal with what theme you're using.
| | 01:51 | In this course, we're going to look at
how we can use some different themes to
| | 01:55 | take your content and make
it look more like a Portfolio.
| | Collapse this transcript |
|
|
2. Using HatchInstalling and activating Hatch| 00:00 | The first theme we'll take a look at
is called Hatch, and it's available from
| | 00:04 | the wordpress.org Free Themes Directory.
| | 00:06 | That means we can even install
that inside our WordPress site without
| | 00:10 | downloading or uploading anything.
| | 00:12 | If you go to your site, you can get to
the Theme Installer either by going to
| | 00:17 | your WordPress Toolbar and
selecting Themes, or by going to the
| | 00:21 | Dashboard and going to Appearance and Themes.
| | 00:26 | From here you click the Install
Themes tab, and then you make a Search for
| | 00:30 | the theme you want.
| | 00:31 | It's called Hatch so
that's what we will search for.
| | 00:33 | And here you see Hatch
shows up and we can install it.
| | 00:37 | If you want to, you can click on
Details to get more Details about the theme,
| | 00:41 | and you can also Preview it, but I
already know what I want this theme, so I am
| | 00:46 | going to click Install Now.
| | 00:47 | And WordPress now goes out to the Theme
Directory, downloads the file, unpacks
| | 00:51 | it, and installs the theme onto my Server.
| | 00:54 | Now all I have to do is either
activate it or run the live preview because I
| | 00:59 | want to make sure that this
is going to work properly.
| | 01:01 | I'm going to go Live Preview so
that I see the theme in action without
| | 01:05 | having activated it.
| | 01:07 | You can see here that it works the way I
want it to, and you can already see why
| | 01:12 | I want to used this theme as a Portfolio theme.
| | 01:14 | And because I like it, I am
going to click Save and Activate.
| | 01:18 | Now we can go to the front page
of our site and already without any
| | 01:22 | customization we now have a Portfolio theme.
| | 01:25 | You can click on a post, you jump
directly to the post, and you see this is a
| | 01:30 | very attractive Theme
with some very nice features.
| | Collapse this transcript |
| Configuring the theme's header, menu, and background| 00:00 | Well-built WordPress themes come with
customization options that allow you to
| | 00:05 | change the look of the theme, for
instance, by changing colors or changing
| | 00:09 | images or other elements.
| | 00:11 | In the Hatch theme many of these
functions are available through the new theme
| | 00:15 | customizer that comes with WordPress 3.4.
| | 00:18 | So let's use some of those
features to change the site.
| | 00:22 | To get to the Theme Customizer you can
either go to the WordPress toolbar and
| | 00:26 | select Customize or you can go to
Dashboard > Appearance > Themes and select
| | 00:33 | Customize under the Current Active Theme.
| | 00:36 | Inside the Theme Customizer we can make
changes to many different elements on the site.
| | 00:41 | We can change this site Title & Tag
Line, we can change Colors, Header Image,
| | 00:44 | Background Image, and so on and so forth.
| | 00:47 | The first thing I want to do is to
replace the default header Image with
| | 00:51 | an image of my artist.
| | 00:54 | Now this box is 640 pixels wide, and 360
pixels tall. And I already created an image
| | 01:00 | that I think will fit.
| | 01:01 | So all I need to do is
upload it and put it in there.
| | 01:04 | So I am going to header image, click the
dropdown, select file, and go and pick the
| | 01:10 | image I created, and upload it.
| | 01:13 | When the image is uploaded it
automatically appears in this area, and I can see
| | 01:17 | what it looks like, and I
think it looks quite good.
| | 01:20 | When I scroll down I notice that many of
my images have a white background that
| | 01:25 | melts in with the white background of the site.
| | 01:27 | So I want to change the background
color ever so slightly so that these
| | 01:31 | images don't blend in.
| | 01:33 | So I'll go to Colors, select the
Background Color, and use the color wheel to
| | 01:37 | experiment with some different colors.
Let's say I want to use a gray here.
| | 01:42 | I'll scroll up and see if it
works, and it looks like it does.
| | 01:45 | I am going to be safe and use a very light gray.
| | 01:48 | So I'll go this gray here, and it
looks okay except for that image I just
| | 01:54 | uploaded because now these white
cross hatches look kind of strange.
| | 01:57 | So I am going to collapse the colors and go
back to Header Image and select a different file.
| | 02:04 | So I will pick this one instead,
immediately I see that this looks a lot better,
| | 02:09 | and I'm happy with it.
| | 02:11 | The final thing I want to do is add
a menu. Because I know that there is
| | 02:15 | supposed to be a menu here,
but it's not currently active.
| | 02:17 | At the very bottom we have Navigation,
and here we can select what custom menu
| | 02:22 | that we've setup in WordPress that we want
to display in a different Navigation area.
| | 02:27 | In this case I want to display the Main menu.
| | 02:28 | So when I select that you'll see that
the Main menu appears here at the top.
| | 02:33 | So all I have to do now is click Save & Publish,
and when I close it and go back
| | 02:39 | to my front page, you will our site
looks dramatically different from what it
| | 02:43 | did just a few minutes ago, simply by
changing the background color, adding a
| | 02:47 | header image, and adding the menu.
| | Collapse this transcript |
| Configuring theme options| 00:00 | Many custom themes come with Theme
Settings or Options that go beyond the
| | 00:05 | standard WordPress customization
functions, like menus and background colors, to
| | 00:09 | add extra features to
the site you can customize.
| | 00:12 | In the case of Hatch, you have a
limited set of extra settings you can use to
| | 00:16 | further customize the site.
| | 00:18 | You find these by going to the back end,
so we go to the Dashboard, and under
| | 00:23 | Appearance you'll find Theme Settings.
| | 00:27 | Here you have a small Theme Settings panel
you can use to make some changes to your site.
| | 00:32 | Off the top you have the Favicon, which
is that little icon that usually appears
| | 00:36 | up here in the Tab when
you go to a specific site.
| | 00:40 | I don't currently have one for this
site, I'm going to leave it alone.
| | 00:44 | But if you want to, you can add a
Favicon of your own right here by loading it.
| | 00:48 | You can also upload a Logo.
| | 00:50 | Let's go to front page to take a look
at it first, and you see that by default
| | 00:55 | you just have regular text.
| | 00:57 | But if I go in here and upload a
Logo, in this case, I am going to upload a
| | 01:03 | transparent PNG logo that I created.
| | 01:06 | I upload it, and I upload it in Full Size,
and it has to be under 200 pixels wide.
| | 01:12 | I click Use this Image.
| | 01:14 | And I can scroll down and update the
Settings, and on the front page you'll see
| | 01:20 | that now we have that Logo instead of the text.
| | 01:24 | Still works the same way, but it's now a
graphic logo instead of regular text.
| | 01:30 | I can also make other changes.
I can change the Font family.
| | 01:33 | There is a couple of different
options here you can choose from.
| | 01:36 | So for instance you can set it to Georgia.
| | 01:39 | You can also set the Font size, this is
the base font size, so if you change the
| | 01:44 | Font size here you'll pretty much
change fonts across the entire site.
| | 01:47 | And you can change the Link color.
| | 01:49 | So for instance I want this to be a dark
gray instead, so I'll set it to #333333.
| | 01:57 | And you can even add Custom CSS if you
want to, this is a fairly advanced option
| | 02:01 | for people who already know
Cascading Style Sheets Code.
| | 02:05 | But if you really want to, and you
have some small pieces of style code you
| | 02:09 | want to add into the theme, and you
don't want to create a child theme, this is
| | 02:13 | the place to do it.
| | 02:14 | I'll save this color
setting, along with a Font setting.
| | 02:17 | Maybe I'll change to Font size to
17, and then click Update Settings.
| | 02:24 | And when I go back to my site, you'll
see that the Font changed to Georgia,
| | 02:29 | the Links are now dark gray, and the Font is
ever so slightly larger than it was before.
| | 02:35 | Last but not least, at the very
bottom you can change the Footer Settings.
| | 02:39 | If you look at the site you'll see
that in the Footer it says Copyright 2012
| | 02:44 | Destiny Willow Brown, which is the name
of the site, that also links back to the
| | 02:48 | site, and it also says
Powered by WordPress and Hatch.
| | 02:52 | If you look here, you'll see it says
Copyright, the year, site link, and then
| | 02:57 | Powered by WordPress link and theme link.
| | 03:00 | So if you want to you can go in
here and change this text to pretty
| | 03:04 | much anything you want.
| | 03:05 | You could say Powered by, and then
copy site link, and then you would say
| | 03:11 | Powered by, and then the name of your
site, coma, WordPress, and the theme link.
| | 03:15 | Or you can even take the Theme
link out, if you don't want to have it
| | 03:20 | there, or take WordPress out.
| | 03:21 | So if I wanted to just say Powered by
the artist, and the theme, I'll change it.
| | 03:25 | So it says Powered by site-link and
theme-link, Update Settings, reload the
| | 03:32 | page, and you see it now says
Powered by Destiny Willow Brown and Hatch.
| | Collapse this transcript |
| Things to keep in mind when using the Hatch theme| 00:00 | Whenever you switch to a new theme,
it's a good idea to go through all the
| | 00:04 | features in the theme to find out where
the caveats are and also how to use the
| | 00:08 | theme to its full potential.
| | 00:10 | You may remember in the very beginning
when I was talking about those themes,
| | 00:14 | I said, it was possible to the put text
next to the header image on the front page.
| | 00:18 | Well, it is, but it's a little bit
hard to find where it is because it's
| | 00:22 | a little bit strange.
| | 00:23 | To get the text there, you have to
go to the Dashboard, go to Users, and
| | 00:29 | Edit Your own Profile.
| | 00:30 | At the bottom here you have the
Biographical Information for the different
| | 00:35 | users, and if we go to the About page
of the site and grab some of this text
| | 00:43 | here and copy it--I'll just paste it
right in and update the profile--you'll
| | 00:50 | see that when we go back to the front page,
that text appears here on the front page.
| | 00:55 | This is weird because it's not the
usual place you'd put that information, and
| | 00:59 | it also means that you can't really
have multiple authors using this theme
| | 01:04 | because then you might have different
types of information show up in this box.
| | 01:09 | There are also some other interesting quarks.
| | 01:11 | For example, if I go to the Portfolio
here, and I go to one of my stories,
| | 01:16 | you'll see that as we scroll down,
here we have the large image, and then
| | 01:20 | we have the image again, that's
because this theme uses the featured image
| | 01:26 | as a featured image.
| | 01:28 | It also means that whenever there's a
featured image, they also have in the
| | 01:31 | post, the image will appear twice.
| | 01:34 | To get rid of this, we have
to go back to edit the post.
| | 01:37 | We can do that from right here, and then
simply remove the image from the post itself.
| | 01:42 | And remember, that image is still here under
Featured Image, it just isn't under the Post.
| | 01:47 | When I click Update and ViewPost, you'll
see now we have the image here, when we
| | 01:54 | scroll down, we get the text from
the Post, so this makes way more sense.
| | 01:59 | It does mean that you have to do
this for all your different posts, if you
| | 02:02 | chose to put those images in.
| | 02:05 | It also means though, that if you go to
the Blog section, where you have both
| | 02:10 | large images and the gallery, you'll
see the large image, which is the featured
| | 02:14 | image, and then you'll also
see the links to the galleries.
| | 02:18 | And here is a really cool
built-in feature in Hatch.
| | 02:21 | Hatch comes with a Lightbox, that
means if you click on a thumbnail it pops
| | 02:27 | up in a Lightbox like this, and you can
navigate between the different images on the page.
| | 02:31 | It's a cool little hidden feature that you
would normally have to add using a plug-in.
| | 02:37 | The final little bit of advice is that
if you go to your page, you'll notice
| | 02:40 | that we have a sidebar.
| | 02:42 | So you may want to go check out what
widgets you currently have in the sidebar,
| | 02:47 | by going to the back end and going to
Appearance > Widgets, and then place
| | 02:52 | widgets in the sidebar that makes
sense for these different pages.
| | 02:57 | You have three different areas.
| | 02:58 | You have the Primary,
which is what you see here.
| | 03:01 | You also have a Subsidiary, which
appears directly underneath, and you have a
| | 03:05 | Special Widgetized area where you
can place widgets that will only appear
| | 03:10 | after single posts.
| | 03:12 | By understanding the advantages and
disadvantages to different themes, you
| | 03:16 | will be able to use them
to their full capability.
| | 03:19 | Now that you see what you can do with
Hatch, play around with it and see what
| | 03:23 | you can do to make it your own.
| | Collapse this transcript |
|
|
3. Using GridlyGetting and installing Gridly| 00:00 | In addition to the WordPress Theme
Directory, you can also find some great
| | 00:04 | themes on other websites.
| | 00:05 | They're usually published by people
who don't want to adhere to the strict
| | 00:09 | rules of the WordPress Theme Directory,
or who for some other reason don't want
| | 00:13 | to post their themes there.
| | 00:15 | Not all the themes you find on the web
are themes you should install on your
| | 00:19 | site, but there are some really good ones.
| | 00:22 | One example of a great theme is
one called Gridly by Eleven Themes.
| | 00:27 | You can see the preview here, it has
what's called a Masonry layout which is
| | 00:31 | these boxes that flow left to
right and reorganize downwards.
| | 00:36 | And if we go and look at a Demo, you'll
see that as I resize this screen, these
| | 00:42 | boxes of content will flow to fit to the screen.
| | 00:47 | Because Gridly is not available in the
WordPress Theme Directory, we have to
| | 00:51 | download this theme manually and then
upload it to WordPress to make it work.
| | 00:56 | So let's first download the theme.
| | 00:59 | And if you want to, you can tweet about it,
or post it on Facebook that you're using it.
| | 01:04 | And then once it's downloaded onto your
computer, instead of going and unpacking
| | 01:07 | it and placing it on your computer.
Simply go back to your site, go to the
| | 01:12 | Dashboard, go to Appearance and
Themes, and then Install Themes.
| | 01:18 | And here you can choose to either
search for a theme or you can upload a theme.
| | 01:22 | So here I'm going to go and choose
that file that we've just downloaded.
| | 01:27 | It's under Downloads, and I want to
upload the zip folder the way it was
| | 01:31 | downloaded, so I'm not doing anything to it.
| | 01:33 | I'll click Open and click Install Now,
and once it's uploaded WordPress will do
| | 01:39 | the same thing it does for the themes
that come from the Theme Directory, it
| | 01:43 | Unpacks the package, Installs the theme,
and then allows you to try to do a Live
| | 01:47 | Preview or Activate it.
| | 01:49 | Do a Live Preview just so you know
that it works. And here you can already see
| | 01:54 | that Masonry layout takes shape.
| | 01:56 | And I like what I'm seeing so I'm
simply going to go Save & Activate.
| | 02:02 | And when I now go to my
front page, Gridly is running.
| | 02:05 | Now you can clearly see that
there are some things we need to do.
| | 02:08 | For example, the start of the site says
Gridly and not the name of the site, but
| | 02:13 | we'll address that later.
| | Collapse this transcript |
| Fixing incorrectly sized images with a plug-in| 00:00 | After installing the Gridly theme,
everything seems to be working quite well.
| | 00:05 | As you can see, the Masonry layout on
the front page already kicks in, and we
| | 00:09 | even see the little
preview images of each post.
| | 00:12 | However, if you look a little bit
behind the scenes--by using something like the
| | 00:16 | Theme Developer tools in Chrome. So
I'll select an image here and then click on
| | 00:21 | Inspect element, you'll see that although this
image is displayed as 310 pixels x 310 pixels.
| | 00:27 | The actual image is 500 x 500.
| | 00:31 | That's because the theme is grabbing
the original image and displaying it
| | 00:35 | because we haven't given the
theme the proper size image.
| | 00:40 | You may be wondering why that's an issue.
| | 00:43 | Well, if you had a much larger image say
one that was 1200 x 1200, or 2400 x 2400 pixels.
| | 00:49 | this theme would grab that
huge image and then crush it down to fit
| | 00:54 | inside that little box.
| | 00:55 | What we want to do is go into
WordPress and get WordPress to generate images
| | 01:01 | that actually fit these boxes, and the
theme already wants to use those images,
| | 01:06 | all we need to do is generate them,
and then they'll automatically be used.
| | 01:10 | To do that we're going to use a plugin that
regenerates the thumbnails for each image.
| | 01:15 | So I'll go into my back end to Plugins
and Add New plugin, then I'll search for
| | 01:21 | regenerate thumbnails and here we
have the Regenerate Thumbnails plugin.
| | 01:28 | I'll Install it, Activate the plugin, and then
I'll go to Tools and select Regenerate Thumbnails.
| | 01:39 | When you click on this Regenerate All
Thumbnails button, the plug-in will go
| | 01:43 | through each of the
images uploaded to WordPress.
| | 01:46 | Check with the theme to see what sizes
of images the theme wants and then create
| | 01:51 | thumbnails that match those sizes.
| | 01:53 | That means as you switch themes, you
need to run this plugin again and again and
| | 01:57 | again because different
themes use different size images.
| | 02:00 | Once the process is complete, we can go
back to the front page, right-click on
| | 02:06 | the same image again, then click on
Inspect element, and you'll see that now the
| | 02:11 | image is displayed as 310 x 310, and
the actual image is also 310 x 310.
| | Collapse this transcript |
| Exploring Gridly theme options| 00:00 | Most well-built custom themes come with
some extra features to further customize
| | 00:05 | the site, Gridly is no different.
| | 00:08 | However, as of this recording, the
developer has not yet hooked into the new
| | 00:12 | Theme Customizer option
that came with WordPress 3.4.
| | 00:16 | So, to access the theme customization options for
Gridly, we have to go to the back end of the site.
| | 00:22 | I'll go to my Dashboard, go to
Appearance, and here you find Gridly Options.
| | 00:28 | The Gridly Options are not all that extensive;
| | 00:31 | however, they do make a big
difference when you use them.
| | 00:36 | Off the top you have the Logo, and
if we go to the front page, you'll see
| | 00:40 | that when you first installed Gridly,
you used a Gridly logo for your site
| | 00:44 | which is not a good idea, because that's not
what the site is. You need to have your own logo.
| | 00:50 | So the first thing we're
going to do is swap out that logo.
| | 00:53 | I've already created a logo.
It's a transparent PNG file.
| | 00:56 | So I'm going to go find that and
select it and click Save Changes.
| | 01:01 | The file is uploaded, I see the
preview here directly under the Choose File
| | 01:05 | button, and when I now go back to my
front page and reload it, I have my own logo.
| | 01:12 | The next option is a Color Scheme.
| | 01:14 | You're served with three different
options here, you have light, dark and custom.
| | 01:18 | I'm going to show you what the dark option
looks like. Save Changes and reload the page.
| | 01:23 | And you see all that really
happens is the background changes to the
| | 01:28 | dark color, the menu changes from a
dark to a light color, and the widgets here
| | 01:34 | at the bottom change.
| | 01:36 | You also notice that with the dark
background, my logo doesn't look quite right.
| | 01:40 | So if you're going to use the dark
background, you have to customize your logo
| | 01:44 | to fit with a dark background.
| | 01:45 | I'm going to switch it back to light,
Save Changes, and then I want to show you
| | 01:52 | what this Responsive Layout button does.
So let's first look at the front page.
| | 01:56 | I'll reload, so we get the light Color Scheme.
Gridly is a responsive theme.
| | 02:01 | A responsive theme responds to the size
of the window, and that's important because
| | 02:06 | if someone accesses the site using a
cell phone or a tablet, you don't want them
| | 02:11 | to have to scroll left and
right as they look at the content.
| | 02:14 | If I resize this window, you'll
see what I mean by responsive.
| | 02:19 | As I resize the window, the content
reorganizes, and if I go to single
| | 02:24 | post, you'll see that as I resize the window,
the content changes to fit with the window.
| | 02:32 | However, if I go back to Gridly
Options and turn Responsive Layout off, Save
| | 02:38 | Changes, in the single views when I reload, you'll
see that this window is no longer responsive.
| | 02:45 | There are different reasons why you
may want to do this, for example, if you
| | 02:49 | don't want WordPress to automatically
resize images, you might not want to have
| | 02:54 | the Responsive Option on, but even if
you turn the Responsive Option off, your
| | 02:59 | front page and your index pages will still
be responsive because of this masonry layout.
| | 03:04 | So, although you have the option of
setting Responsive Layout to no, I strongly
| | 03:10 | suggest you leave it at yes, simply
because the web should be responsive.
| | Collapse this transcript |
| Basic theme customization| 00:00 | In spite of appearances, Gridly is
actually a pretty standard WordPress theme,
| | 00:05 | so it has some standard theme
options, but not all that many.
| | 00:09 | The two main elements you need to keep
track of is the menu right here at the
| | 00:14 | top and the footer widgets at the bottom.
| | 00:16 | These are both controlled the standard
way you would control menus and widgets.
| | 00:21 | If we go to the Theme Customizer, you
can select what menu you want to display
| | 00:27 | in the main menu area, because this is
used in proper WordPress menus, so we
| | 00:31 | can go Navigation here and select for
instance our Main Menu that allows us to
| | 00:37 | have the Portfolio, Blog, Artist Bio, and
Contact me buttons. I'll save and publish that.
| | 00:43 | And to customize the widgets, you have
to go to the Dashboard and to Widgets, or
| | 00:50 | I can just go to the WordPress
toolbar and go to Widgets directly.
| | 00:53 | Now from here, you have one widgetized area where
you can drag and drop whatever widgets you want.
| | 00:59 | As you make changes to the widget area,
you'll notice that the widgets are
| | 01:04 | reduced, so now we have just Search,
Recent Posts, Recent Comments, and
| | 01:08 | Categories, but the way this theme is
built as these lists become longer, the
| | 01:14 | widgets will start stacking next to one
another or on top of one another here on the site.
| | 01:19 | The standard WordPress customization
options are fairly basic, but they're
| | 01:23 | important to keep in mind, so you
don't end up with things on the bottom of
| | 01:27 | your site you don't want and most
importantly, so you end up with a menu you
| | 01:30 | want up here at the top.
| | Collapse this transcript |
| Things to keep in mind when using the Gridly theme| 00:00 | Like with all other themes, when you
activate a new theme it's important to
| | 00:05 | learn all the pros and cons of that theme so
you know how it works, Gridly is no different.
| | 00:10 | There are few things that you need
to keep in mind when you use Gridly.
| | 00:14 | First of all, Gridly expects that
you use featured images all the time.
| | 00:18 | You'll notice that here at the top this
Birds post just says Birds and then View
| | 00:23 | more, that's because I didn't add a
featured image to it, so it looks quite
| | 00:28 | different from all these other
posts that start with an image.
| | 00:31 | To activate an image, I go to my post,
and you see here that the post actually
| | 00:36 | has images already built-in.
| | 00:39 | To get the featured image in, I have
to go to Edit Post, scroll down, go to
| | 00:46 | Featured Image, and from here I can
either select one of the images I already
| | 00:50 | have in the post, or I can
upload a new Featured Image.
| | 00:53 | I'm going to select one of these and
click Use as featured image. You see the
| | 01:00 | featured image appear down here,
and when I update this and go back to my
| | 01:06 | front page, you see now we have the image.
However, there is one more important thing.
| | 01:12 | If I go to any of these Portfolio
posts, you'll see that just as with the
| | 01:16 | Hatch theme when you have a featured
image that featured image is featured on
| | 01:20 | top, meaning if you also have the image
inside your post, that image is featured twice.
| | 01:26 | So like with the Hatch theme, if
you're going to use the Gridly theme, I urge
| | 01:30 | you to either have a featured image or
have the feature in the post, not both
| | 01:36 | because then people just see the
same thing over and over again.
| | 01:39 | And there's one last thing about these
images, they're expected to be very wide.
| | 01:43 | They're almost 800 pixels wide.
| | 01:45 | What happens if you don't have an
image that's big enough is you go into the
| | 01:50 | post, and you'll see it
doesn't span all the way across.
| | 01:54 | So if I was to use this theme, I would
make sure that all of my images are big
| | 01:59 | enough to fit this box.
| | 02:00 | And just for reference, the box is 770
pixels wide, so all your images should be
| | 02:07 | 770 pixels wide or more so that they
always span across this entire box.
| | 02:13 | There's one other caveat I have to point out.
| | 02:16 | For some reason it doesn't seem like
the dropdown functionality of the Main
| | 02:20 | Menu works really well.
| | 02:21 | So if you're going to use this theme,
I urge you to only use top level menus,
| | 02:26 | meaning if you go into the Menus
section, you make sure that all the menu
| | 02:31 | items are on one line so that you
don't have any menu items indented like
| | 02:36 | this, because if you do, chances are they
won't appear, and that would be quite unfortunate.
| | 02:42 | The final thing I want to say is this theme is
an excellent theme for creating child themes.
| | 02:48 | If you want to create a theme that has
the masonry functionality built-in, but
| | 02:52 | you don't quite know where to start,
start with the Gridly theme because the
| | 02:56 | Gridly theme already has that
functionality built-in, and it works really well.
| | 03:00 | So you can just pick up
where the developer left off.
| | 03:03 | If you want to know more about how to build a child
theme, you should check out my course WordPress:
| | 03:08 | Building Child Themes right here on
the lynda.com online training library.
| | Collapse this transcript |
|
|
4. Using TouchfolioGetting and installing Touchfolio| 00:00 | The last theme I'm going to show you is
something very different, and more than
| | 00:05 | that it's something that is currently
undergoing a bit of an evolution, The
| | 00:09 | Touchfolio theme is currently in beta,
but I choose to show it to you anyway to
| | 00:13 | give you an option that is truly unique,
and that gets your feet firmly planted
| | 00:17 | in the high-paced world of
open source theme development.
| | 00:21 | Touchfolio has been published on the
Online-Collaboration-Platform GitHub and is
| | 00:26 | in constant development.
| | 00:27 | In addition, the theme author has set
up a forum where you can suggest and vote
| | 00:32 | on features and improvements.
| | 00:33 | As a result, you can take part in influencing
how this theme will evolve and how it will work.
| | 00:39 | So before we download Touchfolio, I just
want to show you what this theme is all about.
| | 00:44 | So I'll go to the Touchfolio web site
and then click on View demo, and we get
| | 00:49 | a demo of the theme.
| | 00:51 | This is a portfolio theme in the way
portfolio themes probably will be moving forward.
| | 00:56 | The name Touchfolio indicates one of
the key functionalities of this theme.
| | 01:00 | If you have a tablet or a phone or
you can even use your mouse, you can
| | 01:05 | literally use your finger or your mouse to
move the content around in dragging motions.
| | 01:10 | You can also scroll through the
content using the scroll wheel on your mouse
| | 01:15 | or even the keyboard.
| | 01:17 | The key to Touchfolio is this
layout where you have galleries, and the
| | 01:21 | galleries contain multiple images and
even video that you can easily scroll
| | 01:29 | through, and for each project you'll
also have information that pops up like
| | 01:33 | this that can be pinned or shared.
| | 01:34 | When you get to the end of a project,
you can then navigate directly to the next
| | 01:40 | project and then scroll
through that one as well.
| | 01:44 | Touchfolio gives you complete
customizability both in terms of what you upload
| | 01:48 | and also how it's displayed with
background colors, deciding whether or not you
| | 01:52 | want an image to span the entire screen
or only part of the screen, and so on.
| | 01:57 | You also have advanced functions in the menu.
| | 02:00 | As you can see here, we have a menu
item called Projects that lists out all the
| | 02:04 | projects, but if I go to for example
the Blog, you'll see the Projects list
| | 02:08 | collapse, and we now just
have the Projects button.
| | 02:12 | There's also an Alternative Portfolio
view here that's based on Masonry, so you
| | 02:16 | get these items that are
stacked in a nice orderly fashion.
| | 02:20 | If you click on them, you jump directly to
that same type of navigation that you had before.
| | 02:25 | So now that you know what's possible,
let's download Touchfolio and then
| | 02:30 | install it on our own site.
| | 02:32 | So I'll go to Touchfolio front page,
click Download, and download the package.
| | 02:39 | Again, it's downloaded onto my computer.
I can then go to my Dashboard, go to
| | 02:44 | Appearances > Themes, and Install Themes, click
Upload, find the file and click Install Now.
| | 02:56 | Because of how advanced this theme is,
if you click Live Preview, it won't work.
| | 03:01 | To get this theme to work you'd actually have
to activate it, so I'm going to click Activate.
| | 03:05 | You get a message saying Congratulations,
Touchfolio theme installed!
| | 03:09 | And you can go and vote for the features
and report bugs, and you can follow the
| | 03:12 | developer on Twitter or even join
the Newsletter about this theme.
| | 03:16 | But for now we're just going to jump
straight to the front page and take a look at it.
| | 03:20 | Now as you can see, the Touchfolio theme
that we have right now looks very little
| | 03:26 | like the one that I showed you earlier
and that's because the Touchfolio theme
| | 03:30 | doesn't work the same way
regular WordPress themes work.
| | 03:33 | So to get it to where we need it to
be, we need to do some customization.
| | Collapse this transcript |
| Creating albums and galleries| 00:00 | Touchfolio is a true portfolio
theme in that it handles portfolio items
| | 00:04 | separately from regular blog items.
| | 00:08 | That means to use Touchfolio as
portfolio and get the most out of the theme,
| | 00:13 | you've to populate the Touchfolio Gallery.
But before we do that, we need to get
| | 00:18 | rid of all this content, because when I
originally populated this site to demo
| | 00:23 | it for you, I used the Blog to
populate all my content, but now that we are
| | 00:28 | using Touchfolio, I want to use the Blog
for blogger contents and then place all
| | 00:33 | my portfolio items in the Portfolio.
| | 00:35 | So I am going to go to my site here
and then go into Posts and look at All
| | 00:41 | Posts, and I am going to mark all of
them, click Edit to bulk edit them, and
| | 00:48 | then I am going to change the
Status for all these posts to Draft.
| | 00:52 | Now this is not something
you necessarily have to do.
| | 00:55 | I'm doing it because this entire site
is full of portfolio content, and I want
| | 00:59 | to place all that content in the Portfolio.
| | 01:02 | If you already have blog post content,
you may want to put all of the portfolio
| | 01:06 | content on hold in Draft, and then
you put the portfolio content into your
| | 01:12 | gallery and keep your blog content in the Blog.
| | 01:16 | Now what I did was just for this
particular site, your situation may be different.
| | 01:21 | If you have a mix of blog posts--so
regular posts that you want to have under
| | 01:25 | Blog--and gallery items or portfolio
items in your Blog, you want to put all of
| | 01:30 | your portfolio items and gallery items in
Draft and leave all your blog posts as they are.
| | 01:37 | The reason I am not deleting these
posts outright is because I may need the
| | 01:40 | content later, so I am just putting
them in Draft so no one can see them, but
| | 01:45 | what you're aiming for here is to completely separate
your blog post items from your portfolio items.
| | 01:51 | Once that's done, you can
populate the Touchfolio Gallery.
| | 01:55 | You find it here on the Menu, it's a
new post type called Gallery, and inside
| | 01:59 | Gallery, you can add a new album.
| | 02:03 | An album is similar to a post except you
can attach multiple images to one album.
| | 02:07 | So I am going to go to my demo content
here, and first I am going to add a new
| | 02:13 | item with multiple images.
| | 02:16 | I have one here that's called Birds,
so I'll grab the title, paste it in.
| | 02:21 | So now the album is called Birds.
| | 02:23 | I'll grab all the text for the
album and paste that in the text area.
| | 02:27 | Then I'm going to is set this to
Projects because it's going to be under the
| | 02:32 | Projects Category, and I'll scroll
down, and here we have a new feature.
| | 02:37 | This is a custom meta box
that comes with this theme only.
| | 02:40 | When I click on the Add Images button, I open a new
add images function where I can select files.
| | 02:48 | So I'll go and find the files for this post.
| | 02:52 | I'll select all of them, click Open and
they are uploaded into the system.
| | 02:57 | But unlike the regular image uploader, I
get a different view here where I can now
| | 03:01 | select which of these images
I want to add into the post.
| | 03:05 | So I'll click the plus for each of
them and they are added into the post.
| | 03:09 | In addition, I can also go to the
Media Library and look at other images that
| | 03:15 | are in my library and see if
I wanted to add any of those.
| | 03:18 | If I click on the plus, it's
automatically added to this particular album.
| | 03:22 | When I am done, I close it, and you
see I now have these three images.
| | 03:27 | I can delete them by clicking the X, I
can reorder them by moving them around
| | 03:31 | like this, and I can even click on
each image and change the way they're
| | 03:36 | displayed so that instead of
displaying as a default image we can display it
| | 03:40 | to fill the entire screen or we can set it
to just fill in the area or to Don't scale.
| | 03:46 | I can change the Alt attribute, so I
can put in a proper description of the
| | 03:50 | image here, and I can even attach a
video URL either from YouTube or Video so
| | 03:54 | that when someone clicks on the image,
they automatically go to the video
| | 03:58 | that's played in the box.
| | 04:01 | Before I save this, I am going to
scroll down and make one more change.
| | 04:04 | Down here under Settings, we can set a
Default scale mode for these images so
| | 04:09 | that's basically whether or not we're
going to blow up the images to fit the
| | 04:13 | whole screen or not, and I can also
set a custom background color for the
| | 04:17 | album, or I can set a custom URL for a
specific image that I want to tile in the background.
| | 04:22 | So I am going to set the background
color for this album to a brown, and then I
| | 04:29 | am going to publish this album.
| | 04:31 | Now that the album is published, I can
click View Album ,and here you see what happens.
| | 04:37 | We get the title and the description
here in this box that I can close, and from
| | 04:43 | here we can navigate
through the images in this album.
| | 04:45 | When we get to the end of the album, we
are automatically prompted to jump
| | 04:50 | to the next project.
| | 04:51 | So I can click on that, and then
we are jumping to the next post.
| | 04:54 | Again, title, description, I can
close it and navigate through the images.
| | 05:02 | Now we have a set of different albums
with different content that's organized in
| | 05:06 | two different Gallery categories.
| | 05:08 | With that done, we need to work on the site
as a whole to make it easier to navigate.
| | Collapse this transcript |
| Adding a gallery to the menu| 00:00 | Now that we have created albums and
galleries in the site, we need to work on
| | 00:05 | the overall settings of the site to
make it work more like a portfolio site.
| | 00:10 | Right now, what you are seeing is
the front page as it is by default in
| | 00:14 | WordPress, which is the blog.
| | 00:15 | The problem is I already put all of my
blog posts in Draft because they used to
| | 00:19 | be the portfolio items.
And I don't currently have any blog posts.
| | 00:24 | Even if I did have any blog posts, I
wouldn't want them to be on the front page.
| | 00:28 | What I want in the front
page is the artist's portfolio.
| | 00:31 | So this button that says Portfolio
should automatically be pointing to the
| | 00:35 | front page, and it
should showcase the portfolio.
| | 00:38 | To make that happen, I
first have to create a new page.
| | 00:42 | So I will create a new page
that will become a placeholder.
| | 00:45 | I will call the page Portfolio and
before I save it, I am going to go down here
| | 00:51 | under Page Attributes and
change Template to Gallery Page.
| | 00:55 | I will publish this new page and then
go down to Settings > Reading and change
| | 01:03 | Front page displays from Your
latest posts to A static page.
| | 01:09 | Here I can select which page I want to
display as the Front page and then which
| | 01:13 | placeholder I want to use for the blog.
| | 01:15 | In this case, I don't have any blog
items, so I don't want it to appear.
| | 01:19 | So I am just going to assign the Front page.
| | 01:22 | So I will set that to
Portfolio here and click Save Changes.
| | 01:26 | Now if I go to the Front page again,
you'll see that we automatically jumped
| | 01:31 | directly to the Portfolio, and here I can
navigate through all of my projects and
| | 01:35 | get the full experience of a Portfolio.
| | 01:37 | But my menu hasn't changed,
it's still the same menu.
| | 01:42 | So I have to go in and change the menu as well.
| | 01:45 | So I will go back in and use the
WordPress toolbar to get to Menus.
| | 01:49 | From here, I am first going to remove
the Portfolio item and the Blog item
| | 01:53 | because these are both Category links and they
point to the blog, and that's not what I want.
| | 01:58 | So I will take these away.
Then I want to add the Portfolio Page I created.
| | 02:03 | So if I scroll down, you see
here under Pages I have Portfolio.
| | 02:07 | So this will now serve as my homepage,
so I'll add that to the Main Menu.
| | 02:12 | Then I also want to add the
individual portfolio items I have.
| | 02:16 | So if I scroll all the way to the bottom
here, you see that Touchfolio has given
| | 02:20 | me two new options to add menu items.
| | 02:23 | First of all, I can add each of my
individual albums if I want to and more
| | 02:28 | importantly, I can add the Gallery_Categories.
| | 02:31 | So I will add both the Portfolio Category
and the Projects Category, click Add to Menu.
| | 02:36 | Then I am going to change names of
them so that it's clear that these are
| | 02:40 | not the same as top.
| | 02:41 | So I will say Filed under Portfolio,
and Filed Under Projects, click Save Menu,
| | 02:52 | and now when we go to the Front page,
you will see something really cool.
| | 02:56 | Touchfolio automatically notices if a menu
item points to a gallery that has multiple items.
| | 03:03 | And if it does, it instantly gives
you a list of each individual item.
| | 03:07 | So from here, because the Front page now
points directly at the Portfolio items,
| | 03:12 | I can click anywhere on this
and get the Portfolio item I want.
| | 03:15 | And if I scroll down and click under
Filed under Portfolio, the top menu
| | 03:22 | collapses and instead we get a menu here,
that again gives me access directly to
| | 03:27 | the posts that are under
that specific gallery category.
| | 03:31 | And if we click on any of the regular pages,
we still get a nice page view with regular content.
| | Collapse this transcript |
| Adding a masonry gallery| 00:00 | In addition to this custom Touchfolio
view where you can drag your galleries
| | 00:05 | around with your mouse or navigate
other with your scroll wheel or even your
| | 00:09 | keyboard, Touchfolio comes with a
Masonry Gallery view that you can activate
| | 00:14 | for, for example, the Front page.
| | 00:16 | To do that, you need to change the Page Template
for the page you are using as your Front page.
| | 00:22 | So I'll go to the back end again, go to
Pages, and here I find my Portfolio Page
| | 00:29 | which is the front page.
| | 00:30 | If I want to change this from a
Gallery view to a Masonry view. I can go to
| | 00:36 | Quick Edit, and here I can change the Template.
| | 00:38 | We already set it to Gallery Page, so
I'm going to drop that down and change it
| | 00:43 | to Masonry Gallery Page.
| | 00:44 | When I select that and update it and
go back to look at the site, you'll see
| | 00:49 | instead of that Touchfolio type
gallery we had before, we now have a Masonry
| | 00:53 | Gallery that's fully responsive and
will change with the size of the screen.
| | 00:57 | This is a preference option. You can
choose whether you want the front page
| | 01:02 | to showcase just one item or if you
want to have a gallery like this that
| | 01:06 | shows multiple items.
| | 01:08 | I think this is a kind of cool idea for
the front page because it shows more of the
| | 01:12 | content on the site, and if you have a
larger screen than what I do, then you'll
| | 01:17 | see more items next to one another.
| | 01:20 | Personally, if I was to make a
portfolio, I would use the Masonry Gallery as
| | 01:24 | the front page because it showcases way
more content than the Touchfolio Gallery does.
| | 01:29 | And the cool thing about the Masonry
Gallery is as the screens get larger, you
| | 01:33 | see more and more content.
| | 01:35 | I can simulate that by zooming out in
my browser, and you'll see that as I zoom
| | 01:40 | out, you see more and more of
these items next to one another.
| | 01:44 | And if you wonder if by doing this
you kind of lose the whole point of the
| | 01:48 | Touchfolio Gallery, don't worry. If you
go into any of these posts, you'll right
| | 01:53 | back at the Touchfolio Gallery again.
| | Collapse this transcript |
| Adding links to social media sites| 00:00 | There's one more important component
you should always add to a Portfolio site,
| | 00:04 | that is a menu that's easily
accessible the points visitors to your Facebook
| | 00:10 | page, your Twitter profile, and whatever
else you have that you might want people
| | 00:14 | to access so they can interact
with you and know what's going on.
| | 00:17 | We're going to use the widgets to do that.
| | 00:20 | So first, I'll go ahead and create a new menu
and add a new menu, I'll call this one Social Links.
| | 00:29 | In this menu, I'm going to
create a couple of custom links.
| | 00:32 | So I'll go in down here, and I'll set
one for my Twitter profile and another one
| | 00:41 | for my Facebook page.
| | 00:46 | Before I save this, I'm going to go to
Screen Options, and here we can activate
| | 00:50 | extra types of information for our menu items.
| | 00:53 | So I'm going to activate this Link
Target option because then I can make sure
| | 00:58 | that when people click on this link,
it opens in a new window or tab.
| | 01:02 | So I'll do that for both of them
so that they don't leave my site.
| | 01:08 | I'll save this menu, and then I'll assign
this menu to the Social Links menu location.
| | 01:15 | That way when people go into the main
site, they get the regular menu to all my
| | 01:22 | content, and then they also get links
to me on Twitter and to my Facebook page.
| | 01:29 | Now that I've those items, I can choose
whether or not I want to keep my regular widgets.
| | 01:34 | Now notice that my regular widgets
which appear down here at the bottom on
| | 01:38 | the left side are only there on pages.
| | 01:41 | If you go into the gallery, those
widgets disappear, but both your Main Menu and
| | 01:47 | your Social Links menu stay.
| | 01:49 | So that means if I want to use the widgets,
I have to keep in mind that they might disappear.
| | 01:54 | In my case, that means I'm
going to take them away.
| | 01:57 | So I'll go to Widgets here on the
WordPress toolbar and remove all the widget
| | 02:03 | items so that we never see them.
| | 02:06 | That way we have a nice and clean
sidebar with only content that we want to
| | 02:10 | people to click on, and there's no
confusing content anywhere on the site.
| | Collapse this transcript |
| Exploring Touchfolio theme options| 00:00 | Now that we've set up all the contents
in our Touchfolio theme and used all the
| | 00:04 | features that you see on the front end,
it's time to take a quick look at the
| | 00:08 | Theme Options that come with this
theme, because like with everything else in
| | 00:11 | Touchfolio, they're quite
different from other themes.
| | 00:15 | To get to the Theme Options, we'll go
to the Dashboard, and here we have a new
| | 00:21 | option with a white
rabbit on it called Touchfolio.
| | 00:24 | When you open this, you get through the
Touchfolio panel, and from here you have
| | 00:28 | General Settings and Gallery settings.
| | 00:30 | Under General Settings, you can upload a
custom logo to replace the title of the
| | 00:36 | site if you want to, it has to be 97
pixels by 16 pixels tall if you want that to
| | 00:42 | work properly, and if you do,
it'll replace this title right up here.
| | 00:47 | You can also add Tracking Code for the theme.
| | 00:50 | So this is if you don't use a specific plug-in
to add Google Analytics tracking code.
| | 00:56 | I recommend using a plug-in to do this
because then it's not theme specific, and
| | 01:00 | you won't lose it if you
decide to switch out of the theme.
| | 01:04 | You can also add a Favicon.
| | 01:05 | A Favicon is that little icon that
appears next to the name of your site
| | 01:09 | when people visit it.
| | 01:11 | If you want to generate a Favicon
with your own logo, I recommend you use a
| | 01:15 | service called X-Icon Editor.
| | 01:18 | This is a great service where you can
either draw an image yourself or upload
| | 01:22 | one and then the service will create
different icons in different sizes and in
| | 01:27 | this case you want the 16x16 icon.
| | 01:29 | You download it onto your computer, and
then you can use this function to upload
| | 01:33 | it to the Touchfolio theme, and it'll
appear here just like you see the X for
| | 01:37 | the X-Icon Editor up here.
| | 01:39 | Below that you have the Footer Text where you
can put in your own Footer Text if you want to.
| | 01:45 | You can also add custom Google Fonts
Code, so you can use a different font from
| | 01:49 | the default font in the theme.
| | 01:51 | This requires in-depth understanding of
how the Google Fonts Libraries work, so
| | 01:55 | it's bit more advanced, but you can
experiment with it. And on the topic of
| | 02:00 | style, you can also add a custom less Skin File.
| | 02:04 | This is a very advanced option, and you
really need to know what you are doing.
| | 02:07 | So if you want to do this, you need to
go check out the documentation for this
| | 02:12 | theme on the theme web site.
| | 02:14 | The last option allows you
to add a Facebook admin ID.
| | 02:18 | The reason why you would want to add
your Facebook admin ID to the site is so
| | 02:23 | that Facebook can track the
sharing that's happening on your site.
| | 02:27 | This is not something you have to do,
and it's not even something you have to do
| | 02:31 | if you have a Facebook page, but it's
something you may want to experiment with.
| | 02:35 | If you make any changes to the
settings, remember to click Save All Changes
| | 02:38 | after making them, and if you're not
happy with the changes you make, you can
| | 02:42 | always go and click Reset All Options.
| | 02:45 | Now these are General Settings.
In addition you have the Gallery Settings.
| | 02:48 | The Gallery Settings are global settings
that apply to all the galleries on the site.
| | 02:55 | You can set a Default Background
Color, you can set a Default Background
| | 02:58 | Pattern, and you can also set Default
Image Scale Molds that's where you decide
| | 03:03 | whether or not the image should fit in
the area that is scaling it down, if it
| | 03:07 | should fill the area that means
scaling it up so it fills everything, or if it
| | 03:11 | should not scale so that no matter what size it
is it will always display in the original size.
| | 03:16 | You can also set the default Gallery Image Size.
| | 03:19 | This hooks into the standard WordPress
image sizes, you can use large, medium or
| | 03:24 | any other image size type.
| | 03:27 | And finally, you can set whether or
not you want the project descriptions to
| | 03:30 | open automatically when you go to a gallery.
| | 03:32 | So if you go to the front page here,
and you open a gallery, you will see that
| | 03:37 | the project description opens
automatically, but if we turn this off and Save
| | 03:42 | All Changes and reload this page,
you'll see that the description does not open
| | 03:48 | automatically, and you have
to click on it to see the text.
| | 03:52 | You can experiment with both and see what works
best for you and the people who visit your site.
| | Collapse this transcript |
| Things to keep in mind when using the Touchfolio theme| 00:00 | Like with any other theme, the
Touchfolio theme has benefits and drawbacks, and
| | 00:05 | it's important that if you
use it, you know what these are.
| | 00:08 | The main thing about the Touchfolio
theme and a lot of other custom portfolio
| | 00:13 | themes that you have to keep in mind
is that if you're using a custom post
| | 00:17 | type like we are in this case with the
gallery post type--and by the way, the
| | 00:22 | way you identify custom post types is if they
appear as a separate item in the Admin menu.
| | 00:28 | If the theme is using a custom post
type, and you decide later to switch to a
| | 00:32 | different theme that doesn't use the
same custom post type, all the content
| | 00:37 | that's in the custom post type
will not appear in the new theme.
| | 00:42 | That means if you're using Touchfolio,
and you decide to switch to a different
| | 00:45 | theme, you will have to migrate the content that
put into the Gallery post type somewhere else.
| | 00:52 | It's a lot of work, but chances are if
you're using Touchfolio, you're going to
| | 00:57 | be using it for a long time
because it really is a cool theme.
| | 01:00 | The other thing you have to keep in mind is
that Touchfolio is an experimental theme.
| | 01:05 | It doesn't work the same way a lot of
other WordPress themes work, and it's
| | 01:09 | also still in beta.
| | 01:11 | To address this, the developer has
opened a forum where you can file bugs,
| | 01:16 | suggest new features, and also vote on
the features that are being suggested our
| | 01:21 | bugs that are being flagged.
| | 01:22 | You can get to that forum
by following this link here.
| | 01:25 | It looks like this. And here you have
lots of links and also lots of suggestions,
| | 01:30 | and you can communicate with other
people that are using this theme and see if
| | 01:34 | you can get new features included.
| | 01:36 | And like I said, Touchfolio is posted on GitHub.
| | 01:40 | So if you're a developer, and you want
to contribute to Touchfolio, you can by
| | 01:45 | forking it on GitHub, adding or
changing features, and then pushing it back up.
| | 01:50 | As I said when I first introduced
you to this theme, Touchfolio is a very
| | 01:54 | different theme from every other theme,
and that's also why I think it's so
| | 01:58 | important that you see it.
| | 02:00 | It has really cool functionality, it
showcases content in a very different and
| | 02:04 | very unique way, and that's why if you
use it and you use it properly, you'll
| | 02:09 | get more attention to your portfolio,
and you'll be able to showcase your
| | 02:12 | content in an interesting
way to people who visit it.
| | Collapse this transcript |
|
|
ConclusionGetting the word out through social media sharing| 00:00 | Once people have launched a site, the
first question they ask is always how do I
| | 00:04 | get listed on Google? And the second,
how do I get people to visit my site?
| | 00:10 | The answer to both these questions is
social media and a good social sharing strategy.
| | 00:15 | In the beginning, the Internet was
based around directories like the original
| | 00:20 | Yahoo! Directory and search engines
like Google, but more and more people are
| | 00:25 | moving to social sharing platforms
like Facebook and Google+ and Twitter and
| | 00:30 | Pinterest to share their
interest in different types of content.
| | 00:33 | And to get people to discover your
content, it's more and more important to
| | 00:38 | enable the people who visit and find
your content to share that content with
| | 00:43 | their friends so that their
friends can go check it out as well.
| | 00:46 | Now there's a lot of debate in the
Web Development Community right now over
| | 00:50 | whether or not it's a good idea to
put sharing buttons on your site.
| | 00:54 | One side argues that if you don't put
sharing buttons on the site, then people
| | 00:58 | won't share your content, whereas the
other side argues that putting sharing
| | 01:03 | buttons on your site may
lead to you looking desperate.
| | 01:07 | My advice is when you start out, it
may be a good idea to put sharing buttons
| | 01:12 | on your site, so it's easy for people
to share your content and then as your
| | 01:16 | community grows, you may consider taking
them off again, so you don't look so desperate.
| | 01:21 | It's all about reaching a critical mass
where enough people share your content
| | 01:25 | so that you don't have to do all the work.
| | 01:27 | Let me give you some simple
tools to get started on this.
| | 01:30 | What we want to do is add some sharing
buttons to your site, and this will work
| | 01:35 | with pretty much any theme.
| | 01:36 | So I'm going to do it in the Gridly
theme, but it works on any other theme too.
| | 01:40 | We're going to go to the back end, to the
Dashboard and add a plugin called AddThis.
| | 01:45 | Now AddThis is a very advanced sharing
platform that allows you to add multiple
| | 01:51 | buttons to your site to do different things.
| | 01:55 | What's cool about AddThis is that they
run their own statistics and they have a
| | 01:59 | lot of evolving features so you can
always go in and change it to add or
| | 02:03 | subtract buttons or add new
features as they become popular.
| | 02:07 | I'll activate the plugin, and then we have
to go and then customize the plugin a bit.
| | 02:13 | So I'll go to Settings and AddThis and
here you can select what type of buttons
| | 02:19 | you want to place on the site
and where you want to place them.
| | 02:22 | The default is to have all the standard
buttons, so Like from Facebook, Tweet,
| | 02:28 | Google+, and a Share button that
gives you all the other types of options
| | 02:31 | available, but you can also choose
None or you can choose More options and
| | 02:36 | select one of these predefined buttons
or even create a custom button yourself.
| | 02:42 | I recommend using the standard row
buttons either on the top or on the
| | 02:47 | bottom, but not both.
| | 02:48 | Because if you do both,
it gets a little excessive.
| | 02:51 | So let's say we want to add it just on
top and not on the bottom, I'll scroll
| | 02:55 | down and click Save Changes, and when
we now open this site in the separate
| | 03:01 | tab, you'll see that when we go to a
single post and scroll down, we now have
| | 03:07 | these sharing buttons.
| | 03:09 | The sharing buttons in turn make it very
easy for people to share their contents.
| | 03:13 | All you have to do is click the Like button,
and you would like it on Facebook if you're logged in.
| | 03:18 | You click the Tweet button, and it
opens a window, so you can send a tweet with
| | 03:22 | the link to this post or if you click
the g+ button, you plus one the post on
| | 03:27 | Google+, and you can also add extra information.
| | 03:29 | You also have this Share button that
gives you more options like Pinterest and
| | 03:32 | Blogger, and you can see there are
over 300 other sharing options here.
| | 03:36 | So AddThis gives you a lot of functionality.
| | 03:38 | AddThis is also very advanced, so you
can go into the Advanced tab and select
| | 03:43 | whether or not you want to have
sharing buttons on certain pages, and you can
| | 03:48 | track the sharing, and you can
customize it in any way you want.
| | 03:51 | But for basic setup, all you really
need to do is add the buttons either on the
| | 03:56 | top or on the bottom of your post
and then get people to start clicking.
| | 04:00 | The other strategy you want to employ
is every time you post a new post or
| | 04:05 | picture or anything on your site, after
it's gone public, you should go and like
| | 04:10 | it and tweet it and add it to g+ and add
it everywhere else you think that your
| | 04:15 | target audience is so that
people see that you posted it.
| | 04:18 | By doing this yourself, you're starting
the sharing process, and chances are your
| | 04:22 | friends will reshare it.
| | 04:25 | Social media is all about engagement, and
by engaging your friends, your fans, and
| | 04:30 | your clients in social media and getting
them to share your content, more people
| | 04:35 | are going to discover your content,
you're going to rank higher on search
| | 04:38 | engines, and more people are going to
come to you to see what you do, and that's
| | 04:43 | really what it's all about.
| | 04:44 | So, now that you have a site up and
running, focus on a solid sharing and
| | 04:48 | communication strategy, reach out to
your fans, and most importantly, have fun.
| | Collapse this transcript |
|
|
