Use WordPress Conditional Tags in “Naked” Template Layout(s) Displaying Searches.

Overview

WordPress Naked is a blank template that can be incorporated into an existing template. Correct dropped/broken layout divisions (<div>) that affect the sidebar and footer positioning within search result pages with WordPress conditional tags.

In the example template below, the WordPress search function output results in misaligned sidebars and footers (see screenshots).

The following method uses WordPress conditional tags in a PHP if/else statement.  It adds or omits an ending div tag (</div>) depending on the type of WordPress document it resides.  The correction was made without resorting to “Creating a Search Page”.

 

Requirements

  • HTML template
  • “WordPress Naked” template
  • Text editor

 

Installation

Before starting, make a backup copy of all original theme and template files.

Upload the blank template to the /wp-content/themes directory on the web server.  Cut the div’s from a working copy of the original template and paste the appropriate lines to the respective files in the blank (naked) template.

Use a validator with the “Show Source” option enabled.  Click the line numbers for mismatched div’s to help minimize trial and error.  Also, make sure the div’s are properly nested within the PHP code and around WordPress functions.

  1. The WordPress search function’s output is tied to the single.php and page.php template files.  There is an instance of “Sorry, no posts matched your criteria.” in index.php, but it can remain unchanged as long as the blog index output is OK.

  2. Start troubleshooting by deleting one(1) closing div (</div>) from a suspect division corresponding to the sidebar.php and/or footer.php of the template layout.  Review the revision by reloading the document in a web browser.  Revalidate, if necessary.

  3. After identifying the offending div, use the following code and substitute is_single and is_page for posts and pages, repectively.
    <?php if ( is_single() ) { echo ''; }else{ echo '</div>'; } ?>

  4. Retest for posts, pages, search results and no search results scenarios.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s


%d bloggers like this: