So far, we’ve covered the basics behind making pages and posts, assigning taxonomy and manipulating the menu.  But there’s more! Today we’ll be messing with different types of themes, each with their own special purpose.

Lesson Outcomes:

  • Understand different themes and their features
  • Understand that different themes serve different purposes
  • Advantage to responsive design

Let’s Play with Themes

What are they anyway? Themes are templates used to design your website.  I think they’re pretty fun because you can mess around with tons of features to make a professional lookin’ website, with just a click of a button versus manually coding out a bunch of CSS.

Beyond aesthetics, themes offer different features which allow you to carry out specific functions.

The difficulty with themes is evaluating them. Installing and messing with themes on your website takes time and can be tedious, but the hard work will pay off.

Just think, at the end you will have a website of your own. You did the work yourself and didn’t pay someone $200+ to do it for you!

Install themes from WordPress admin dashboard

To install a new theme, you need to select Appearance under the side Dashboard and hit Themes. It will take you to a search screen for different themes.  Right now, you only have three default themes: Twenty Fifteen, Twenty Fourteen, and Twenty Thirteen.  We haven’t downloaded any new themes, that’s why we have little to choose from.  Let’s check out our options: click on +Add New Theme.

It will automatically take you to a list of featured themes.  On the top bar you can choose to see the “Featured”, “Popular” or “Latest” themes. If you’re not down with any of those listed, you can search for a theme.  If you decide to search for one, I suggest clicking on “Feature Filter”.

The feature filter is really nice because you can select exactly what kind of theme you are looking for.  There are tons of ’em out there and we want to narrow down our options.  Let’s just mess around and get super specific.  Select a black and white theme with a responsive layout (I’ll explain what that is later) which has the following features: custom menu, featured image header, custom background, custom header, featured images and theme options. Click “Apply Filters” when you’ve selected everything.

feature filter

I’ve used the theme “Matheson” before and it’s quite noiice.  Click on it and it’ll preview the theme for you. On the sidebar there will be a description along with an overall rating. Hit install so we can use all the cool features we selected.  We want to play with it now, so click “Activate” once it’s finished.  For more thorough descriptions and reviews, search up the theme on wordpress.org/themes. You can do this with any theme.

Once you install Matheson, check out your Appearance section. There are new selections you can edit: Background and Header.  That’s because we selected custom background and custom header as one of the features. Under menus, you can choose to place the menu on the side or top (like the custom menu option we used last week).  And if you select Customize under Appearance, you can change the site title and tagline, layout, jumbo headline, colors, the way posts are displayed, header image, background image, navigation, widgets and static front page.  This theme has a lot more theme options than our original one.  Pretty cool, right?

Change each option. Each is pretty self-explanatory. This is just so you can get a better feel of theme features. Don’t trip too much, just have fun. We’ll be walking around if you get lost.

Now we understand how each theme can be specialized for a certain purpose.  Matheson is a nice minimalist theme that can be used for any non-profit.  But what if you wanted to make a website that displayed photography better? Or one that would look nice on cell-phones, too? Or one for a business?  There’s a theme for just about everythang.  Let me introduce you to three different types of themes: responsive themes, portfolio themes and small business themes.

Responsive Themes

Nowadays, people use multiple devices while searching the web. They can be using a smartphone, tablet, laptop, desktop or a television. In these categories, there are even differences between devices. One iPhone screen may be bigger than another and there is a difference in screen size between a 13” MacBook Pro and a 15” MacBook Pro. How do we build a website to cater to all of these different devices?

Previously, designers and developers created separated websites for mobile and desktop. That’s twice the work.

The current trend for designers and developers is to use responsive design principles while building a website.

Responsive design allows a website to scale and change at different screen sizes. Responsive design in many cases has become a standard.

For our purposes, make sure the theme you use is responsive. It’s a standard (in many cases) and it makes your website more professional.

responsive theme

Here are a few examples of responsive and non-responsive websites (adjust the width of the browser window to see how the navigation bar and pictures of the responsive websites change to fit the window. )

Here are a few links with free responsive themes:

You can also just google “Free WordPress Responsive Themes”. Pick your favorite one from any site and download it.  (We’ll go over how to install it in a sec, just hang tight.)

Portfolio Themes

Installing a portfolio theme is a great way to showcase your art, imagery, design work or anything visual, really.  In our case, as social entrepreneurs, it’s a great way to display the work you and your non-profit do.  Portfolio themes are also widely used as a way to create an online resume.  They usually have beautiful ways of displaying photos with front-page sliders, fancy galleries and elegant layouts. Portfolio themes make looking through your content engaging and quite impressive. It’s also a good idea to make sure your portfolio is responsive so if someone is on the go while checking your site, it’ll look just as good on their phone as their computer screen.

portfolio theme

Examples of WordPress websites with portfolio themes:

Here are a few links with free portfolio themes:

You can also just google “Free WordPress Portfolio Themes”. Pick your favorite one from any site and download it.

