Add break tag to buttons in compose panel

  • I have to manually type < br > in front of each new paragraph I compose, because I like my entries to have more space than the default one-line between paragraphs.

    I do NOT currently have the WSIWYG Rich Text Editor enabled (and I don’t want to enable it). Instead, I have the code version, with the Markdown plugin enabled.

    I’d like to insert a button at the top of the editing panel for the break tag…just like how there’s a bold tag at the top that adds < strong > < /strong > around the text you want bolded.

    How do I add an additional HTML syntax button to the top of the compose panel?

Viewing 2 replies - 1 through 2 (of 2 total)

  • This can be done by adding a new button to quicktags.js in wp-includes/js/ — however, be aware that in doing that, you’re editing a file that will get overwritten in upgrades so you’ll want to make sure you remember that when you upgrade.

    So I’ll break here and offer a better solution first – in your CSS, set the spacing for your P tag to something else – add a line like p {padding-bottom: 25px;} and this will automatically insert that extra space for you and be more standards correct than having a bunch of extra line breaks (play with the number to get the spacing you’re looking for). Not only that, you don’t have to click another button every time. ??

    If you’re just dead set on having that button though (it’s a lot more work all the way around, so I would really urge you to play with the CSS) — Podz has a good tutorial on how to do it here: https://www.tamba2.org.uk/wordpress/quicktags/

    Thread Starter chris86

    (@chris86)

    FruitFly, thanks so much. Awesome response. I appreciate it. I agree with you; it would be better not to modify the Javascript file for the reasons you mentioned. I’ll make the change via CSS.

    However, looking at my custom.css file, I have the following syntax for all items in the file. Items are either…

    .custom #wrapper (then the specified attributes)
    .custom #sidebar (specified attributes)
    .custom #commentform (specified attributes)

    OR

    I’ve got one tag that’s defined as body.custom (then the attributes).

    So, following the same pattern as the body.custom tag, I added the following code…

    p.custom
    {
    padding-bottom: 25px;
    }

    I hope this works. I’ll post the results in a couple of minutes.

    Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add break tag to buttons in compose panel’ is closed to new replies.