Write your own WordPress template

💂 Personal Website:Hai Yong — a blogger who likes to share technology and happiness

🤟 copyright: this article by [sea] original, in nuggets first, need to reprint please contact the blogger

💬 If the article is helpful to you, welcome to follow, like, bookmark (click three links) and subscribe

💅 To find friends to fish together, please click on [Fish game】

Make writing a habit together! This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

It’s easy to write your own WordPress template from scratch. If you’re in the Web development business, you’ve probably heard what “WordPress” is. Maybe a client has mentioned it, but you’re not familiar with it. Maybe you’ve used it before, but don’t know how to make a theme from scratch. Or, maybe you’re a complete newbie. Anyway, this article is for you.

Prerequisites: Before we can begin, you need to meet the following set of requirements.

You need to have a mature WordPress setup on localhost or live hosting. If you want to learn more about getting started with WordPress, see this article. The conceptual design followed throughout the development process could be PSD or HTML CSS. A little introduction to PHP programming. However, this is not a requirement for this particular post, but is still recommended. The scope of

Designing a WordPress theme is a long, tedious, never-ending programming challenge. The development process depends entirely on how you want the theme to look. This article is just a tutorial and doesn’t cover everything you need for a standard WordPress theme. After reading this article, you’ll have to rely heavily on WordPress Codex and WordPress StackExchange for further queries. An introduction to

Considering the prerequisites, let’s get started. The first thing you need to know is that almost everything you do in WordPress is in the WP-Content directory. Everything else is the WordPress CMS itself, and you don’t want to mess it up.

When you open the wp-content -> Themes directory, you will find the default WordPress themes, such as 25, 24, 23, etc. To start with one of your own, create a directory using whatever name you like. For this article, we’ll call it WpStart.

A WordPress theme requires at least two files — style.css and index.php

So go to the wpstart folder and create these two files. In style.css, insert the following comment. This tells the WordPress dashboard about theme details and meta information.

/*
Theme Name: WP Start
Author: FedUser
Description: A bare bone WordPress theme
Version: 0.0.1
*/
Copy the code

Now switch to your WordPress dashboard and click Appearance > Themes. You’ll find WP Start in the theme set.

Go ahead and activate the topic, then visit the site. Look! Technically, you create a custom theme yourself. Of course, it does nothing but have a blank screen. This is where index.php gets its act together.

Open index.php in a text editor and write the following code.

<! DOCTYPE html> <html> <body> <h1>This is a sample WordPress theme.</h1> </body> </html>Copy the code

Visit the site again and get your first WordPress template up and running.

Divide and conquer

To develop a standard WordPress theme, you need to break everything down into several parts. This is not necessary, as you can do everything in index.php, but good programming practice involves modularity. For this particular post, we will divide the entire work into four parts, i.e. Header, footer, sidebar, and content. Corresponding to these sections, we will create four different files, namely header.php, footer.php, and sidebar.phpcontent.php

Header.php: For this particular example, this file will do the following;
- <head>Define all the inner meta and link tags for HTML.
- Display site branding, such as name and description.
- Provides navigation to different pages.
With these points in mind, let’s write topic headings.

<! DOCTYPE html> <html> <head> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>WP Start</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous" />
</head>

<body>

<nav></nav>
Copy the code

Now, I want to draw your attention to one thing. You can see how our website titles are “hard-coded”. This means that no matter which site you apply the theme to, the title will remain the same “WP Start”. If the author must change it, he must manually edit the code to do so. To avoid these manual adjustments to templates, WordPress provides various function calls to handle these situations on the fly. In this particular case, I want the title to be the name of the site/blog. And to do that, I’m going to replace

<title>WP Start<title>
Copy the code

for

<title> 
       echo get_bloginfo( "name" ); ? > </title>
Copy the code

This is called embedding PHP Code into HTML. Technically, we write HTML in PHP files. So we embed HTML in the PHP code).

So header.php, with some extra code, becomes;

<! DOCTYPE html> <html> <head> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title> 
       echo get_bloginfo( "name" ); ? > </title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous" />

<link rel="stylesheet" href="
      /style.css" />

       wp_head(); ? >
</head>

<body>

