How can i add note, caution, warning quote inside the text? [closed]

Question

I use wordpress theme in my website. Question is simple, i want to add inside my articles as an inline note, caution, warning quote like picture. How can i do that? Is there any plugin or way to do that?

Answer 1

You can hook into the_content filter and add your note after every post. Then you can style it to have a nice quote.

add_filter('the_content','add_my_note');
function add_my_note($content){
    // Write your note here
    $note = '
        <div class="my-note">
            <h3>Note Header</h3>
            <p>Note body</p>
        </div>';
    // Append the note to the content
    $content = $content . $note;
    // Return the modified content
    return $content;
}

This will add the note to your post's content. Now time to style it.

.my-note {
    display:block;
    background:lightgray;
    border-width: 0 0 0 3px;
    border-color:grey;
    color:black;
    border-style:solid;
    padding: 1em;
}
.my-note h3 {
    display:block;
    font-size: 2em
}
.my-note p {
    display:block;
    font-size : 1em;
}

I've done some basic styling for you, which you can change to fit your tastes,

Answer 2

Run in your theme the CSS of admin dashboard.

wp_enqueue_style( 'wp-admin' );

Then you could use WordPress admin alerts CSS

Example from docs:

<div class="notice notice-success is-dismissible">
    <p><?php _e( 'Done!', 'sample-text-domain' ); ?></p>
</div>

Another option could be done if you will have a bootstrap based theme, then you could use bootstrap alerts css styles, or include bootstrap css in your theme but this option would effect other elements in your site design.

Example from docs similar to the screenshot in your question:

<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>