Small Business Themes

You’ll notice that Amazon’s website will look different than a student’s online resume or blog.  You won’t see a feed of latest posts or something on the front page.  Small businesses need a certain look and feel to sell products or take donations.  This includes a nice way to feature the products, an overall professional design and a way to display important information like contact info or sharing features.  Now you might be thinking, why would I need a business website for my partner organization? But maybe you’ll be assisting an upcoming small business which empowers a community in need or maybe you’ll be creating a charity website for a non-profit.  Either way, it’s a good option to have.  Like portfolio themes, you’ll want to make sure your theme is responsive for greater accessibility.

business theme

Examples of WordPress websites with business themes:

Here are a few links with free business themes:

You can also just google “Free WordPress Business Themes”. Pick your favorite one from any site and download it.

Manually Installing Downloaded Themes

So you should have downloaded one responsive theme, one portfolio theme and one business theme.  To install it, we need to import the theme manually.  There are two ways to do this.

One way is to take go to Appearance > Themes and select +Add New Theme.  At the very top of the page you’ll see a button that says “Upload Theme” next to Add Themes.  Click on it. Browse through your files and click upload or just drag and drop the .zip file over the browse button and hit “Install Now”.  Activate it. Sometimes if you do it this way, you’ll run into an error. Maybe the file is too big. Don’t fret, you can install it another way.

The second way to install a theme is through File Manager. Go into your CPanel (yourdomain.me/cpanel) and navigate to File Manager.  Go to the folder you downloaded the WordPress instance you’re using.  Next, go to the “wp-content” folder and then the “themes” folder.  You’ll see a folder for each theme you’ve already installed (ex. Twenty Twelve, Matheson).  Upload the .zip file of the theme you want to install.  Extract the whole folder into the “themes” folder.  Now go back into WordPress.  You should see the theme you just extracted under Themes. Activate it.

Special Theme Functions

Themes are about more than changing colors and fonts. They can add all sorts of functionality and special types of posts to your site. Let’s look at how that plays out with the theme that this site uses.

Avada Theme

When we switched over from giip.org to everettprogram.org, we decided to go with a professional theme with lots of bells and whistles. We ultimately decided on a theme called Avada which we use for both everettprogram.org and labs.everettprogram.org. For those wondering, these two sites are two separate installations of WordPress.

To see what Avada has in the way of features, check out their live demo page at theme-fusion.com/avada/. A good paid theme will always have a site like this where you can preview what the theme has to offer.

Custom Post Types

WordPress wouldn’t dream of limiting you to only using posts and pages. They built in a way to expand, and that way is custom post types. These basically allow you create something that’s like a page or like a post, but you want to serve a different function. Let’s look at how we use custom post types on the Everett website.

FAQs

Avada has a custom post type called “FAQ” or “Frequently Asked Questions”. Lots of sites have this type of page and the Avada developers wanted to see if they could make an easier way of maintaining one. Instead of creating a normal page and writing in your FAQ items, you add each item as a post along with categories.

Edit_Post_‹_The_Everett_Program_—_WordPress_and_Edit_Page_‹_Everett_Labs_—_WordPress

You then create a page and select “FAQs” from the template menu and you get a page like this.

FAQ_-_The_Everett_Program

Portfolio

Avada is set up to be especially useful to artists, and business sites. They created a custom post type called “Portfolio Item”. Portfolio items have special single pages set up just to display them (see here, here, and here). They also three different taxonomies that are created specifically for this post type. We adapted them for our own purposes, but in their original context they relate to a product or art project. Imagine our site is for an artist and we are making a portfolio item post for a digital drawing we made with Photoshop and Illustrator of two Rhinos fighting on the edge of a volcano. We would use taxonomy like:

  • Category: Animals, Nature
  • Tags: Rhinos, Awesome, Fire!
  • Skills: Photoshop, Illustrator

See how it has a third taxonomy called skills? The developers felt like that was an important bit of information that was distinct from the general category and wanted people to be able to use it to categorize their work.

How We Use it on the Everett Site

We felt that this post type was perfect to showcase our student project, partly because we wanted something separate from the other blog posts and partly because the theme has some really nifty ways of showing off your projects. Note the sweet animated sorting tool on the Projects page. That was made using a shortcode. It sorts based on the project category. We also really like the single posts page for portfolio items.

Giving_Artisans_Information_Technology_Skills__GAITS__-

Those “Project Details” are portfolio taxonomies. The “Location” is the “Skills” taxonomy and the “Project Theme” is the Category taxonomy. They say something different here because in our child theme, we included the single portfolio template and changed where it said “Skills” and “Category” to what you see above. For more on how we did this, check out the Why Hack? Series on our YouTube Channel.

Shortcodes

Avada also comes packaged with lots of useful “Shortcodes” which are HTML-like codes that you insert into the post editor to get complex results.

Columns

