the screenshot of handdrawn-lite wordpress theme

Handdrawn-lite WordPress theme is now available on the theme directory of WordPress.org. You can download it from this page, and watch the demo here.

Handdrawn Lite is the perfect theme for your blog or your personal website. It comes with two post formats: standard and aside. The difference between them is that all the text of the aside post has a hand written style, while only the title and the meta-informations of the standard post have a hand written style.
This WordPress theme allow users to add a clip mask to the featured image, with the shape of a circle, with the shape of a flower or with the shape of a cloud. When you edit a post, under the “Handdrawn options” area you can find a select option which contains the shape of the clip masks. When you select “circle” or “cloud” or “flower” a new checkbox will appear: by checking it the title of the post will be displayed along a circle textpath.

Please note  that the image must have the ‘aspect-ratio of 4: 3 so that the final effect is the desired one.

This WordPress theme includes a sidebar, it appears at the right of the screen and it’s called “Right Sidebar Widget Area.” The content of the page will therefore be divided into two columns: a larger left column, containing the post and a narrower right column containing the widgets. If your sidebar is left blank, because no widget is associated with it, then the site will be displayed in the main column in a centered position relative to the screen.
On devices with a resolution of less than 1024 pixels, as many smartphones and tablets, the sidebar is positioned outside the visible part of the screen, and can be viewed by clicking on the arrow at the top right of the screen (near the site title).

This is the second part of a serie dedicated to the creation of a WordPress template. In the first part we saw how to create the folders and files needed for the functioning of the theme, in this post we will begin to change the HTML code of the main files.

I remind you that this guide is meant to recreate the Mymagazine WordPress theme which you can download from the theme directory of WordPress.org.

To follow this guide you need:

  • a development version of WordPress;
  • a basic knowledge of html, css, php and jQuery.

The style.css file of a WordPress template

The style.css file contains the main css instructions of the WordPress template. It can be the only file containing css rules, but in most cases you’ll find other css files within theme folders. This file always begins with a few lines of code contained within a comment, called ” file headers “. These instructions consist of a name and a value separated by the character “:” and contain meta-information on the theme, which allow WordPress to discover it in the admin panel, as we have seen in previous images; also provide more informations about the author, the description, version, and especially a few keywords (tags) that allow you to locate it inside the WordPress template directory.

/*
Theme Name: MyMagazine-demo
Theme URI: http://www.svgthemes.com/mymagazine
Author: Alessandro Costa
Author URI: http://www.svgthemes.com
Description: Mymagazine is a creative and responsive WordPress theme. It has a clean and colorful magazine style, perfect for news websites dedicated to sports or travels.
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, two-columns, right-sidebar, responsive-layout, flexible-header, custom-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, translation-ready, custom-background
Text Domain: mymagazine
*/

In this code I used exactly the code contained in Mymagazine, the only difference is the word “-demo” which I added to the name of the theme to avoid conflicts with the real one. On this page of the codex you can see the list of the tags allowed.  Tags can be used only if the theme meets certain conditions, otherwise the theme reviewer will report the error, inviting you to remove the tag, or to modify the theme to make it conform to its meaning. Copy the code above in the style.css file, save it and return to the theme installer: as you can see the theme is ready to be activated!

WordPress themes installator screenshot

The preview of the new WordPress template is a blank screen, you should add a .png image to the root folder of the theme an image in .png format called “screenshot.png”, whose optimum dimensions are 1200 x 900 pixels.
All other instructions contained in style.css exclusively to the aesthetic appearance of the site, and are not specific to the operation of the WordPress template. For this reason I will not dwell over the style.css file, but if you have downloaded the theme, you can copy the contents of the style.css file and add it in your file.
Now click on “active” and try to view the site. Not exactly what you expected, is it? Quiet, it is normal that there is some display problem, so far we have only used html, php or anything WordPress templates tag. It’s time to rewrite the code!

The header.php file

All pages of the site will have the same code contained within the <head> section and the code used to display the header and the navigatio menu; so, rather then type it in all pages of the site, we can put this part of the code in the header.php file, letting WordPress retrieve it on all pages.

At this time the code inside the header.php file should be as follows:


