Inline Code Plugin in WordPress

Guide for Using the Inline Code Plugin in WordPress

This guide provides step-by-step instructions for installing, configuring, and using the Inline Code Plugin to style specific text in your WordPress posts or pages with a gray background (#686868) and customizable text colors.

What This Plugin Does

The Inline Code Plugin enhances your WordPress content by allowing you to highlight text using a shortcode. It applies a monospaced font and a #686868 background to the enclosed text, with color options for different purposes:

• Warning: Orange text
• Success: Green text
• Error: Red text

The styling is applied only to the text within the shortcode, leaving the rest of your content unchanged.

Installation

1. Prepare the Plugin Files:

• Navigate to wp-content/plugins/ in your WordPress installation.
• Create a new folder named inline-code-plugin.
• Inside inline-code-plugin, create a file named inline-code-plugin.php with the following content:

<?php
/*
Plugin Name: Inline Code Plugin
Description: A plugin to style text with inline code snippets in different colors with a custom background.
Version: 1.1
Author: BVPLAB
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

// Enqueue the CSS file
function inline_code_enqueue_styles() {
    wp_enqueue_style('inline-code-style', plugin_dir_url(__FILE__) . 'css/inline-code-style.css');
}
add_action('wp_enqueue_scripts', 'inline_code_enqueue_styles');

// Shortcode function to style the enclosed content
function inline_code_shortcode($atts, $content = null) {
    if (empty($content)) {
        return '';
    }
    $atts = shortcode_atts(array(
        'type' => 'warning',
    ), $atts);

    $allowed_types = array('warning', 'success', 'error');
    $type = in_array($atts['type'], $allowed_types) ? $atts['type'] : 'warning';
    $class = 'inline-code-' . $type;
    return '<code class="' . esc_attr($class) . '">' . esc_html($content) . '</code>';
}
add_shortcode('inline_code', 'inline_code_shortcode');

• Create a subfolder named css inside inline-code-plugin, and add a file named inline-code-style.css with the following content:

code.inline-code-warning {
    color: orange;
    background-color: #686868;
    font-family: Consolas, "Courier New", monospace;
    padding: 2px 4px;
}
code.inline-code-success {
    color: green;
    background-color: #686868;
    font-family: Consolas, "Courier New", monospace;
    padding: 2px 4px;
}
code.inline-code-error {
    color: red;
    background-color: #686868;
    font-family: Consolas, "Courier New", monospace;
    padding: 2px 4px;
}

1. Activate the Plugin:

• Log in to your WordPress admin dashboard.
• Go to Plugins > Installed Plugins.
• Locate “Inline Code Plugin” and click Activate.

How to Use

The plugin uses a shortcode to apply styling to your text. Follow these steps:

Shortcode Syntax:
text to style

[inline_code type="warning"]text to style[/inline_code]

Available Types:

• warning (default, orange text)
• success (green text)
• error (red text)

Examples:

• Highlight a password warning: Update your password by replacing old_password123 with a new one. Result: “Update your password by replacing old_password123 with a new one.” with “old_password123” in orange on a #686868 background.
• Indicate a successful operation: Status: Task done Result: “Status: Task done” with “Task done” in green on a #686868 background.
• Show an error message: Error: Connection lost Result: “Error: Connection lost” with “Connection lost” in red on a #686868 background.

Steps to Apply:

1. Open the WordPress editor for the post or page you want to edit.
2. Insert the shortcode with your desired text and type attribute in the content area.
3. Save or publish the post/page to view the styled text.

Customization

• Background Color: The plugin sets a #686868 background for all styled text. To change it, edit the background-color: #686868; value in the css/inline-code-style.css file for each code.inline-code-* class.
• Text Color: Adjust the color property in the CSS file (e.g., change orange to another color like #ff4500 for a different orange shade).
• Padding: Modify the padding: 2px 4px; value in the CSS to increase or decrease the space around the text.

Troubleshooting

• Plugin Not Displaying: Ensure the plugin files are correctly placed in wp-content/plugins/inline-code-plugin/ and activated.
• Styling Issues: Check the CSS file path in inline-code-plugin.php and verify there are no typos in the shortcode.
• Errors: If a PHP error occurs, deactivate the plugin, review the file syntax, and re-upload if needed. Contact support with the error message for assistance.

Best Practices

• Use the shortcode selectively to avoid overwhelming your content.
• Preview your post/page after adding the shortcode to ensure the text is readable against the #686868 background.
• Always back up your WordPress site before installing or modifying plugins.

This guide was created on August 03, 2025, at 08:50 PM PST. Enjoy enhancing your WordPress content with the Inline Code Plugin!

Try me