Ever tried to get a paragraph next to a list? It’s a pain. But with shortcodes packaged with our theme, you can do it easily. We used the [columns] shortcode to make the lesson headers.

columns 1

See how there’s a paragraph and then right next to it you have a list? That was easy to do right in tht WordPress editor without the need for CSS. The code looks like this.

We put the paragraph in one column and set it to take up two thirds of its container, and the list to be in another column and to take up one third of the container.

column code

Even better, when you reduce the width of the window, the columns will move so that one is on top of the other.

columns 2

Toggles

These fancy little UI widgets allow you to squirrel away a whole bunch of content and then have it collapse down to a single line. For a demonstration of why these are useful, go to any lesson page over in Tech Essentials. They produced a ridiculous amount of content for every lesson and the pages were reaching equally ridiculous lengths. It was nearly impossible to find anything! Then they packed everything away into toggles and the lessons are clean and serene.

To fully understand the change that toggles can make, visit this page that uses them and this page that does not.


Homework Assignment

I would like for you to be able to take something valuable home after this lab, other than the skills and knowledge you have (hopefully) gained. It’s important as students and future job holders that we represent ourselves well and that includes online. For this homework assignment, we are going to be creating a small resume/personal website for ourselves.

Part 1

Install a new WordPress website/instance at the location yourdomain/mysite.

To clarify, you will be installing a new WordPress website in a subdirectory called mysite.

Part 2

Let’s do some cleanup. Do the following:

  • Delete the Hello World post that comes by default with a new WordPress install.
  • Delete the Sample Page page that comes by default.

Part 3

I’m mostly a minimalist when it comes to websites, so bear with me please.

On your WordPress website, install the theme: Chosen.

– Instructions are in the lesson

– Make sure to activate it.

The theme can be found at the WordPress theme directory here.

In the future, you can use whatever theme you would like, but for this homework assignment, only use this theme.

Part 4

We need three pages for our website. We need one page for our front page (currently it is the page that displays latest posts). We need another page to hold our resume. Lastly, we need a page to hold all of our posts.

Let’s start by creating the first page, which will house our About Me section.

  • Create a page called About.
  • In the page body (content area), write a small paragraph about yourself. Mention things about yourself you would like other people visiting your website to know.
  • Include a picture of yourself or of something that represents you. My suggestion would be to put it above your paragraph.

Onto the second page. This page will hold our resume.

– Create a page called Resume.

– In the page body, write up a resume (it doesn’t have to be 100% accurate). Format it the way that you would like. My suggestion would be to use a mixture of heading text, paragraph text, bolds, and italics.

Onto the last page. This page will hold all of our posts.

– Create a page called Blog.

– Leave the page body blank.

Part 5

We will need a menu to display all of the pages we just created.

  • Creat a custom menu that includes the About, Resume, and Blog pages. Put them in that order.
  • Set it as your primary menu (sometimes referred to as top navigation menu).

Part 6

If you have looked at how your website displays now, things won’t be showing up the way that you might want. Your latest posts may still be the website front page. We need to tell WordPress what page will be our front page and what page to store all of the posts in.

In the WordPress dashboard, on the left, go to Settings and then Reading. This is one place where we can change how the front page displays.

  • In the Front page displays section, choose A static page.
  • Set the front page to About.
  • Set the posts page to Blog.

Now you can see why we left blog empty. Go check out what your website looks like.

Part 7

We have a blog page, but no posts. Often when creating a personal resume website, it is nice to have a section for blogging where you can write about what you are doing/working on.

Let’s create two posts for our blog. Give them at least one category and one tag each. Make sure to turn comments off for each post!

There is no requirement for what you write about. Just write two posts about what is on your mind. If you can’t think of anything, make one post about how tech lab is going for you.

To reiterate, create two posts. Give them a category and one tag each. Write about what you would like, just make sure it is a few sentences.

Part 8

One space where WordPress theme developer give us the ability to customize our website further is through the Customizer. You can access this via the WordPress dashboard, under Appearance. Under Appearance, go to Customize.

When making changes, make sure to hit Save at the top.

You will notice with this theme, some of the sections are grayed out. If you wanted access to these features, the theme developer wants you to pay.

In the Site Identity section, you can change your site title and tagline if you would like.

– Change the site title to your name.

– Change the tagline to something about yourself (how you want to represent yourself online.)

In the Social Media Icons section, you can add your social media links to your website (they appear in the top right). If you don’t want to add your real social media links, in the link text box, just put a #.

– Add a minimum of two social links. Again, if you don’t want to add your real social media links, just put a # in the link text box.

There are other sections to customize for your website. Take a look at what they are, but you don’t need to make anymore changes. Make sure to save the changes you make before you exit the Customizer!

Nice job! You just built a WordPress website!

You can check out my example: brendinnye.website/lesson7.

Submission

Email wordpress@labs.everettprogram.org the following:

  • Email subject line of: HW#7 Firstname Lastname.
  • The web address of your resume website, yourdomain/mysite.