<!DOCTYPE html>
<html lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <title>MyMagazine – a free WordPress theme</title>
        <link rel="alternate" type="application/rss+xml" title="MyMagazine » Feed" href="http://www.svgthemes.com/mymagazine/feed/">
        <link rel="alternate" type="application/rss+xml" title="MyMagazine » Comments Feed" href="http://www.svgthemes.com/mymagazine/comments/feed/">
        <link rel="stylesheet" id="mymagazine_google_fonts-css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C700%2C300italic&amp;ver=4.4" type="text/css" media="all">
        <link rel="stylesheet" id="mymagazine_foundation-css" href="http://www.svgthemes.com/mymagazine/wp-content/themes/mymagazine/css/foundation.min.css?ver=4.4" type="text/css" media="all">
        <link rel="stylesheet" id="mymagazine_main_css-css" href="http://www.svgthemes.com/mymagazine/wp-content/themes/mymagazine/style.css?ver=4.4" type="text/css" media="all">
        <script type="text/javascript" src="http://www.svgthemes.com/mymagazine/wp-includes/js/jquery/jquery.js?ver=1.11.3"></script>
        <script type="text/javascript" src="http://www.svgthemes.com/mymagazine/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
        <link rel="https://api.w.org/" href="http://www.svgthemes.com/mymagazine/wp-json/">
        <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.svgthemes.com/mymagazine/xmlrpc.php?rsd">
        <meta name="generator" content="WordPress 4.4">
        <link rel="icon" href="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-32x32.gif" sizes="32x32">
        <link rel="icon" href="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-192x192.gif" sizes="192x192">
        <link rel="apple-touch-icon-precomposed" href="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-180x180.gif">
        <meta name="msapplication-TileImage" content="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-270x270.gif">
    </head>
    <body class="home blog">


<div class="wrapper">
            <a class="skip-link screen-reader-text" href="#content">Skip to content</a>


<header id="masthead" class="site-header">


<div class="pre-header">


<div class="row">


<div class="small-12 columns">


<ul class="mobile-icons">


<li class="li-social">


<ul id="menu-social" class="social-links">


<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="http://www.facebook.com"><span class="screen-reader-text">facebook</span></a></li>




<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="http://www.pinterest.com"><span class="screen-reader-text">pinterest</span></a></li>




<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="http://www.twitter.com"><span class="screen-reader-text">twitter</span></a></li>


                                    </ul>


                                </li>




<li><span class="genericon genericon-search"><span class="screen-reader-text">Search</span></span></li>




<li><span class="genericon genericon-user"><span class="screen-reader-text">Login</span></span></li>


                            </ul>




<ul id="menu-social-1" class="social-links">


<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="http://www.facebook.com"><span class="screen-reader-text">facebook</span></a></li>




<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="http://www.pinterest.com"><span class="screen-reader-text">pinterest</span></a></li>




<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="http://www.twitter.com"><span class="screen-reader-text">twitter</span></a></li>


                            </ul>




<form role="search" method="get" class="search-form" action="http://www.svgthemes.com/mymagazine/">
                                <label>
                                    <span class="screen-reader-text">Search for:</span>
                                    <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
                                </label>
                                <input type="submit" class="search-submit" value="Search">
                            </form>


                            <a class="log" href="http://www.svgthemes.com/mymagazine/wplogin?redirect_to=http%3A%2F%2Fwww.svgthemes.com%2Fmymagazine" title="Login">Login</a>
                            <a class="log" href="http://www.svgthemes.com/mymagazine/wplogin?action=register" title="Register">Register</a>
                        </div>


                    </div>


<!-- end .row -->
                </div>


<!-- end .pre-header -->


<div class="main-header">


<div class="row">


<div class="small-11 columns logo">


<h1 class="site-title"><a href="http://www.svgthemes.com/mymagazine/" rel="home">MyMagazine</a></h1>




a free WordPress theme

  
                        </div>


<!-- .logo -->
                    </div>


<!-- end .row -->


<nav class="site-navigation main-nav">       


<div class="row">


<div class="nav-columns small-12 columns">


<h2 class="screen-reader-text">menu</h2>




<div class="screen-reader-text skip-link">
                                    <a href="#content" title="Skip">Skip to content</a>
                                </div>




<div class="header-menu">
                                    <span class="screen-reader-text">menu</span>
                                    <span class="menu-button">
                                        <span class="menu-bar"></span>
                                        <span class="menu-bar"></span>
                                        <span class="menu-bar"></span>
                                    </span>
                                </div>




<ul id="menu-primary" class="menu">

<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://www.svgthemes.com/mymagazine/mymagazine-free-wordpress-theme/">About Mymagazine</a></li>


<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="http://www.svgthemes.com/mymagazine/typography/">Typography</a></li>


<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="http://www.svgthemes.com/mymagazinepro">Get MyMagazine Pro</a></li>

</ul>


            
                          </div>


<!-- end .small-2 .medium-12 .columns -->
                        </div>


<!-- end .row -->
                    </nav>


<!-- .site-navigation .main-navigation -->
                </div>


<!-- .main-header -->
            </header>


<!-- .site-header -->


<div class="start row"><!-- Main Column -->

While the code in the header.php file contained inside the Mymagazine theme folder is as follows:

<?php ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>

<div class="wrapper">
            <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'mymagazine'); ?></a>
            <?php if ( get_header_image() ) : ?>

<div class="row">

