Business Theme Pt 2: Index.php
WordPress documentation states “The
functions.php file is where you add unique features to your WordPress theme. It can be used to hook into the core functions of WordPress to make your theme more modular, extensible, and functional.“
The functions.php file is where we add features and functionality to our WordPress Theme. We can do this by either hooking into the core functions of wordpress, or by defining our own functions.
WordPress comes with a number of core functions, all of which are contained on the functions.php file in the wordpress core. These functions are not all automatically loaded. In fact, they are only loaded when our theme explicitly calls them, which is done on the theme’s functions.php by using a function called add_theme_support()
We already have a functions.php file that we created here when adding the Navwalker function. Here is what it looks like:
Here’s what this functions.php has: theme support for the title_tag. It also registers and loads the navwalker function, which is a custom function we have added in order to use a bootstrap menu, and we’ve registered a menu.
We are going to come back to this functions.php a few times in this tutorial.
Right now our index.php file contains an html template. This is actually what our finished front page is going to look like, except with the addition of a sidebar. Everything on it is hard-coded. You can view the bootstrap template here.
We’ve divided this into three files. Header.php contains the navbar and well as everything in the <head></head>. Footer.php contains the footer, links to .js files, and the closing </body></html> tags. Everything in between is on index.php
At the top of the page is a header box that spans the width of the site and sits directly below the navbar. This will be turned into a widget for the front page only.
Below that is a block of text that spans 8 columns, and a smaller block of text that spans 4 columns. When we view this on mobile, the 4 column block drops below the 8 column block, and both span 12 columns. This is responsive bootstrap design, and this tutorial assumes an understanding of bootstrap. This block will be the body of our page. The wide block will contain the posts; the narrower block to the right will contain the sidebar.
Below that is a grid of 3 boxes. Those will be turned into a widget for the front page.
We are going to turn this into a loop that calls up the post and page content, alongside the sidebar.
This is what we will start with for index.php:
We’ll begin by adding a sidebar. First, we need to register widgets on functions.php. Instructions for that are here.
First, we initialize widgets by adding this to functions.php
This both registers the widgets and adds a sidebar. (Note: all widgets in WordPress are called sidebars). Now we can access the sidebars under Appearance >> Widgets, and add some content to the sidebar. Let’s add Categories and a Tag Cloud.
Now we want the sidebar to appear on our page. Edit the sidebar div to look like this. When we refresh the page, we’ll see that a Category list appears, and below it a Tag Cloud. (If the tag cloud doesn’t appear, make sure that you have assigned tags to your posts). This is all using the default styles, and nothing much to look at.
The Posts Loop
The Loop is how WordPress outputs posts through a theme’s template files. The Loop extracts the data for each post from the WordPress database and then inserts the appropriate information in place of each template tag. Which template tags are used, the order in which they are placed, the styling, etc., is all determined by the theme.
First, let’s just create the page heading and container. Edit the left block to look like this:
Now let’s start building the loop. First, let’s add the post loop, just below the header div.
Within that comes the while loop. The first *if* statement says that *if* there are posts, execute what is within the statement. If there aren’t posts, don’t execute anything. The while loop is what we want to execute if there are posts. This will execute once for each post, cycling through the posts in chronological order (newest to oldest is the default behavior) until all posts have been outputted or until we reach some pre-determined number of posts.
The while loop is this:
Now we are going to add the following to the while loop. What this does is creates two columns, both of equal width (6 columns each on medium and large screen, 12 columns each on mobile). On the left (top on mobile) column is a placeholder for the featured image. On the right (bottom on mobile) is the post title.
This tutorial assumes that we have already created some posts and assigned them categories and tags. (If you haven’t, you likely are not seeing anything in the sidebar, since it is outputting categories and tags. If this is the case, create some posts now).
Now save index.php and look at the results. If we resize the browser, we can see the way the columns shift from being side-by-side to stacked once we get to mobile view.
We’ve created a placeholder for featured images. Let’s now give our theme the capability of featured images, and then add some images to our posts and display them on the site.
First, open functions.php and go to the top of the file. You see that we have already added theme support for the title-tag – we are using that in our header. Now let’s add them support for featured images. This is what our code looks like now:
Before we add the featured images, lets take another quick look at our code:
This code is going to create two columns, one for the featured image and one for the post title (and, later, post meta, excerpt, etc). But what if we do not have a featured image? That left column will be blank. It would be better, in that case, to get rid of the featured image column if the post has no featured image and let the post title, meta, etc span all 12 columns.
We do that with an if/else statement. The code will look like this:
In the admin, we can add a post without a featured image and publish. When we refresh this page, we’ll see that the post title is aligned left and the column spans all 12 columns.
Now let’s actually call the featured images. The function we use is “the_post_thumbnail();”, and we’re going to place that in a container with the class “post-thumbnail”, and those will replace our “IMAGE HERE” placeholder. Here’s what that looks like:
Refresh the page and you’ll see that the featured images now appear… and they are huge. We need to add a little css to make them fit the container. Add this to style.css
We’re going to enclose the loop in an article element, which will allow us to style each post block. The entire loop now looks like this:
Let’s add a little bit of css to style.css, to give the posts a border, and some padding:
The Loop: Post Content
We already have the featured image and the post title for each of our posts. Now we’ll add the post meta, an excerpt from the post, and a “Read More” button that leads to the single post.
We’ll also add links to the post title, and to the post image.
The finished loop code will look like this:
At this point, we have a functioning index page. It’s not pretty, but everything works.