Hi, this is Bing. I’m glad you’re interested in creating a simple plugin to customize blog display style change. 😊

In this blog post, I will share with you how I created a simple WordPress plugin that allows me to change the font size, color, and alignment of my blog posts with a few clicks. This plugin is useful for anyone who wants to have more control over the appearance of their blog without having to edit the code or use a complicated theme.

WordPress is one of the most popular and powerful platforms for creating and managing websites and blogs. It offers a lot of features and flexibility to customize your site according to your needs and preferences. However, sometimes you may want to change something that is not easily accessible from the WordPress dashboard or the theme options. For example, you may want to change the display style of your blog posts, such as the font size, color, or alignment.

One way to do this is to edit the CSS code of your theme or use a child theme. However, this may require some coding skills and may affect the performance or compatibility of your site. Another way is to use a plugin that can help you achieve the same result with less hassle and more convenience. A plugin is a piece of software that can extend the functionality or add new features to your WordPress site.

In this tutorial, I will show you how to create a simple plugin that can help you customize the display style of your blog posts. You don’t need to have any prior experience in coding or WordPress development. All you need is a basic understanding of how WordPress works and how plugins work. You will also need access to your WordPress site’s files and folders, either through FTP or cPanel.

By following this tutorial, you will learn how to:

• Create a folder and a file for your plugin
• Write the basic code for your plugin
• Register and enqueue a stylesheet for your plugin
• Add a settings page for your plugin
• Save and retrieve the settings from the database
• Apply the custom style to your blog posts
• Activate and test your plugin

Let’s get started! 😊

Step 1: Create a folder and a file for your plugin

The first step is to create a folder and a file for your plugin in the wp-content/plugins directory of your WordPress installation. This is where all the plugins are stored and loaded by WordPress.

To create a folder and a file for your plugin, you can use any file manager or FTP client that you prefer. I will use cPanel’s File Manager for this tutorial.

• Log in to your cPanel account and navigate to File Manager.
• Locate the wp-content/plugins directory and open it.
• Click on the + Folder icon at the top left corner of the screen.
• Enter blog-style-changer as the folder name and click on Create New Folder.
• Open the newly created folder by double-clicking on it.
• Click on the + File icon at the top left corner of the screen.
• Enter blog-style-changer.php as the file name and click on Create New File.
• Right-click on the newly created file and select Edit.
• Click on Edit again in the pop-up window.

You should now see an empty file editor where you can write your plugin code.

Step 2: Write the basic code for your plugin

The second step is to write the basic code for your plugin in the blog-style-changer.php file. This code will tell WordPress some information about your plugin, such as its name, description, version, author, etc. It will also define some functions that will be used later in this tutorial.

To write the basic code for your plugin, copy and paste the following code into the file editor:

<?php
/*
Plugin Name: Blog Style Changer
Plugin URI: https://www.bing.com/
Description: A simple plugin to customize blog display style change
Version: 1.0
Author: Bing
Author URI: https://www.bing.com/
License: GPL2
*/

This code is called a plugin header. It contains some comments that WordPress will read and display in the plugins page of your dashboard. You can change these values according to your preference, but make sure they are valid and accurate.

The next part of the code is:

// Register and enqueue the plugin stylesheet
function blog_style_changer_enqueue_style() {
    wp_register_style( 'blog-style-changer', plugins_url( 'blog-style-changer.css', __FILE__ ) );
    wp_enqueue_style( 'blog-style-changer' );
}
add_action( 'wp_enqueue_scripts', 'blog_style_changer_enqueue_style' );

This code defines a function called blog_style_changer_enqueue_style. This function will register and enqueue a stylesheet for your plugin. A stylesheet is a file that contains CSS code that can change the appearance of HTML elements on your site.

The function uses two WordPress functions: wp_register_style and wp_enqueue_style. The first one registers a stylesheet with a unique handle (blog-style-changer) and a URL (plugins_url( 'blog-style-changer.css', __FILE__ )). The second one enqueues the stylesheet, which means it will load it on your site.

The function also uses a WordPress hook: add_action. This hook tells WordPress to execute the function when a certain action occurs. In this case, the action is wp_enqueue_scripts, which occurs when WordPress is loading scripts and styles on your site.

The next part of the code is:

// Add a settings page for the plugin
function blog_style_changer_add_settings_page() {
    add_options_page( 'Blog Style Changer', 'Blog Style Changer', 'manage_options', 'blog-style-changer', 'blog_style_changer_render_settings_page' );
}
add_action( 'admin_menu', 'blog_style_changer_add_settings_page' );

This code defines another function called blog_style_changer_add_settings_page. This function will add a settings page for your plugin in the WordPress dashboard. A settings page is where you can provide some options for your plugin users to customize its behavior or functionality.

The function uses another WordPress function: add_options_page. This function adds a new page under the Settings menu in the dashboard. It takes five parameters:

• The page title (Blog Style Changer)
• The menu title (Blog Style Changer)
• The capability required to access the page (manage_options)
• The slug of the page (blog-style-changer)
• The callback function that will render the page (blog_style_changer_render_settings_page)

The function also uses another WordPress hook: add_action. This hook tells WordPress to execute the function when another action occurs. In this case, the action is admin_menu, which occurs when WordPress is creating the admin menu in the dashboard.

The last part of the code is:

// Render the settings page
function blog_style_changer_render_settings_page() {
    // Check if the user has the required capability
    if ( !current_user_can( 'manage_options' ) ) {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }

    // Save the settings if the form is submitted
    if ( isset( $_POST['submit'] ) ) {
        // Validate and sanitize the input
        $font_size = sanitize_text_field( $_POST['font_size'] );
        $font_color = sanitize_hex_color( $_POST['font_color'] );
        $text_align = sanitize_text_field( $_POST['text_align'] );

        // Update the options in the database
        update_option( 'blog_style_changer_font_size', $font_size );
        update_option( 'blog_style_changer_font_color', $font_color );
        update_option( 'blog_style_changer_text_align', $text_align );

        // Display a success message
        echo '<div class="updated"><p><strong>Settings saved.</strong></p></div>';
    }

    // Get the current options from the database
    $font_size = get_option( 'blog_style_changer_font_size', '16px' );
    $font_color = get_option( 'blog_style_changer_font_color', '#000000' );
    $text_align = get_option( 'blog_style_changer_text_align', 'left' );

    // Display the settings form
    echo '<div class="wrap">';
    echo '<h2>Blog Style Changer</h2>';
    echo '<p>Use this form to customize the display style of your blog posts.</p>';
    echo '<form method="post" action="">';
    echo '<table class="form-table">';
    echo '<tr><th scope="row"><label for="font_size">Font Size</label></th>';
    echo '<td><input type="text" id="font_size" name="font_size" value="' . esc_attr( $font_size ) . '" /></td></tr>';
    echo '<tr><th scope="row"><label for="font_color">Font Color</label></th>';
    echo '<td><input type="text" id="font_color" name="font_color" value="' . esc_attr( $font_color ) . '" /></td></tr>';
    echo '<tr><th scope="row"><label for="text_align">Text Align</label></th>';
    echo '<td><select id="text_align" name="text_align">';
    echo '<option value="left"' . selected( $text_align, 'left', false ) . '>Left</option>';
    echo '<option value="center"' . selected( $text_align, 'center', false ) . '>Center</option>';
    echo '<option value="right"' . selected( $text_align, 'right', false ) . '>Right</option>';
    echo '</div>