Jump to content

How to add class to <p> wrap tag on textfields?


Recommended Posts

Hi PW Boffins,

So you know the way CKEditor adds <p> wrap-tags to the output. I'm actually okay with that and it's almost always exactly what I want it to do. However, one thing that has come up a couple of times is where I'd like to add a class style attribute to those tags, e.g. <p class="blah">. Is there a simple way of doing this?

Lets say I have a field called "summary". Maybe I want the wrap tag to say <p class="summary">, rather than just <p>.

In other words, what's the best way to add a style class to the auto p wraptag which reflects the name of the field from which it was created?


Link to comment
Share on other sites

You can switch off 'ACF' in your CK Editor settings which will stop the editor stripping any markup

If you just want to allow 'class' then go to CK Editor settings for your field and find 'Extra Allowed content' and enter in there the following:


This should allow you to put classes without them being stripped.

Link to comment
Share on other sites

It's actually quite straightforward. In your field settings, under Input, add a reference to a JS Styles Set:


If you're using the blank profile, that file won't exist. If so, you'll need to copy the one from wire/modules/Inputfield/InputfieldCKEditor.

All that's left is to add the style you want for your paragraphs.

Your file should look like this:

CKEDITOR.stylesSet.add( 'mystyles', [ 
    { name: 'Inline Code', element: 'code' }, 
    { name: 'Inline Quotation', element: 'q' },
    { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
    { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
    { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } }, 
    { name: 'Small', element: 'small' },
    { name: 'Deleted Text', element: 'del' },
    { name: 'Inserted Text', element: 'ins' },
    { name: 'Cited Work', element: 'cite' }

    // plus your style
    { name: 'Summary', element: 'p', attributes: {'class': 'summary'} }
] );

Then, you can select your whole paragraph and choose the Summary style for it.

Edit: Might also be a nice idea to add a CSS file to apply the style in the editor too. :)

Edit: Hold up, I see you're wanting this to happen automatically for the name of the field... Didn't pick that up, sorry. That said, this is cool for a targeting specific paragraphs.

  • Like 6
Link to comment
Share on other sites

You could use a custom Textformatter module for this. I quickly hacked together this one, nothing perfect as it replaces all occurrences of opening p tags, but you could spice it up using regex etc. I gave it a quick test – it does it's job. This should get you started:


class TextformatterAutoClass extends Textformatter{

	public static function getModuleInfo() {
		return array(
			'title' => 'AutoClass Textformatter', 
			'version' => 100, 
			'summary' => "Adds a class to the automatic p wraptag of CKEditor" ,
			'author' => 'Johannes Dachsel'

	public function formatValue(Page $page, Field $field, &$str) {		
		$str = str_replace("<p>", "<p class='summary'>", $str);
  • Like 2
Link to comment
Share on other sites

This fills in the field name automatically and the return shouldn't be necessary as the function is at it's end and does not return anything. 

	public function formatValue(Page $page, Field $field, &$str) {		
		$str = str_replace("<p>", "<p class='{$field->name}'>", $str);
  • Like 4
Link to comment
Share on other sites

Sorry for the silence. I've been offline since yesterday.

Thanks everyone for your input. I'm sure these will all come in handy for various things.

I think the TextFormatter route is definitely the way to go in this instance. Not too concerned about it adding for every p tag within the textfield, as generally when I need this functionality, it's when there is only one paragraph of text.

Thanks again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...