Productive Friday

Steps for Making Basic Simple WordPress Theme from Scratch

Create new folder inside wp-content > themes and it as your theme name.
Create index.php and style.css file inside your theme folder.

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
*/

Here basic functions for creating WordPress theme.

bloginfo('name');
bloginfo('description');
bloginfo('stylesheet_url');
have_posts();
the_post();
the_title();
the_time();

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.