Month: February 2020

WP: Header & Footer

In this post we’ll add a header and footer to the theme we created before. This can be done by creating header.php and footer.php files and then calling them by get_header() andget_footer() functions respectively.

Example: Let’s create a header.php file with the following content:

<p> This is header text </p>

And footer.php as follows:

<p> This is footer text </p>

Save both these files in the theme’s root folder (next to index.php). And finally edit index.php to include those “getter” functions as follows:

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>

<?php get_header(); ?>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}

get_footer();

?>

If we load the site’s front page now, it’ll get us the following result:

Moving header and footer in separate files allows us to customise these files independently.

Prettify Your Code

Today is busy day for me and so I’ll write a short (but useful) post. It’s about prettifying your code. Prettifying is basically formatting your code and making it neat and tidy. It can be a task if you do it manually but you don’t have to. Modern text-editors allow you to do this automatically.

If you use a text-editor, there’s a chance that it allows you to install third-party extensions.

I personally use Sublime Text. To install any extension (or package) in Sublime, you need to hit CMD+SHIFT+P and enter “install” in the search bar.

It’ll give you some options, out of which you need to choose “Package Control: Install Package”.

After you choose that, just type in “pretty” and you’ll get some suggestions. You can use any of those, depending on what language you use to code.

I use a couple of packages but my default (and favorite) one is HTML-CSS-JS Prettify. This package, once installed, will allow you to prettify your code by selecting it and hitting the CMD+SHIFT+H shortcut on the keyboard.

Other text-editors also offer this feature (e.g. Atom). Note: This is actually common knowledge but I really wanted to get a post out today 🙂

WP: Single.php

Disclaimer: The title of this post isn’t a “relationship status” 😉 It is instead a file that WordPress uses to display single posts on the site.

As seen before, the famous WordPress loop can be used in index.php to fetch and display all the posts on the site.

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <?php the_title(); ?> </h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}
?>

This loop gets us the following result on the front page of the site (when our theme is active):

Home Page (fetching posts via the famous WordPress loop)

This displays all the posts on the front page but we’d like to have an option to open each one separately.

To do so, let’s modify our code and wrap the title in a tag with href pointing to the_permalink() which fetches the permanent link of the respective post.

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}
?>

The result? Each post title becomes a link that allows us to open the post at a unique URL –

Home Page displaying all the posts (with their title as links)
The screen we see after opening one of the posts

Notice that the title is still a link. It doesn’t have to be, especially when we’ve already opened the post.

To fix this, let’s create another file called single.php in our theme’s folder and add the index.php code in there (without the permalink part).

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <?php the_title(); ?> </h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}
?>

Now when we open any post, its title won’t be a link.

Single Post (where title isn’t a link anymore)

What’s happening here? Previously index.php was taking care of all the pages on the site. Now index.php is only taking care of the front page while single.php is taking care of all the web pages that are “posts” on the site.

The same can be done for web pages that are “pages” on the site by using page.php file in the theme’s folder.

This allows us to customise home page, single posts and single pages separately while developing a WordPress theme.

WP: Delete Plugin Data On Uninstall

In the previous post, I created a plugin which stores some data in the database. Now I will add some code to it which will help to delete this data when the plugin is deleted or uninstalled via the plugins page.

When a plugin is deleted, the uninstall hook is called. I’m going to register the uninstall hook and ask it to call a function which removes our plugin data for us. Here’s the code for it:

register_uninstall_hook( __FILE__, 'my_fn_uninstall' );
function my_fn_uninstall() {
    delete_option( 'g_first_option' );
    delete_option( 'g_second_option' );
}

I’ve added this to the noice-plugin.php file I created in the previous post. If I try to delete the plugin now, it will display this message to me:

Once I hit OK, it will delete g_first_option and g_second_option from the wp_options table in the database.

WP: Add A Form To The Plugin Admin Page

In the previous post, I created a plugin page. And now I’ve added a form to it with the help of the following code:

<?php 
/*
Plugin Name: Noice Plugin
Plugin URI: https://csmumbai.com
Description: This plugin is Noice!
Author: Omkar Bhagat
Version: 1.0
*/ 
 
add_action('admin_menu', 'noice_create_menu');
 
function noice_create_menu() {
	add_options_page('Noice Plugin Title', 'Noice Plugin Settings', 'administrator', __FILE__, 'noice_settings_page');
}
 