<nav class="navbar navbar-default">
    <div class="container">
    <div class="navbar-header">
        <a class="navbar-brand" href= "<?php echo esc_url( home_url()); ? > "> <h3 class="site-branding"> <?php echo get_bloginfo("name" ); ?> </h3>
        </a>
    </div>

    <ul class="nav navbar-nav navbar-right">
        <li class="active"> <a href= "#" >Home</a></li>
        <li><a href= "#" >Contact</a></li>
        <li><a href= "#" >About</a></li>
    </ul>
    </div>
</nav>
Copy the code

The other PHP excerpt used in this code is:


       echo get_bloginfo('template_directory'); ? >
Copy the code

This is the directory to get templates so that you can locate additional resources such as CSS, JS, fonts, and so on.


       echo esc_url(home_url()); ? >
Copy the code

The home page URL for the site is displayed.

Footer.php: This is the file where we will add whatever we want to the site footer, such as custom footers, script tags, etc. In addition, the starting HTML tag header.php is closed in this file.

<footer class="site-footer">
    <div class="container">
    <div class="row row30 "> < -div class="col-md4 -col-xl5 "> <div class="pr-xl- 4 "> <h3>
            <a href= "<?php echo esc_url( home_url()); ? > "> <?php echo get_bloginfo("name" ); ?>
            </a>
            </h3>
            <p> <?php echo get_bloginfo("description" ); ?></p>
            <p> © 2018FedUser. All Rights Reserved. < /p>
        </div>
        </div>

        <div class="col-md- 4 "> <h5>Contacts</h5>
        <dl class="contact-list">
            <dt>Address: < /dt>
            <dd> 798ABC Nagar.JKL.Rajasthan</dd>
        </dl>
        <dl class="contact-list">
            <dt>e-Mail: < /dt>
            <dd><a href="mailto: # ">someone@example.com</a></dd>
        </dl>
        <dl class="contact-list">
            <dt>Phone No. : < /dt>
            <dd><a href="tel: # "> + 91 1234567890 < /a>
            </dd>
        </dl>
        </div>

        <div class="col-md4 -col-xl- 3 "> <h5>Links</h5>
        <ul class="nav-list">
            <li><a href= "#" >About</a></li>
            <li><a href= "#" >Projects</a></li>
            <li><a href= "#" >Blog</a></li>
            <li><a href= "#" >Contacts</a></li>
            <li><a href= "#" >Pricing</a></li>
        </ul>
        </div>
    </div>
    </div>
</footer>

<script src="https: / /code.jquery.com/jquery- 1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"> < /script>

<script src="https: / /maxcdn.bootstrapcdn.com/bootstrap3.3.7 /js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"> < /script>

</body>
</html>
Copy the code

The additional PHP excerpt used in this file is;


       echo get_bloginfo( "description" ); ? >
Copy the code

This will get and place the site description.

Another thing to mention here is that I used “hard-coded” sub-sections in the file, such as “contacts” and “links” footer.php. Instead, you can use WordPress widgets to automate and have them modified directly through the customizer. However, this is beyond the scope of this article and will be covered at any time in a future article.

Sidebar.php: Most sites have sidebars, and so do we. The sidebar often shows archived links, recent posts, social media accounts, ads, and more. In our example, we will use archive links and social media links. Similarly, WordPress widgets are much better than “hard-coded” junk! But for the sake of clarity, we’ll stick with the latter.

<div class="sidebar">
<div class="widget">
    <h3 class="widget-title">Archives</h3>
    <div class="widget-content">
    <ul>
        <li><a href= "#" >October2018 < /a></li>
        <li><a href= "#" >November2018 < /a></li>
        <li><a href= "#" >December2018 < /a></li>
    </ul>
    </div>
</div>

<div class="widget">
    <h3 class="widget-title">Social</h3>
    <div class="widget-content">
    <ul>
        <li><a href= "#" >Facebook</a></li>
        <li><a href= "#" >Twitter</a></li>
        <li><a href= "#" >LinkedIn</a></li>
        <li><a href= "#" >Github</a></li>
    </ul>
    </div>
</div>
</div>
Copy the code

Content.php: Now that the header, footer, and sidebar are set up, we’ll move on to the main content of the site. For now, we’ll stick with some virtual content in this file.

