Starting the MRP Theme

Topics Covered in This WordPress Tutorial:

Setting up the Theme, Creating Index.php, Swapping Static HTML with Dynamic PHP

Exercise Preview

Exercise Overview

With a fresh WordPress installation in place, you're ready to create a custom theme—essentially a collection of files that defines your site's appearance and functionality. In this hands-on exercise, you'll transform a completed static HTML mockup into a dynamic, data-driven WordPress theme. This process mirrors real-world development workflows where designers deliver static mockups that developers must convert into living, breathing websites powered by content management systems.

Creating the Theme Folder

WordPress organizes themes within subdirectories of your site's wp-content/themes directory. Each theme requires a minimum of two essential files: index.php (containing the core page structure) and style.css (housing both styles and metadata about your theme). This architecture allows WordPress to recognize and activate your custom theme while maintaining separation between content and presentation.

Understanding this file structure is crucial for WordPress development—it's the foundation that enables theme switching without losing content, and it's remained consistent since WordPress's early days, ensuring your knowledge transfers across versions.

Let's begin by establishing the theme directory structure and populating it with our HTML foundation:

1. Navigate to the Desktop, then Class Files > WordPress.org Class.

2. Select the mrpTheme folder.

3. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy the folder.

4. Navigate to your local development environment:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes

5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the mrpTheme folder into the themes directory. This folder contains your static HTML mockup—the blueprint for your dynamic theme.

6. Launch your preferred code editor.

7. For optimal workflow during the following exercises, open the entire mrpTheme folder in your code editor (most modern editors like VS Code, Sublime Text, or Atom support project-based editing). This approach provides better file navigation and context switching as you work across multiple theme files.

Modifying Style.css

Before WordPress can recognize and activate your theme, the main stylesheet must be named style.css and include specific header comments containing theme metadata. This information appears in the WordPress admin interface and helps identify your theme among others. While our provided stylesheet already uses the correct filename, we need to add the required header information that WordPress expects.

This metadata system allows WordPress to display theme details, handle updates, and manage dependencies—critical features for professional theme development and deployment.

1. In your code editor, open style.css from the mrpTheme folder located at:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes

2. Open MRP Theme Header Text.txt from the same mrpTheme folder. This file contains the properly formatted metadata comments required by WordPress.

3. Select all the header comment code from the text file.

4. Copy the selected code to your clipboard.

5. Close the text file and return to style.css.

6. At the very beginning of the document, before the existing @charset "UTF-8"; declaration, paste the copied header code:

   /*
   Theme Name: MRP Blog Theme URI: http://Noble Desktop.com/
   Description: Custom theme build for Monteith Restoration & Performance.
   Author: Your Name
   Version: 1.0
   Tags: Cars, Gray, Two-Column
   */

7. Replace Your Name next to the Author field with your actual name—this attribution will appear in the WordPress theme directory.

8. Save your changes with Cmd–S (Mac) or Ctrl–S (Windows).

Creating the Index.php File

The index.php file serves as WordPress's fallback template, determining the default layout for any page type that doesn't have a more specific template. Think of it as your theme's foundation—while you can create specialized templates for different content types (single posts, category archives, etc.), index.php ensures every page has a functional display method.

Starting with a well-crafted static HTML mockup, as we have here, provides an excellent foundation for WordPress development. This approach ensures your design is pixel-perfect before introducing the complexity of dynamic content generation. The conversion process involves strategically replacing static content with WordPress PHP functions that pull information from the database.

1. Open index.html from the mrpTheme folder.

2. Immediately save this file as index.php within the same mrpTheme folder. This simple rename transforms your static mockup into a WordPress template file.

Activating the Theme

Now that your theme contains the required files, WordPress can recognize and activate it. This step moves your theme from development files into an active, functioning website component.

1. Access the WordPress Dashboard through your local development environment:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Enter your administrative credentials when prompted.

3. In the Dashboard sidebar, hover over Appearance and select Themes.

4. Your custom theme should now appear in the installed themes list, displaying the metadata you added earlier.

   

Introducing PHP

WordPress leverages PHP as its server-side scripting language, handling database interactions and dynamic content generation. Unlike client-side languages such as JavaScript, PHP executes on the server before sending HTML to the browser, making it ideal for content management systems that need to pull information from databases and generate pages on-demand.

PHP integrates seamlessly with HTML through special tags that tell the server to process PHP code before sending the page to visitors. Understanding this execution model is crucial for WordPress development, as it explains how dynamic content appears as static HTML in users' browsers.

PHP code within HTML documents uses opening <?php and closing ?> tags, similar to HTML's tag structure:

<?php some code goes here; ?>

WordPress organizes most of its functionality into functions—pre-built blocks of code that perform specific tasks like retrieving post content, generating navigation menus, or fetching theme information. These functions follow a consistent syntax pattern:

<?php function_name(); ?>

