Productive Friday

Stay Productive Even on Friday

Steps for Making Basic Simple WordPress Theme from Scratch

  1. Create new folder inside wp-content > themes and it as your theme name.
  2. Create index.php and style.css file inside your theme folder.
  3. To tell WordPress for showing on menu Appearance > Theme, add this comment to style.css as theme description. Change it as your need.

    /******
        Theme Name: My Theme
        Theme URI:yourthemefromscratchurl.com
        Author: My Self
        Author URI: yourthemefromscratchurl.com
        Description: Create from scratch
        Version: 0.0.1
        Tested up to: 5.5
        Requires PHP: 7.2
        License: Theme License
        License URI: yourthemefromscratchurl.com
        Tags: two-columns, light
        Text Domain: mytheme
    */
    
  4. Here basic functions for creating WordPress theme.

    bloginfo('name');
    bloginfo('description');
    bloginfo('stylesheet_url');
    have_posts();
    the_post();
    the_title();
    the_time();
    
  5. Here complete script for basic WordPress theme.

    filename : style.css

    /******
        Theme Name: My Theme
        Theme URI:yourthemefromscratch.com
        Author: weblizar
        Author URI: yourthemefromscratch.com
        Description: Create from scratch
        Version: 7.1.6
        Tested up to: 5.5
        Requires PHP: 7.2
        License: GNU General Public License v2 or later
        License URI: yourthemefromscratch.com
        Tags: two-columns, light
        Text Domain: mytheme
    */
    
    .header {
        margin : auto;
        width : 100%;
        text-align : center;
    }
    
    .container {
        margin : auto;
        width : 60%;
    }
    
    .content {
        float : left;
        width : 70%;
    }
    
    .sidebar {
        float : right;
        width : 30%;
    }
    
    .footer {
        margin : auto;
        width : 100%;
        text-align : center;
        clear : both;
    }
    
    filename : index.php

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php bloginfo('name'); ?></title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
    </head>
    
    <body>
    
    <div class="header">
        <h2><?php bloginfo('name'); ?></h2>
        <?php bloginfo('description'); ?>
    </div>
    
    <div class="container">
        <div class="content">
            <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
                <h4><?php the_title(); ?></h4>
                <h6><?php the_time().' '.the_date(); ?></h6>
                <?php the_content(__('(more...)')); ?>
            <?php endwhile; else : ?>
            <?php _e('Sorry, no posts matched your criteria.'); ?>
            <?php endif; ?>
        </div>
    
        <div class="sidebar">
            <?php _e('Categories') ?>
            <ul><?php wp_list_cats('sort_column=namonthly'); ?></ul>
            <?php _e("Archives"); ?>
            <ul><?php wp_get_archives(); ?></ul>
        </div>
    </div>
    
    <div class="footer">
        This is footer message.
    </div>
    
    </body>
    </html>
    

How to solve not working Skeleton Grid System on mobile browser

Just add this meta tag inside header

<meta name="viewport" 
    content="width=device-width, initial-scale=1.0">

Displaying Code in WordPress

There is several ways to display code in WordPress.

1. This text using WordPress feature Code Block.

<?php 
echo phpversion(); 
?>

2. Paste your code on Hilite.me and paste the result on WordPress Code View editor.

1
2
3
<?php 
echo phpversion();
?>

3. Using prism.js. Here the example for displaying php script.