<div class="main-content">
<h3>Sample Title</h3>
<p>Sample text goes here. </p>
</div>
Copy the code

The integration of

Now let’s go back to where index.php pulls all of the above pieces together. Since this file is the entry point to our theme, we can strategically place these sections. That’s how I do it.


       get_header(); ? >

<div class="container">
<div class="row">
    <div class="col-md9 "> <?php get_template_part('content', get_post_format() ); ?>
    </div>
    <div class="col-md- 3 "> <?php get_sidebar(a); ? > </div>
</div>
</div>

<?php get_footer(a); ? >Copy the code

The PHP excerpt used here is self-explanatory. Get_header (), get_sidebar(), and get_footer() are predefined functions for embedding the corresponding section. For custom parts like content.php, the embedding is done by the following code;


       get_template_part( 'content', get_post_format() ); ? >
Copy the code

Style.css: Now that we’ve updated the file, let’s add some styles to index.php using CSS.

/*
Theme Name: WP Start
Author: FedUser
Description: A bare bone WordPress theme
Version: 0.0.1
*/

nav.navbar .navbar-brand .site-branding {
margin: 0;
}

footer.site-footer {
background-color: # 502550;
color: #fff;
padding: 40px 0 20px 0;
}

footer.site-footer a {
color: #fff;
}
Copy the code

Look! The first look of your custom WordPress theme is ready.

cycle

This is one of the most exciting parts of WordPress theme development. You can control all your posts. Loop is a feature that you can use to dynamically insert content into your theme. Our goal in this tutorial is to present all blog posts as a user-friendly list so that readers can select any one of them. Let’s see how we do it. The loop itself is self-explanatory.


       if ( have_posts() ) : while ( have_posts() ) : the_post(); ? ><! -- contents of the loop -->
       endwhile; endif; ? >
Copy the code

If there are any posts and there aren’t any left, show them. Anything in this loop is repeated until the page runs out of posts. We can use this concept to display our list. That’s how I do it.

<div class="panel panel-default blog-post">
<div class="panel-heading">
    <h3 class="panel-title post-title">

    <?php if(!is_single() ): ?>

        <a href= "<?php echo esc_url( get_permalink()); ? > "> <?php the_title(a); ? > </a>

    <?php else:
        the_title(a);endif; ? > </h3>

    <p class="post-meta">
    <?php the_date(a); ? >by <a href= "#" > <?php the_author(a); ? > </a>
    </p>
</div>

<div class="panel-body">

    <?php if(!is_single() ):
    the_excerpt(a);else:
    the_content(a);endif; ? > </div>
</div>
Copy the code

And change index.php to this.

<div class="container">
<div class="row">
    <div class="col-md9 -blog-main">
    <?php if( have_posts() ):
            while( have_posts() ):

                the_post(a);get_template_part('content', get_post_format());endwhile;
            endif; ? > </div>
    <div class="col-md- 3 "> <?php get_sidebar(a); ? > </div>
</div>
</div>

<?php get_footer(a); ? >Copy the code

Let’s see what just happened!

Each time a page has a post, the loop in index.php calls Content.php. In content.php, I check to see if the current post is is_single(). This condition holds if the current page contains only a single post to loop through. When it’s not single, I want to link to the post by its title. So I use get_permalink() to get the url for that particular post. However, if the page is single, no links are needed, so I just use the the_title() function.

Go to the meta information of the post. I have shown the article published the_date() and its the_author().

Finally, I used the same is_single() concept to show the post’s the_excerpt() or the_content().

See, it’s that simple and fun. Now with a bit of glamour CSS, I get the following results.

conclusion

We’ll end this article at this point, but you need to know that there’s still a lot to learn about WordPress. This is just an example exercise, but the standard topic can be quite complex. But we hope you learned something new.

If you don’t understand anything, please mention it in the comments. If anything needs to be corrected, please let us know! Any feedback or suggestions for further improvements would also be appreciated.

I’d love to see if you’ve learned anything from this article. Therefore, share a link to your first WordPress theme in the comments section.

Divide and conquer

The integration of

cycle

conclusion

Related Posts

🎁 Creators Center winners list public, friends come to claim the prize 🎁

The observer pattern in Javascript

The author of the best-selling book “Simple to Understand Vue. Js”, gained growth in Ali Tao department for one year