0

The effect I'm looking for in the end is to have the first line in some paragraphs bolded. These would be the first paragraph of each section in my post. This kind of effect is used on this Bloomberg.com post. Notice the first paragraph in the post and then also the first paragraph of later sections of the post are bolded. The way they accomplished this was to have a particular class ("section-break" in their post) applied to the paragraphs they wanted this effect on, and then using the ::first-line css pseudo class, applying it to the paragraphs with the "section-break" class.

I can set up the css to do that what they did; the only thing I'm struggling with his how I can delineate, while writing my post, which paragraphs would be the beginning of a new section and so would need to have their own "section-break" class. Is there a built in way to do this? And if not how might I be able to hack it in?

Thanks!

2
  • Can't you do it manually - in HTML view of the editor? <p class="whatever">your paragraph</p> Apr 1, 2016 at 2:30
  • 1
    Yup, just figured that out. I thought since paragraph tags were created automatically it wouldn't let you, but it does. Thanks!
    – fivestones
    Apr 1, 2016 at 2:34

3 Answers 3

1

I figured this out. Even though Wordpress automatically adds the <p> tag and doesn't show it to you in the editor (in either the 'visual' or 'text' editor views), you can type it in anyway in the 'text' editor view, along with a class.

So to do this, go to the 'text' editor view, and just type, e.g., <p class="section-break>Here is the first paragraph of a new section of my document</p>.

And although when you type a regular <p> tag yourself (without a class) it will disappear when you switch to the 'visual' editor and back to the 'text' editor view, if instead you type it in with a class, it will stay there available to edit if it has a class attribute (e.g., <p class="something">stuff</p>).

0

If you want to add specific styles to a specific section within the paragraph you can create a element with a class name, and then add styles within your stylesheet.

Or, in this case, you can just use to make a line bold.

0

You can create custom formats to add to the editor. You can then highlight the text and select the style you need.

Add the following to your functions.php

add_filter('mce_buttons_2', function($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
});

add_filter('tiny_mce_before_init', function ($init_array) {
    $style_formats = array(
        array(
            'title' => 'Custom Class',
            'block' => 'p',
            'classes' => 'custom-class',
            'wrapper' => false,
        ),
    );
    $init_array['style_formats'] = json_encode($style_formats);
    return $init_array;
});

You can then add the following to functions.php to add styles to the editor so you can style your class.

function custom_editor_styles() {
    add_editor_style('public/css/editor-styles.css');
}
add_action('admin_init', 'custom_editor_styles');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.