• Home

  • Custom Ecommerce
  • Application Development
  • Database Consulting
  • Cloud Hosting
  • Systems Integration
  • Legacy Business Systems
  • Security & Compliance
  • GIS

  • Expertise

  • About Us
  • Our Team
  • Clients
  • Blog
  • Careers

  • VisionPort

  • Contact
  • Our Blog

    Ongoing observations by End Point Dev people

    A Simple WordPress Theme In Action

    Steph Skardal

    By Steph Skardal
    February 22, 2011

    I’m a big fan of WordPress. And I’m a big fan of building WordPress themes from the ground up. Why am I a big fan of building them from the ground up? Because…

    • It’s very easy to setup and build if you plan to move to utilize WordPress’s blog architecture for your site, but just have a set of static pages initially.
    • It allows you to incrementally add elements to your theme from starting from the ground up, rather than cutting out elements from a complex theme.
    • It allows you to leave out features that you don’t need (search, comments, archives, listing of aticles), but still take advantage of the WordPress plugin community and core functionality.
    • The learning curve of WordPress APIs and terminology can be complicated. It’s nice to start simple and build up.

    Here are some screenshots from my simple WordPress theme in action, a site that contains several static pages.

    The template is comprised of several files:

    File Notes
    header.php Includes doctype, header html, and global stylesheets included here. wp_head() is called in the header, which will call any executables tied to the header hook using WordPress’s hook API. wp_list_pages() is also called, which is WordPress’s core method for listing pages.
    footer.php Includes footer navigation elements, global JavaScript, and Google Analytics. wp_footer(), is also called here, which will call any executables tied to the footer hook using WordPress’s hook API.
    index.php Calls get_header() and get_footer(), WordPress’s core methods for displaying the header and footer. This also contains static content for the homepage for now (text and images).
    page.php Calls get_header() and get_footer(). Uses The Loop, or WordPress’s core functionality for display individual posts or pages to display the page content to render the single page static content.
    404.php Calls get_header() and get_footer(). This is similar to the index page as it contains a bit of static text and an image and is displayed for any pages not found.
    CSS, images, JS Static CSS, images, and JavaScript files used throughout the theme.

    Files that are more traditionally seen in WordPress templates excluded from this template are the sidebar.php, archive.php, archives.php, single.php, search.php, and searchform.php. I plan to add some of these later as the website grows to include blog content, but these templates are unnecessary for now.

    Below are a couple snapshots of the shared elements between pages.

    The header (red) and footer (blue) are shared between the page.php and index.php templates shown here.

    You can see the site in the wild here.

    Update: Since this article was published, the website shown here has been updated to include a “blog” page, which is one more page that uses the exec-php plugin to list blog articles.

    php wordpress