WordPress front page

MMP 460 > Week 6

Most of your portfolio designs require a homepage, either with a large image, some information or other design elements. Currently our sites all open up to blog posts. We can use front-page.php to create a separate page to appear at the index of the site.

This part is a little more complicated, because you can use different templates depending on what you want your front page to look like.

In all cases, we need to createa a new template called front-page.php and set the blog to load it as the front page.

First, using the Dashboard, create a page called Front Page and a Page called Blog. Front Page will be the splash page of the portfolio, and blog will be the new page to display posts. We can leave them blank at first.

Next go to Settings > Reading and set the front page and posts page to Front Page and Blog.

Now you're blog will load the template from front-page.php instead of the default page.php template.

Here's where we need to make a choice:

If your front page design has an intro/bio and some basic information, like this example, you should make a template based on page.php.

If your front page is a grid with examples of your work, like this example, you should use archive.php as your template.

Intro front page

If you chose the first one, follow from here.

Duplicate page.php and name it front-page.php.

You may want to remove parts of the template like get_sidebar(); or the comments section.

Other than that, your Front Page content will appear here and you can use the .home selector to style the content.

Grid front page

If you chose the second choice, follow from here.

Duplicate archive.php and name it front-page.php.

We can remove parts that are specific to the archive/category page like single_cat_title( '<h1 class="page-title">', '</h1>' );.

We also need to crate a Front Page category and assign it to any posts you want to appear on the front page.

Now we need to modify the WordPress loop to load the Font Page tagged posts.

$category = new WP_Query( array('category_name'=>'Front Page') );
while ( $category->have_posts() ) : $category->the_post();

Now you can dynamically update the posts that appear on your portfolio without adding or writing any code at all.