Are you ready to dig into another installment of Let’s Build A WordPress Theme From Scratch? Today we are going to talk about another three files that if used together can really be an asset if your viewer happens upon a page that doesn’t exist. We all want to be well oiled machines when we develop and try to never forget anything but sometimes, even we make mistakes. So we need to take the proper measures to prevent one of our mistakes affecting our audience. This is accomplished by setting up a 404 error page. In WordPress we use a template file called, you guessed it, 404.php. There isn’t any mandatory code that needs to appear in this template file. It doesn’t have to be anything special, but I recommend that you do make it special! Even as developers we need to think about a user’s experience. If they have landed on a broken link then that is already not a very good experience on your website. You want to add in a statement that is lighthearted, plus provide them a few options of how to get to where they were trying to go. This is your chance to use slight of hand to make your viewer unaware they landed on a broken page on your website. Let’s look at the code for the 404.php file below.
This is the third article in the Let’s Build A WordPress Theme From Scratch Series.
You will notice that this is a VERY simple example. There really isn’t anything special about it. It would literally be the minimum you would want to add. For the sake of learning the code I kept it very plain jane but you would want to really evaluate the tone and mood of your website and give your audience specific verbiage and directions on how to get to the pages YOU want them to go to. Maybe provide them a few links to your major landing pages, or links to the services you offer. The one major thing I think you should always have on the 404 page is search capability. I have included the code needed to do that below:
<?php get_header(); ?> <div class="page-content-title-wrapper"> <div class="wrap_1280"> <h2 class="not-found-title">404 Error: Page not Found!</h2> <div class="clearfix"></div> </div> </div> <div class="wrap_1280"> <div class="main-content"> <div class="left-page-content col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h2 class='not-found-alert'>Something went a little wrong. Let's find you a solution!</h2> <p class="not-found-paragraph">To help you find what you are looking for simply use the navigation above or search for what you are looking for below. <div class="search-form-404"> <?php include(TEMPLATEPATH . "/searchform.php"); ?></div> </div> </div><!-- END MAIN-CONTENT --> </div><!-- END wrap_1280 --> <div class="clearfix"></div> <?php get_footer(); ?>
In this example I created a 404 error title, created an alert that told the viewer that something went wrong but we could help them find a solutions, and then gave them directions on finding what they were looking for in the first place. The search form is generated by a php include function which uses the TEMPLATEPATH and concatenates to the searchform.php file path. “You said what?” Concatenation is a fancy word for adding php code to sting content. Think of it as writing html and then attaching inline css to that element. Don’t do that by the way!! This function tells the browser to include the searchform.php file from your TEMPLATEPATH which is the root of your file structure. We will talk about the purpose of the searchform.php file a little later.
The 404.php file doesn’t need to be as fancy as your homepage but it certainly needs to be thought out. Make sure that it has the same look and feel of the rest of the website so that it doesn’t look like they landed on Pluto (Awww poor Pluto), when they were originally on the Moon. Once it looks like it belongs, then think about how you can make it an enjoyable experience that they just took an extra, waste of their life step on your website. And finally, don’t forget to give them directions so they don’t just simply leave because they’re pissed your website is broken.
Now on to the searchform.php file we talked about earlier. This file template allows you to structure and style the search form to function and look the way you want. If you click on the link I just gave you, there is plenty of basic code and styling information to accomplish a simple search form. Remember that anytime your search bar appears on your website it is going to reference the structure on the searchform.php and then reference the css attached to those ids and classes. Take a look at my example code:
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" /> </label> <input type="submit" class="search-submit" value="Search" /> </form>
The WordPress search form uses the GET method and populates anything on your website that matches the searched criteria. Check out the get_search_form() function on the Codex to see some other really great examples. When I was first learning all of this stuff it always helped me best to grab the code, even though I didn’t know what any of it did, and put it somewhere that I could manipulate it. Sometimes it is best to break things in order to better understand how to make it work!
So now we know how to build a dynamic 404 error page and we know how to build the search form, but how do we build the page that displays the search results? That would be the search.php file! Here is a little tip I use: Simply copy and paste the code from your home.php file into search.php because for the most part the code to display the results could look exactly like the list of blog posts. You do need to change it just a little. Take a look at the code below:
<?php get_header(); ?> <div class="page-content-title-wrapper"> <div class="wrap_1280"> <?php if (have_posts()) : ?> <h2 class="page-content-title">Search results for: <?php echo get_search_query(); ?></h2> <div class="clearfix"></div> </div> </div> <div class="wrap_1280"> <div class="main-content"> <?php get_sidebar(); ?> <div class="left-page-content col-lg-10 col-md-10 col-sm-9 col-xs-12"> <div class="container"> <div class="row" id="ms-container"> <?php while (have_posts()) : the_post(); ?> <div class="ms-item row col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="blog-page-content"> <?php if (has_post_thumbnail()) : ?> <figure class="article-preview-image"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> </figure> <?php else : ?> <?php endif; ?> <h2><a href="<?php the_permalink(); ?>" class="category-title-link"><?php the_title(); ?></a></h2> <div class="category-post"> <h6 class="article-meta-extra"> <?php if (has_category() && !has_category('Uncategorized')) : ?> <?php the_category(' | '); ?> | <?php else : ?> <?php endif; ?> Posted on <?php the_date(get_option('date_format')); ?> at <?php the_time(get_option('time_format')); ?> by <?php the_author_posts_link(); ?> </h6> <?php the_excerpt(); ?> </div><!-- END CATEGORY POST --> <?php if (has_tag()) : ?> <p class="tags"><?php the_tags('', ' '); ?></p> <?php else : ?> <?php endif; ?> <a href="<?php the_permalink(); ?>" class="btn btn-blue btn-block">Read More</a> </div><!-- END EACH BLOG--> </div> <?php endwhile; ?> <?php else : ?> <article class="no-posts"> <h1>No posts were found.</h1> </article> <?php endif; ?> </div> </div> <div class="clearfix"></div> <div class="article-nav clearfix"> <p class="article-nav-next pull-right"><?php previous_posts_link(__('Newer Posts »')); ?></p> <p class="article-nav-prev pull-left"><?php next_posts_link(__('« Older Posts')); ?></p> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div><!-- END MAIN-CONTENT --> </div><!-- END wrap_1280 --> <?php get_footer(); ?>
The only thing I did was break up the if/while statement so that I could give the viewer a title that displays the search query. First I wrote in the code for the if statement. Then underneath I wrote in a div with a special class that will style a long banner across the top that will contain a small query statement. In an h2 tag I write “Search results for:” and then I include the get_search_form(); function that we discussed above that simply displays the exact text entered in the search. This allows us to give the viewer a reference to what they just searched for and that these are the results for the query. Next I left the while statement where it was in the original home.php code, I just took out the if and put it above the reference title. Now your search results will appear in the same fashion your blog posts display. You of course could code them to look anyway you want but I just do this to save a little time.
We Did It!
Are you feeling more confident building a WordPress theme from scratch yet? Hopefully things are coming together nicely. It really is a puzzle and all of the pieces are easy to distinguish and put where they need to go. Always remember that all of these files were created to, in the end, make for a really navigable website that ultimately helps people find whatever it is you need them to find. Having the skills to build a WordPress them from scratch will look great on your resume or sound great in an interview. Being able to have that, plus knowing how to optimize the code to perform and be user friendly takes you to an even higher level. Never stop pushing your abilities because a web developer is no longer just a builder but sometimes a designer, thinker, dreamer, marketer, and salesman. I strive to be everything I can be in our industry so that I can be valuable and rise above my competition. I will always put as many extra tips and tricks throughout this series having to do with other important aspects of the website building process, to help you be a master of the web.
Team Treehouse – Learn PHP for WordPress
If you are serious about learning to develop custom themes in WordPress, I highly recommend you join Team Treehouse. They have a full video course on everything WordPress development, including a course on specifically writing PHP for WordPress.