Simple Notes Plugin: Usage Guide

The Simple Notes Plugin (version 1.3) allows you to add styled notes to your WordPress posts and pages using the [ note ] shortcode. Notes can include titles, Font Awesome icons, and content such as text or bulleted lists. The plugin also provides an admin settings page to configure default styles. This guide covers installation, configuration, and usage of the plugin.

Installation

1. Download and Install:
   • Upload the simple-notes-plugin folder to your WordPress wp-content/plugins/ directory via FTP, or use the WordPress admin panel to upload the plugin ZIP file.
   • Ensure the folder structure includes:
     • notes-plugin.php (main plugin file)
     • css/notes-style.css (styles for notes)
2. Activate the Plugin:
   • Navigate to Plugins > Installed Plugins in your WordPress admin panel.
   • Locate “Simple Notes Plugin” and click Activate.
3. Verify Installation:
   • Upon activation, the plugin automatically enqueues its CSS and, if enabled, Font Awesome for icons. No additional setup is required for basic usage.

Configuration

The plugin includes an admin settings page to customize default behavior.

Click the Save Changes button to apply your settings.

Access Settings:

Go to Settings > Notes Plugin in the WordPress admin panel.

You must have manage_options permissions (typically Administrator role) to access this page.

Available Settings:

Default Note Type: Select the default style for notes when the type attribute is not specified in the [ note ] shortcode. Options are info, warning, success, or error.

Enable Icons: Choose whether to enable Font Awesome icons. If set to “No,” the icon attribute in shortcodes is ignored, and Font Awesome is not loaded.

Attributes

• type (optional): Specifies the note style. Options: info, warning, success, error. Defaults to the value set in the admin settings (usually info).
• title (optional): Adds a bold title above the note content.
• icon (optional): Specifies a Font Awesome icon class (e.g., fa-info-circle). Only works if icons are enabled in the settings.

Example Shortcodes

• Basic Note:
  This is an informational note.
  Bash

  Copy AllCollapse

  [note type="info"]This is an informational note.[/note]

  Displays a blue-bordered note with a light blue background.
• Note with Title and Icon:
  Important Warning

  Take caution when proceeding.
  Bash

  Copy AllCollapse

  [note type="warning" title="Important Warning" icon="fa-exclamation-triangle"]Take caution when proceeding.[/note]

  Displays a yellow-bordered note with a title and a warning icon (if icons are enabled).
• Note with Bulleted List:
  Key Achievements

  • First achievement
  • Second achievement
  Bash

  Copy AllCollapse

  [note type="success" title="Key Achievements" icon="fa-check-circle"]<ul><li>First achievement</li><li>Second achievement</li></ul>[/note]

  Displays a green-bordered note with a title, icon, and a bulleted list.

Styling

Notes are styled with distinct colors and formatting:

• Info: Blue border and light blue background.
• Warning: Yellow border and light yellow background.
• Success: Green border and light green background.
• Error: Red border and light red background.
• Titles are bold and displayed above the content.
• Icons (if enabled) appear next to the title.
• Bulleted lists use standard HTML <ul><li> tags and are indented for clarity.

Adding Notes

To add a note:

1. Edit a post or page in the WordPress editor (block or classic editor).
2. Insert the shortcode with the desired attributes and content.
3. Save or publish the post/page to see the rendered note.

For bulleted lists, use HTML <ul><li> tags within the shortcode content, as shown in the example above.

Finding Font Awesome Icons

If icons are enabled, you can use Font Awesome icon classes in the icon attribute. Visit Font Awesome to find available icons. Examples include:

• fa-info-circle (info icon)
• fa-exclamation-triangle (warning icon)
• fa-check-circle (success icon)
• fa-times-circle (error icon)

Tips and Best Practices

• Shortcode Placement: Use the shortcode in the WordPress editor’s text mode or as a shortcode block in the block editor to ensure proper rendering.
• Content Security: The plugin sanitizes all inputs, allowing only safe HTML (e.g., <ul>, <li>) in the note content.
• Custom Styling: To customize note appearance, copy css/notes-style.css to your theme and modify it. Avoid editing the plugin’s CSS directly to preserve changes during updates.
• Icon Usage: If you don’t need icons, disable them in the settings to reduce page load time by skipping the Font Awesome CDN.

Troubleshooting

• Notes Not Displaying: Ensure the shortcode is correctly formatted and not corrupted by the editor. Check that the content is not empty.
• Icons Not Showing: Verify that “Enable Icons” is set to “Yes” in the settings and that a valid Font Awesome icon class is used.
• Styling Issues: Clear your site’s cache if using a caching plugin, as styles may not update immediately.
• Shortcode Not Rendering: Ensure the plugin is activated and that no other plugins are interfering with shortcode processing.

For additional support, contact your site administrator or refer to the plugin’s documentation.

Try me