Customizing The WordPress User Experience With Template Files And Functions

Overview of Template Files

Template files in WordPress allow developers to customize the layout, design and functionality of WordPress sites and pages. They control how the various site components like headers, sidebars, footers, content areas and more are structured and displayed to site visitors.

The main template files used in WordPress include:

• Page template files – Control layout of individual pages
• Header and footer files – Allow custom headers and footers across the site
• Sidebar files – Enable widgets and custom sidebars
• Archive and search results files – Customize indexing and search pages

In addition to these template files, WordPress has a range of template functions that can be used within templates to include, display and customize elements.

Types of Template Files

Page Templates

Page templates in WordPress control the layout and structure of individual pages on a site. They allow for pages across a site to have their own unique designs and elements.

Page templates consist of a mix of HTML, PHP and WordPress functions. Common elements found in page templates include:

• The page header
• The page layout structure (sidebars, columns etc)
• Custom page elements like forms, images, videos etc
• Reference to header, footer and sidebar files

Page templates provide granular control over individual pages.

Header and Footer Files

Header and footer files control the top and bottom areas displayed on a WordPress site. The header appears at the top and shows before the main content while the footer shows after the main content.

Typical elements that can be included and customized in headers and footers include:

• Site branding, logo and taglines in the header
• Main site navigation and menus
• Search bars
• Taglines, copyright text and links in the footer
• Secondary navigation and site maps in the footer

Controlling headers and footers centrally from dedicated files allows global changes across all pages.

Sidebar Files

Sidebars in WordPress refer to widget areas usually in the left or right column of a page. Sidebar files register these sidebars so that widgets and custom elements can be assigned to them from the wp-admin dashboard.

Sidebars add useful supplementary information to site pages like:

• Related posts sections
• Mini feeds from social media sites
• Image galleries or banners
• Subscribe forms
• Tag clouds

Multiple sidebars can be registered and displayed across different templates.

Archive and Search Results Pages

In WordPress, archive pages display post listings by date, category, tag or custom taxonomy while search pages list relevant content based on search queries.

Archive and search templates control the structure and presentation of listings on these pages including:

• Looping through posts
• Displaying title, meta, excerpt for each post
• Pagination or load more buttons
• Sidebars with related information
• Integrated search bars

Effective archive and search pages make site content easy to navigate and digest for users.

Key Functions for Customizing Template Files

In addition to standard HTML and PHP, WordPress templates can leverage a range of template functions to include, display and customize elements.

get_header()

The get_header() template function is used to include the header file within page templates. This takes the header content from the header.php file and inserts it into the current page.

Example usage:

<?php get_header(); ?>

get_sidebar()

The get_sidebar() function is used to display a registered sidebar within a page template. Sidebars need to be registered first before they can be displayed.

Example displaying Primary Sidebar:

<?php get_sidebar('primary'); ?>

get_footer()

Similarly, the get_footer() function includes and displays the global footer file’s content from footer.php into the current page template.

Example usage:

<?php get_footer(); ?>

the_title()

Within The Loop used on archive and search pages, the_title() template tag is used to display the title of the current post in the listing.

Example usage:

<?php the_title(); ?>

This helps customize title output within post listings.

Custom Page Templates

Page templates allow for completely customized layouts and elements for individual pages on a site.

Creating a Page Template File

To create a custom page template, a new .php file is created within the theme’s root folder which contains the template code. Common naming convention is page-templatename.php.

Key things template files need:

• Template Name comment for identification
• Custom page structure and elements
• Reference to wp_head() and wp_footer() for scripts and styles
• get_header() and get_footer() to pull those global template parts in

Assigning a Template to a Page

Page attributes within WordPress provide a dropdown of all available templates to choose from. The custom page template can be selected here which assigns it for use on that page.

Templates can also be assigned programmatically for more customization.

Example Page Template Code

A simplified example page template structure containing key elements:

<?php
/*
Template Name: Full Width Page
*/
get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        // Page content goes here
        ?>
    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();
?>

This creates a full width page template without sidebars that can be assigned to pages.

Customizing Header and Footer Files

Modifying the header.php and footer.php template files allows global header and footer customization across a WordPress site.

Modifying Header File Elements

Typical things that can be changed in the header include:

• Adding or modifying the site title and tagline
• Changing the main navigation menu
• Adding secondary utility navigation menus
• Integrating search bars
• Displaying global banners/alerts

<header>

  // Adding site logo
  <img src="logo.png"> 

  <?php wp_nav_menu(['theme_location' => 'primary']); ?>
  
  // Secondary nav menu
  <nav>  
    <?php wp_nav_menu(['theme_location' => 'utility']); ?>
  </nav>

</header>

Adding Custom Elements to the Footer

The footer file can also be modified to add more elements like:

• Secondary navigation menus
• Site maps and content indexes
• Social media links
• Copyright information

<footer>

  <nav>
    <?php wp_nav_menu(['theme_location' => 'footer']); ?>
  </nav>

  <div class="social">
    Social media links
  </div>

  <div class="copyright">
    Copyright © <?php echo date('Y'); ?>
  </div>

</footer>

Creating Custom Sidebars

Sidebars containing useful supplementary information can be configured globally and displayed using sidebar templates.

Registering a Sidebar

To start, a new sidebar needs to be registered within the functions.php file. This identifies it for use in templates.

function mytheme_widgets_init() {
    register_sidebar( array(
      'name'          => 'Primary Sidebar',
      'id'            => 'primary',
      'before_widget' => '<div>',
      'after_widget'  => '</div>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );  

Displaying a Sidebar in Templates

Using get_sidebar(), the registered sidebar can now be included into any template file.

get_header();

if ( is_active_sidebar( 'primary' ) ) {
    get_sidebar( 'primary' );
}

get_footer();

Widgets can then be managed from the wp-admin dashboard and will display in the templates.

Customizing Archive and Search Pages

Loops, custom queries, pagination and other optimizations help improve WordPress archive and search page user experiences.

Using loops and queries

Archive and search pages rely on WordPress loops to output sets of posts. Custom WP_Query parameters filter and control output.

$args = ['posts_per_page' => 10, 'post_type' => 'post'];

$query = new WP_Query( $args );
if ( $query->have_posts() ) {
  while ( $query->have_posts() ) {
    $query->the_post();
    the_title();
    // more display code
  }
}

Pagination and menus

Pagination manages long lists over multiple pages. Custom menus provide more access options.

// Pagination 
echo paginate_links();

// Custom menu
wp_nav_menu(['theme_location' => 'archive']);  

Examples

Putting it together, a complete archive template displays posts, navigation and sidebar:

<?php get_header(); ?>

<?-- Main content loop -->
<?-- Pagination menu -->

<?-- Sidebar -->
<?php get_sidebar(); ?>

<?php get_footer(); ?>