Custom Home Page

If you are anything like me, wordpress home pages have been a challenge. How do you design the home page that you want? If you don’t want your site’s home page to be just an standard archive of posts, or if you don’t want your site’s homepage to be just a generic page, what do you do? How is it accomplished?

Similarly, how do you present an archive of your entire blog, instead of an archive by category, so that when the user clicks on blog they get that archive, without category header or anything else?

Let’s begin by creating a file called front-page.php and copying the contents of page.php into that file. As we saw here, this will now automatically be used if wordpress is set to use a static page as your home page, instead of the default option of your latest posts.

Next, in the admin, create two pages: Home, and Blog. Place some random content on the Home page, perhaps a line of text that says “This is the home page.” Once that’s done, go to Customize >> HomePage Settings, set the home page to be a static page, and select the page Home for homepage and the page Blog for posts page. Add the page Blog to your menu.

Now go to your site. Click on Blog, and you’ll get a list of blog posts, without any category header. (It’s not a category archive). Click on home, and you will get a static page that contains “This is the home page” or whatever text you placed on it.

This home page is formatted like any other page. Because our theme at present has a content block on the left and a sidebar on the right, we’ll get exactly that. (We are using the same code as page.php).

Consider what content you would actually want to have on your home page. Do a mockup in photoshop or whatever graphics application you use. Next, we will create that page.

Let’s start by getting rid of the sidebar. Go to front-page.php and get rid of the side div element, in our case removing:

HTML

Once that’s done, refresh the page. You’ll see that the sidebar is gone, but the content block remains exactly as it was. It hasn’t expanded to the full width of the page because it is contained in a div with the classes “main block”. From our css, we see that main has a width of 65%, and floats left. So we want to remove that class from the div, going from this:

HTML

to this:

HTML

Refresh, and you’ll see the content block now extends the full width across the page.

Now let’s add some widgets. Following the instructions here, let’s create four widgets. The first will be a widget called showcase, and the next three will be boxes. Register those widgets on functions.php

PHP

Let’s add the widget “showcase” to the front-page. First, go into the admin and add some content to the showcase widget. I’ve added an image, and underneath it a block of text.

Next, go to index.php and find the code snippet that is used to display the sidebar. You only want the php snippet and not the divs containing it. Paste this code on front-page.php just under <div class=”container content”>. Change the widget being called to showcase from sidebar.

HTML

Now the showcase block will appear at the top of the home page, above the page content. Note that in our case, having added an image, we can add css classes to both the image and to the url. This is done under “advanced” when editing the image in the widget.

Next, we will add the three box widgets we’ve created. Add some content to each widget in the admin, and then add the following just above the last closing div tag on front-page.php

HTML

Add the following to styles.css to style the widgets we’ve added.

CSS