BugWP logo BugWP
Back to Community
Home / Community / Plugin → Wp shortcodes plugin — shortcodes ultimate

How to Center, Style, and Add Icons to Your Shortcodes Ultimate Box Titles

14 threads Sep 10, 2025 Plugin → Wp shortcodes plugin — shortcodes ultimate

Content

Many users of the 'WP Shortcodes Plugin — Shortcodes Ultimate' want more control over their box titles, specifically how to center them, add icons, or style them with custom CSS. This is a common request, as the default plugin options don't include these specific features out-of-the-box. Based on community discussions, here are the most effective and safe methods to achieve these customizations.

Common Problems and Their Solutions

1. Centering the Box Title

The plugin does not have a built-in parameter to center the title text. However, you can easily achieve this with a small amount of custom CSS.

Solution:

  1. First, add a custom class to your su_box shortcode to target it specifically. For example:
    [su_box title="Your Title" class="center-my-title"]Your content here...[/su_box]
  2. Navigate to your WordPress Dashboard, then go to Shortcodes → Settings.
  3. Locate the Custom CSS code field and add the following CSS rule:
    .su-box.center-my-title .su-box-title { text-align: center; }
  4. Save the changes. This CSS will target the title inside your specific box and center the text.

2. Adding an Icon Before the Title

There is no direct shortcode parameter to insert an icon into the title. The method involves modifying the final HTML output with a filter, which is more advanced but effective.

Solution (Advanced):

Warning: Adding code to your theme's functions.php file is a powerful method. Always use a child theme and create a backup before proceeding.

  1. You can use a WordPress filter to modify the rendered HTML of the shortcode. The following code snippet is an example that adds an image icon before the title for all boxes with a specific custom class (icon-title).
  2. Add this code to your child theme's functions.php file:
    add_filter( 'do_shortcode_tag', 'su_custom_box_icon', 10, 4 );
    function su_custom_box_icon( $output, $tag, $attr, $m ) {
      if ( 'su_box' === $tag && isset( $attr['class'] ) && strpos( $attr['class'], 'icon-title' ) !== false ) {
        // Replace the image URL with the path to your icon
        $icon_html = '<img class="su-box-icon" src="https://yoursite.com/path/to/icon.png" alt="" style="vertical-align: middle; margin-right: 10px;" />';
        $output = str_replace( '<div class="su-box-title"', $icon_html . '<div class="su-box-title"', $output );
      }
      return $output;
    }
  3. Use the shortcode with your new class:
    [su_box title="Your Title" class="icon-title"]Your content here...[/su_box]

3. General Custom Styling (Colors, Borders, Width)

For almost any visual customization—like changing the inner background color, adding a border, or adjusting the width—the most future-proof method is to use the built-in Custom CSS editor.

Solution:

  1. Add a custom class to your shortcode, e.g., my-dark-box.
  2. Go to Shortcodes → Settings and use the Custom CSS field to target that class. For example, to style the inner content area for a dark theme:
    .su-box.my-dark-box .su-box-inner {
      background-color: #333 !important;
      color: #fff !important;
    }
    .su-box.my-dark-box {
      border: 2px solid #555 !important;
      max-width: 500px !important;
    }

Important Considerations

  • Avoid Editing Plugin Files: Some older threads suggest directly modifying the shortcodes.php file. This is strongly discouraged. Any changes will be completely erased the next time the plugin updates, potentially breaking your site.
  • Use a Child Theme: When adding custom PHP code (like the icon filter), always place it in your child theme's functions.php file to prevent your changes from being lost during a theme update.
  • CSS Specificity: You may need to use the !important rule in your CSS to override the plugin's default styles, which are often highly specific.

By leveraging custom CSS classes and the plugin's settings page, you can safely and effectively customize your boxes without touching core plugin files. For more complex changes, carefully implemented PHP filters offer a powerful solution.

Related Support Threads Support