<div id="site-header">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                        <img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                    </a>
                </div>

            </div>

            <?php endif; ?>

<header id="masthead" class="site-header">

<div class="pre-header">

<div class="row">

<div class="small-12 columns">

<ul class="mobile-icons">

<li class="li-social">
                                <?php                                 wp_nav_menu( array(                                     'theme_location' => 'social',
                                    'container'       => false,
                                    'menu_id'         => '',
                                    'menu_class'      => 'social-links',
                                    'depth'           => 1,
                                    'link_before'     => '<span class="screen-reader-text">',
                                    'link_after'      => '</span>',
                                    'fallback_cb'     => '',
                                ));
                                ?>
                                </li>


<li><span class="genericon genericon-search"><span class="screen-reader-text"><?php echo _e('Search', 'mymagazine'); ?></span></span></li>


<li><span class="genericon genericon-user"><span class="screen-reader-text"><?php echo _e('Login', 'mymagazine'); ?></span></span></li>

                            </ul>

                            <?php                             wp_nav_menu( array(                                     'theme_location' => 'social',
                                    'container'       => false,
                                    'menu_class'      => 'social-links',
                                    'depth'           => 1,
                                    'link_before'     => '<span class="screen-reader-text">',
                                    'link_after'      => '</span>',
                                    'fallback_cb'     => '',
                                ));
                            ?>
                            <?php get_search_form( true ); ?>
                            <a class="log" href="<?php echo esc_url(wp_login_url( home_url() )); ?>" title="Login"><?php echo _e('Login', 'mymagazine'); ?></a>
                            <a class="log" href="<?php echo esc_url(wp_registration_url()); ?>" title="Register"><?php echo _e('Register', 'mymagazine'); ?></a>
                        </div>

                    </div>

<!-- end .row -->
                </div>

<!-- end .pre-header -->

<div class="main-header">

<div class="row">

<div class="small-11 columns logo">
                            <?php                             if ( '' != get_theme_mod( 'mymagazine_logo_image' )) {                                 $logo_image_url = get_theme_mod( 'mymagazine_logo_image' ); ?>
                                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo-img" src="<?php echo esc_url( $logo_image_url ); ?>" alt="logo"/></a>
                            <?php                             } else { ?>

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

                            <?php } ?>


<?php bloginfo( 'description' ); ?>

  
                        </div>

<!-- .logo -->
                    </div>

<!-- end .row -->

<nav class="site-navigation main-nav">       

<div class="row">

<div class="nav-columns small-12 columns">

<h2 class="screen-reader-text"><?php _e('menu', 'mymagazine'); ?></h2>


<div class="screen-reader-text skip-link">
                                <a href="#content" title="Skip"><?php _e('Skip to content', 'mymagazine'); ?></a>
                            </div>


<div class="header-menu">
                                <span class="screen-reader-text"><?php _e('menu', 'mymagazine'); ?></span>
                                <span class="menu-button">
                                    <span class="menu-bar"></span>
                                    <span class="menu-bar"></span>
                                    <span class="menu-bar"></span>
                                </span>
                            </div>

                        <?php                                 wp_nav_menu( array(                                     'theme_location' => 'primary',
                                    'menu_id' => 'menu-primary',
                                    'container'       => false,
                                    'menu_class'      => 'menu',
                                    'depth'           => 3,
                                ));
                                ?>
            
                      </div>

<!-- end .small-2 .medium-12 .columns -->
                    </div>

<!-- end .row -->
                  </nav>

<!-- .site-navigation .main-navigation -->
                </div>

<!-- row -->
            </header>

<!-- .site-header -->

<div class="start row"><!-- Main Column -->

Let’s examine the differences, focusing primarily on the code for html and head tags. As mentioned, this guide assumes you have at least a basic knowledge of html and php, so I will not dwell on every single line of code but only on the instructions that deserve an in-depth as specific WordPress.

The function language_attributes();

On line n. 3 we find this code:


 <html <?php language_attributes (); ? >>


The language_attributes () function allows you to specify within the <html> tag the language used by the web site, the same which is set in Settings -> General -> Language Site of the back-end of WordPress. For example, if the site language is set in Italian, the html code generated by that line of code will be as follows: <html lang = “it-IT”>

The function bloginfo();

In line n. 5 we find the statement:

<meta charset = "<?php bloginfo ( 'charset');?>">

For the first time we encounter the “bloginfo ()” function, which we will meet several times during the course of this guide. This function gives us a range of information about the site, which in most cases are the same septate in the WordPress admin pages, especially in the “Settings” section. For example, suppose you want to display the name of the site “WordPress template” within a <h2> header. Rather than write code

<h2> Welcome to the site "WordPress template" </ h2>

write

<h2> Welcome to the site "<? Php bloginfo ( 'name');?>" </ h2>.

