Custom CSS without plugin

Many thanks to stephencottontail and James Huff for helping to get the code in the OP visible to others. You folks are appreciated.

Code-wise, no.

You can go to the “Visual” editor and press the " quote button, which generates the blockquote HTML element.

Or you can consider a browser extension to help you reduce repetition when writing code, like this: https://chrome.google.com/webstore/detail/auto-text-expander-for-go/iibninhmiggehlcdolcilmhacighjamp?hl=en-US

• This reply was modified 7 years ago by Andrew Nevins.
• This reply was modified 7 years ago by Andrew Nevins.

See https://i.imgur.com/ZkXzfcQ.png

The forum system botched my original question. I need to be able to enter:

<mytipnote class="tip-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</mytipnote>

It’s the <blockquote class="tip-note"> and the ending </blockquote> tag that I need to automate. or I could make it <mytipnote class="tip-note"> with a </mytipnote> tag to end the styling instead of blockquote.

There is a button for block quotes so it follows that I should be able to add something for <mytipnote class="tip-note"> .. otherwise WordPress wouldn’t be able to style anything as a block quote when we press the blockquote button.

I realize this may involved editing core WordPress files and I cam comfortable with that.

I know this is possible, I just need to learn how to do it.

I realize this may involved editing core WordPress files and I cam comfortable with that.

DO NOT EDIT CORE WP FILES.

What you probably want to do is create a shortcode for [mytipnote]content[/mytipnote]

That could output the HTML you showed above.

Steve Stern, Yes, a shortcode would work perfectly for this. Thank you very much!

add_shortcode( 'mytipnote' ,  'revian_mytipnote' );
function revian_mytipnote( $atts, $content ) {
	$a = shortcode_atts( array(
		'extra_class' => '',
	), $atts );
	return '<blockquote class="tip-note '. $a[ 'extra_class' ] . '">' . $content . '"></blockquote>';
}

Steve Stern, Thank you! I actually had the shortcode implemented after reading the shortcode api page that you linked. I used to design web pages, with css, from scratch in a text editor, and I’m already familiar with php, so this was quick and easy. Thank you very much for your help and for pointing me to the shortcode api page. I love WordPress! ??

This works perfectly for the shortcode implementation (added to functions.php in the theme folder):

function tipnote_shortcode( $atts , $content = null ) {

	return '<blockquote class="tipnote">' . $content . '</blockquote>';

}
add_shortcode( 'tipnote', 'tipnote_shortcode' );

And this works perfectly for the CSS styling:

blockquote.tipnote {
    color: #313131;
    background: #dfffd9;
    border: 1px solid #a2cc99;
}

I’m adding the above information in case it should be useful to someone in the future.

Now that I’ve successfully added the shortcode, what would I need to do in order to add a button in the editor so I don’t even need to type in the shortcode? Just click a button for the shortcode the same way you do for a normal blockquote. I’m guessing this involves adding functions to php files in the theme folder, which is fine with me.

see https://paulund.co.uk/add-button-tinymce-shortcodes

Steve Stern, Dude, you ROCK! Thanks again! I’ve bookmarked that site as it has other tutorials that interest me.