function noice_settings_page() {
    echo '<h2>Hello Noice Person!</h2>';
?>
 
<form method="post" action="options.php">
 
    <table class="form-table">
 
        <tr>
        <th>First Field: </th>
        <td><input type="text" name="g_first_option" value="<?php echo get_option('g_first_option'); ?>" /></td>
        </tr>
 
        <tr>
        <th>Second Field: </th>
        <td><input type="text" name="g_second_option" value="<?php echo get_option('g_second_option'); ?>" /></td>
        </tr>
 
    </table>
        
    <p class="submit">
        <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
 
</form>
 
<?php } ?>

The lines which have been changed or added are highlighted in the code above. This gets us a form as follows:

At this point it does nothing because I’m yet to register these fields. In other words, WordPress doesn’t know what to do with these fields when the form is submitted.

<?php 
/*
Plugin Name: Noice Plugin
Plugin URI: https://csmumbai.com
Description: This plugin is Noice!
Author: Omkar Bhagat
Version: 1.0
*/ 
 
add_action('admin_menu', 'noice_create_menu');
 
function noice_create_menu() {
    add_options_page('Noice Plugin Title', 'Noice Plugin Settings', 'administrator', __FILE__, 'noice_settings_page');
    add_action( 'admin_init', 'noice_form_settings' );
}
 
function noice_form_settings() {
    register_setting('noice_form_settings_group', 'g_first_option');
    register_setting('noice_form_settings_group', 'g_second_option');
}
 
function noice_settings_page() {
    echo '<h2>Hello Noice Person!</h2>';
?>
 
<form method="post" action="options.php">
 
    <?php settings_fields('noice_form_settings_group'); ?>
 
    <table class="form-table">
 
        <tr>
        <th>First Field: </th>
        <td><input type="text" name="g_first_option" value="<?php echo get_option('g_first_option'); ?>" /></td>
        </tr>
 
        <tr>
        <th>Second Field: </th>
        <td><input type="text" name="g_second_option" value="<?php echo get_option('g_second_option'); ?>" /></td>
        </tr>
 
    </table>
        
    <p class="submit">
        <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
 
</form>
 
<?php } ?>

Here’s a short explanation of this code:

  1. Line 14: Added a way to call noice_form_settings function as admin_init is the action hook which is triggered before any other hook when a user accesses the admin area.
  2. Line 17-20: Registering the form fields with WP
  3. Line 28: This puts some hidden fields in the form to check if the request is valid. More on this here and here.

Entering something in the form and saving it returns this page:

The options will stay there even if I deactivate and reactivate the plugin. That’s fine but I’ll need to remove the data when the plugin is deleted/uninstalled. I’ll work on that in a future post.

Note: I can find this data in the database by going to wp_options table.

WP: Create A Plugin Admin Page

To create a WordPress plugin admin page, I’ll need to first add a menu item in the WP-Admin dashboard.

Instead of creating a totally new item using add_menu_page, I’m going to add my menu item under Settings option with the help of add_options_page function as follows:

<?php 
/*
Plugin Name: Noice Plugin
Plugin URI: https://csmumbai.com
Description: This plugin is NOICE!
Author: Omkar Bhagat
Version: 1.0
*/ 
 
 
// ONE
add_action('admin_menu', 'noice_create_menu');
 
// TWO
function noice_create_menu() {
	add_options_page('Noice Plugin Title', 'Noice Plugin Settings', 'administrator', __FILE__, 'noice_settings_page');
}
 
// THREE
function noice_settings_page() {
    echo '<p>Hello, this is a Noice Plugin!</p>';
}
 
?>

Here’s what I basically did:

  1. Added an action hook for admin_menu to call noice_create_menu
  2. noice_create_menu creates an options page for us with the following arguments:
    1. Page Title
    2. Menu Item Name
    3. Who can access it?
    4. Slug name (I used the file name here).
    5. Function to call to output content on the page
  3. noice_settings_page outputs content on the page

This results in the following menu item under the Settings option in WP-Admin dashboard –

And clicking on this new menu items takes me to –

Notice three things here:

  1. Output content – Hello, this is a Noice Plugin!
  2. Page title in the tab – Noice Plugin Title
  3. And the slug at the end of the URL – noice-plugin.php

This results in a simple WordPress admin page that prints some text. Let’s see how to do more with this in the next post.