Creating a new website is something I had in mind for a few months now. So far I’ve created 3 or 4 projects using WordPress as a CMS (Content Management System).

Today it’s (finally) time to create a new theme for myself to use.

Sitemap is key

Before I’ll get into working on the website itself there are some things I need to do. Normally I start working on a website by defining the brand, goals that it needs to achieve, colors to be used, typography and user stories (they help me understand what a user will want to do with the website). Fortunately I already have those things worked out (more or less) so all that left to do is – creating a simple sitemap.

There are many ways to create a sitemap. For example you can use Google Graphs to show the structure of a webpage in a more visual way (especially when it comes to using colors that are used to mark specific webpages’ roles).

A Simple Sitemap

Sitemap I’ll use for my work today is simply a list. Ok. So let’s take a look at my website’s sitemap:

  • Main Page (first page that user comes across)
  • Blog page (general category that will be used to post posts)
    • Post page (a page used for displaying single posts)
  • About Me (general information about me)
  • Portfolio page (a webpage used to display my portfolio)
  • Contact page (simple page with details on contacting me)
  • Additional pages (pages that needs to be created (i.e. due to legal requirements))
    • Cookies information page (page for displaying information about cookies)
    • 404 page (for people who get lost often)

Setting up WordPress

Now I know what to build. First step is setting up local WP build, that help me faster test my code, and see result. To set up WordPress I use MAMP – check this step-by-step instructions to learn how to install WordPress locally.

Getting ready to build

WordPress uses website templates (or views) to generate content on websites. That’s why I use sitemaps to work-out what views I need to build.

Basing on the created sitemap I need to create following views:

  • Main page view,
  • Blog view,
  • Single post view,
  • Portfolio view,
  • Contact view,
  • Additional view (cookies information and other simple pages),
  • 404

Building a new theme

To speed things up I recommend using a starter theme. Basically it will generate all the necessary files for us – personally I use underscores which comes handy.

After downloading generated theme all we need to do is to drag it to the right folder:

htdocs > yourwebpage > wp-content > themes

After dragging that theme you can go to http://localhost:3000 in your browser and activate this theme.

Header and footer

After doing that it’s time to work on 2 basic elements of every webpage in WP environment which are wp-header and wp-footer. Those elements are responsible for adding header and footer to web pages.

Since I already have my code prepared all I do is copy it into right folders. After that it will display header and footer on every page by using php snippet <?php wp-get(header();) ?>.

Added code is still static, to make it dynamic we need to take advantage of WordPress functions. First of all we need to add function responsible for outputting a custom made menu. To do that we need to replace our static menu bar with WordPress function.

Webpages templates

To prepare WP theme I use page templates combined with custom fields. This solution allows me to fully control my content. For this project I created 5 different page templates (for pages like Home, About, Portfolio, Portfolio Item and Contact).

The template responsible for displaying blog content is index.php along with contents of template-parts folder.

Tricky parts

The hardest part for my was completing static front page with dynamic elements (3 newest articles are displayed on the main webpage). Trying to get it working was quite a fuss. But in the end that is what I came up with.

<div class="row">
      <?php $latest_blog_posts = new WP_Query( array( 'posts_per_page' => 3 ) );
      if ( $latest_blog_posts->have_posts() ) : while ( $latest_blog_posts->have_posts() ) : $latest_blog_posts->the_post(); ?>
        <div class="col-md-4 blog-post">
          <?php the_post_thumbnail('post-thumbnail', array( 'class' => "img-responsive"));
                the_title( '<h2 class="article-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );?>
          <p class="article-small">
            <?php mrkaluzny_posted_on(); ?>
          </p>
          <?php
                the_content( sprintf(
                    /* translators: %s: Name of current post. */
                    wp_kses( __( '<div class="btn button">Continue reading <span class="meta-nav">&rarr;</span></div>', 'mrkaluzny' ), array( 'span' => array( 'class' => array() ) ) ),
                    the_title( '<span class="screen-reader-text">"', '"</span>', false )
                ) );

                wp_link_pages( array(
                    'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'mrkaluzny' ),
                    'after'  => '</div>',
                ) );
            ?>
        </div>
      <?php endwhile; endif; ?>

Another tricky part was completing the Portfolio page with dynamic content added from child pages. Fortunately simple for each function quickly helped me with that.

<?php $child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$post->ID." AND post_type = 'page' ORDER BY menu_order", 'OBJECT');
    if ( $child_pages ) :
      foreach ( $child_pages as $pageChild ) :
        setup_postdata( $pageChild );
        $thumbnail = get_the_post_thumbnail_url($pageChild->ID);
        $tags = get_field('tags', $pageChild->ID);
        $class = get_field('class', $pageChild->ID);
        if($thumbnail == "") continue; // Skip pages without a thumbnail ?>
        <a href="<?= get_permalink($pageChild->ID) ?>">
        <div class="item <?php echo $class ?> img-swap" data-img="<?= $thumbnail ?>">
          <div class="col-xs-12 item-sub text-center">
            <h3><?= $pageChild->post_title ?></h3>
            <p class="caption"><?php echo $tags ?></p>
          </div>
        </div></a>
<?php endforeach; endif; ?>

In this particular example I used custom fields that add classes to div’s in which the portfolio item is contained. The purpose of that was to get advantage of isotope.js plugin for sorting different projects.

Conclusion

WordPress for me is a weird CMS, sometimes an intangible useless powerhouse with features that no one really needs, and other times a CMS that can handle any task with relative ease. My theme definitely needs improvements, but for now is all I need.

The code is available on my GitHub account, you can always head to the project itself.

If you have any questions or tips – please contact me on Twitter @mrkaluzny or leave a comment.