That way if one day we decide to change from “WordPress template” to “WordPress theme” the site name we’ll just go in the admin panel, under “General Settings” and change the title of the site. Automatically the output generated by WordPress will also update without you having to change the code already written. Consult the WordPress codex page for the function “bloginfo ()”, you can discover all the information it is able to give us. It is important to note that this function directly displays the required informations in the page, without the need to use the “echo” instruction. In case you need to have returned the value of the function, you must use the “get_bloginfo ()” function.

In line n. 6 we find another tag

<meta name = "viewport" content = "width = device-width"> 

it is used to make a responsive layout, nothing specifically dealing with the use of WordPress.

As you can see, after two lines you close the <head> tag. Where have all the links to style sheets and javascript files that we had in the html version gone? To answer we must put aside temporarily our header.php and open the functions.php file, but we will do so in the next article. In the meantime, if you have doubts or questions please write a comment below, if you liked this part of the guide on how to create a WordPress template do not forget to share it!

 

screenshot

The new version of handdrawn-lite theme has been recently uploaded to the WordPress theme directory, and it’s waiting for the review process. In the meantime you could take a look at the screenshot or visit the demo page. This theme has been completely revisited from the previous handdrawn theme, it’s now based on the grid system powered by foundation 6, and the options about clip masks and curved title can be set without the use of shortcodes.

Handdrawn-lite WordPress theme features

Handdrawn-lite allow users to add a clip mask whit the shape of a circle or the shape of a cloud to the featured image, simply selecting the shape from a dropdown list. If a clip mask is selected, a checkbox will appear: by cheking it, users can display the title of a post along a curved shape around the featured image!

Handdrawn-lite comes with two menus, the primary menu and a social menu. It has an hand written style thanks to the delicious “Caveat” font by Pablo Impallari, which is available on google fonts.

Actually, also the premium version of handdrawn is under construction, so stay tuned!

How to create a real WordPress theme

wordpress theme design vector image

 

Welcome to the first part of the guide “How to create a real WordPress theme.” Why do I use the term “real”? The reason is simple: unlike other guides of the same kind, which explain how to make very simple templates made for educational purposes, this guide is based on an actual theme, Mymagazine, which can be downloaded from the directory of WordPress themes (and I suggest to do it: by downloading it you can follow the explanation using the original files).
The goal to achieve is to acquire the knowledge needed to build a theme which can pass the review process of the WordPress.org team, starting from a simple HTML site.
The guide is aimed at WordPress beginners, however, it requires at least a basic knowledge of html, css, php and jQuery. Therefore I will assume the knowledge of html and css code that we will meet in the course of this series, focusing your attention on the WordPress functions.
To follow this guide you need a development version of WordPress (if you don’t know how to install WordPress, please take a look at the codex page relating to its installation ). Ready to begin? Let’s go!

The theme directory and the essential files

After installing WordPress, you should find an image like this:

the image of a new installation of WordPress
the classic WordPress dashboard

This is the appearance of the WordPress administration panel updated to version no. 4.4.2. Click on “Appearance” -> “Themes” and you will find the list of built-in WordPress themes, something similar to the following picture (of course, the appearance may change over time, along with the release of later versions):

built-it WordPress themes
built-in WordPress themes

Of course, your theme does not exist yet … let’s do it now! Access the folder on your computer where you have installed WordPress, click on the “wp-content” and then on the “themes” folder. At this point you’ll find other sub-folders that contain the built-in themes, create a new folder as in the image below:

image of wordpress themes folder

If you are going to create a WordPress theme to be included in the directory of the WordPress.org themes you should do a quick search to check if the name of the theme is available or if it has already been used. Visit the page of the theme directory and in the search box enter the name of your choice: if there is no match, you can proceed with the name of the theme you have in mind.

With your favorite text editor, create two empty files and save them inside the theme folder as “index.php” and “style.css”. Then proceed with the creation of three other files: functions.php, header.php and footer.php and save them in the same folder. At this point the files we’ve just created are all empty, let’s see what are the instructions to enter into them.

A preview of the WordPress theme

As I said at the beginning of the post, this guide is based on the Mymagazine free WordPress theme , whose appearance is represented in the image below

screenshot of Mymagazine free WordPress theme

The html file code is shown in this page . Do not be afraid of all that code, especially if you are a beginner, a good part of it is generated dynamically by WordPress. It is time to transfer the code inside the files we have created earlier.

Copy the lines from n. 1 to n. 85 (from <! DOCTYPE html> to <div class="start row"> ) and insert them inside the header.php file; copy the lines from n. 195 to no. 240 (from </ div> to </ html>) and paste them into the footer.php file. Everything else goes inside the index.php file.

Now the html code has been moved inside the .php files, so we need to edit it to work within the WordPress theme, starting next article. In the meantime if you have any doubts or other considerations please write a comment below. See you soon!