New WordPress Theme For My Website

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

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

• 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

Getting ready 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

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

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

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

Tricky parts

<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">&amp;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

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.