Many WordPress functions accept parameters or arguments within their parentheses, allowing you to customize their behavior for different situations:

<?php function_name( 'parameter_value' ); ?>

Pay careful attention to syntax details: while spaces around parameters improve readability, the semicolon ending each PHP statement is mandatory. Missing semicolons cause parse errors that can result in blank pages or broken functionality—a common debugging point for developers new to PHP.

Swapping the Static Content

The transformation from static to dynamic begins with replacing hardcoded content with WordPress functions that generate information based on your site's data. This approach ensures content updates automatically as you add posts, change settings, or modify your site structure.

1. Return to index.php in your code editor.

2. Locate the title tag around line 6 and replace its static content with dynamic WordPress functions:

   <title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>

   This replacement introduces two essential WordPress functions: bloginfo() retrieves various site information based on the parameter provided ('name' gets your site title), while wp_title() adds context-specific titles for individual pages, posts, or archives. Together, they create descriptive, SEO-friendly page titles that update automatically.

   The versatile bloginfo() function serves as your gateway to WordPress site data—you'll use it frequently throughout theme development to access URLs, descriptions, and other configuration details.

3. Save the file and test your changes.

4. View the results in your browser:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

   The browser tab should now display the dynamic site title you configured during WordPress installation, demonstrating successful PHP integration.

Updating the Links

Static file paths work in mockups but fail in WordPress environments where page URLs vary based on permalink structures and site organization. WordPress solves this with functions that generate absolute paths regardless of the current page context—essential for themes that must work across different hosting environments and URL structures.

1. Return to your code editor.

2. Around line 7, replace the static style.css path with WordPress's stylesheet function:

   <link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" type="text/css">

   The 'stylesheet_url' parameter specifically targets your theme's main CSS file, ensuring WordPress always finds your styles regardless of site configuration or hosting environment.

3. Save and test the file in your browser using the same local URLs as before.

4. Your styling should now display correctly, though other assets remain broken until we update their paths as well.

5. Continue by updating the JavaScript and conditional CSS links around line 8:

   <script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/jquery/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/js/cufon-winxp.js"></script>
   <!—[if lte IE 6]>
   <link href="<?php bloginfo( 'template_directory' ); ?>/ie6.css" rel="stylesheet" type="text/css">
   <![endif]—>

   The 'template_directory' parameter provides the absolute path to your theme folder, which you then append with specific file paths. Note the forward slash (/) after each PHP closing tag—this separator is crucial for proper URL construction.

6. Update the header logo image around line 16:

   <img src="<?php bloginfo( 'template_directory' ); ?>/img/mrp-logo-header.jpg" ALT="Monteith Restoration &amp; Performance MRP" width="936" height="116" id="mrpLogo">

7. Apply the same template directory function to any remaining images in your theme (typically around lines 36 and 77, though exact locations may vary).

8. Save your changes and refresh the browser to confirm all assets now load correctly.

9. Update the homepage link around line 16 to use WordPress's dynamic URL generation:

   <div class="contentWrapper"><a href="<?php bloginfo( 'url' ); ?>"><img src="<?php bloginfo( 'template_directory' ); ?>/img/mrp-logo-header.jpg" ALT="Monteith Restoration &amp; Performance MRP" width="936" height="116" id="mrpLogo"></a></div>

   The 'url' parameter ensures your logo always links to your site's homepage, regardless of permalink settings or domain changes.

10. Test the logo link by clicking it—it should return you to the same page, confirming the homepage URL generates correctly.

Replacing the Static Navigation

Navigation represents one of WordPress's most powerful features: the ability to generate dynamic menu systems that site administrators can modify without touching code. The wp_nav_menu() function replaces static navigation lists with intelligent menu generation that respects user permissions, supports hierarchical structures, and enables non-technical content management.

This transformation from hardcoded links to dynamic menus exemplifies WordPress's core philosophy: separating content management from technical implementation.

1. Return to your code editor and locate the navigation <ul> element around line 20.

2. Replace the entire static navigation structure (typically spanning lines 20–28) with WordPress's dynamic menu function:

   <div id="nav">
      <div class="contentWrapper">
         <?php wp_nav_menu(); ?>
      </div>
   </div><!—end nav—>

   The wp_nav_menu() function automatically generates semantic, accessible HTML navigation using unordered lists—perfect for replacing your static markup while maintaining the same underlying structure for CSS styling.

3. Save the file and test your changes in the browser.

4. You should now see a simplified navigation showing only "Sample Page"—the default page included with every WordPress installation. This demonstrates successful dynamic menu integration; additional pages will appear automatically as you create them through the WordPress admin interface.

This foundational exercise establishes the core concepts of WordPress theme development: replacing static content with dynamic functions, managing file paths properly, and leveraging WordPress's built-in functionality. You now have a functioning theme that can grow and adapt as your site's content evolves, setting the stage for more advanced customizations in subsequent exercises.