Metro Pro theme

To set up the Metro Pro theme front page

You will need the Metro Pro theme and…

  • 6 Blog posts with Featured Images applied to them.
  • A category called Featured. (You can name this category anything you like.)

How WordPress builds your front page

The Metro Pro theme displays condensed versions of 6 blog posts on its front page. These posts are pulled in from whichever category you choose. We chose a category named Featured.

Each condensed post or snippet includes…

  • The blog post’s featured image.
  • Some text from that blog post.
  • A link to the full post, that says [Read More…]

The content section of the home page layout…

The web designer who built the Metro Pro theme has made a set of predefined boxes that we can add content to. 6 post snippets and featured images, taken from 6 blog posts, will appear inside of these layout boxes.

The main content area of the layout is made from 6 widget areas. Home top, home middle left, home middle right, and home bottom. You can find these widget areas in…

WordPress Dashboard > Appearance > Widgets

  • Home – Top…
    Shows one large image that spans the main content area of the page. Under this WordPress displays 350 characters of text and a [Read More…] link.
  • Home – Middle Left and Home – Middle Right…
    These two widget areas appear side by side and, together, span the main content area of the page. WordPress displays a featured image, 165 characters of text and a [Read More…] link in the left and right widget areas.
  • Home – Bottom…
    This is a single widget area that spans the main content area of the page. Snippets of three blog posts, taken from the Featured category, appear one on top of the other.  These post snippets display a featured image to the left and 260 characters of text with a [Read More…] link, to the right.

Sidebar and footer widget areas…

The Metro Pro theme, uses a standard WordPress sidebar widget area. The theme also has 3 footer widget areas. Just drag widgets into these widget areas and configure them as usual.

You cannot use the middle footer area on its own (footer 2). You must start with footer 1, then footer 2, then footer 3.

These are the Genesis Featured Post Widget settings we used in the videos…

Home-Top Genesis Featured Post Widget settings for Metro Pro theme

Title: Featured Story

Category: Featured

Posts to show: 1

Offset: 0

Order by:

Exclude previously displayed posts:

Post title: [YES]

Post info:

Content type: [Show Content Limit 350 Characters]

More text: [Read More…]

Show Gravatar:Size:Align:

 

More posts from this category:
Title:
Number of posts to show:
Show featured image: [YES]

Image size: 700×400

Image alignment: [None]

Show category archive link:
Link text:

 

Home-Middle Left Genesis Featured Post Widget settings for Metro Pro theme

Title: Featured Story

Category: Featured

Posts to show: 1

Offset: 1

Order by:

Exclude previously displayed posts:

Post title: YES

Post info:

Content type: (Show Content Limit) 165 Characters

More text: (Read More…)

Show Gravatar:

Size:

Align:

 

More posts from this category:

Title:

Number of posts to show:

Show featured image: YES

Image size: Featured Middle 332 x 190

Image alignment: Left

Show category archive link:

Link text:

 

Home-Middle Right Metro Pro Genesis Featured Post Widget settings for Metro Pro theme

Title: Featured Story

Category: Featured

Posts to show: 1

Offset: 2

Order by:

Exclude previously displayed posts:

Post title: YES

Post info:

Content type: (Show Content Limit) 165 Charactors

More text: [Read More…]

Show Gravatar:

Size:Align:

 

More posts from this category:

Title:

Number of posts to show:

Show featured image: YES

Image size: Featured Middle 332×190

Image alignment: Left

Show category archive link:
Link text:

 

Home-Bottom Genesis Featured Post Widget settings for Metro Pro theme

Title: Featured Story

Category: Featured

Posts to show: 3

Offset: 3

Order by:

Exclude previously displayed posts:

Post title: YES

Post info:

Content type: (Show Content Limit 260 Characters)

More text: [Read More…]

Show Gravatar:

Size:Align:

 

More posts from this category:

Title:

Number of posts to show:

Show featured image: YES

Image size: Thumbnail 150×150

Image alignment: Left

Show category archive link:

Link text:

 

Metro Pro footer

You can add any widgets you like to your footer. But don’t forget that you must put content in Footer 1, then Footer 2, then footer 3.

If you try put content in Footer 2 without having any content in Footer 1, the content will not appear.

For this video I’ll add…

  • A Recent Posts widget in footer 1
  • A Calendar widget in Footer 2
  • And the Recent Comments widget in Footer 3

But you could add any widgets that you choose. Think about what would be useful for your site visitors. Then experiment and see what works best.

Metro Pro Primary Sidebar

The StudioPress demo site shows…

  • One text widget containing an image.
  • One text widget containing, HTML links, with a class of “social-buttons”.
  • And the eNews Extended widget, with a signup box for your newsletter.

I’ve made an in-depth tutorial just about the eNews Extended plugin. So I won’t cover that again here.
The text widgets containing the image and buttons are easy to set up when you see how it’s done.

Using WordPress as a HTML editor

First we need to make a new page or post and save it as a draft, don’t publish this post! All we want to do is use WordPress as our HTML, code editor.

In our draft post we will…

  • Add an image.
  • Add some text.
  • Add a link.
  • And format the text using bold, italic and a color.

That’s it for the image at the top of the sidebar.

Next we’ll add the button style social media links.

Open your draft post again and use the WordPress link button to add text links, that when clicked, open your social media pages, twitter and Facebook etc.

Now we have to edit the HTML link code, to add the button styling. Luckily, this is quite easy.

First select the Text tab in your WordPress editor, it’s above the formatting buttons on the right.

Read the HTML code that makes each link, and between the A and the HREF add…

  • class=”social-buttons”

The last link needs…

  • a class=”social-buttons last”

Metro Pro theme HTML code for social media buttons

When you paste the link HTML into a text widget, WordPress will style the links with the social-buttons CSS style. This is what makes the plain text links appear as rectangular buttons.

That’s how I set up the sidebar, but you could choose any widgets you like.

These instructions will give you a sidebar similar to the demo site. If you want to add an email sign up box, watch my other tutorial about eNews Extended plugin.

BUT! Don’t forget that there are many other widgets, that you could add to your sidebar. Experiment, try out a few different widgets and see what you think.

This tutorial was about the Metro Pro theme by StudioPress.