Different colored words within a Heading

Hi,

so the last solution will involve coding and you need to edit some inner code from the theme.

first, go to the admin page and then select Tools > Theme File Editor, and look for function.php. and then add this code before the ::instance() of the theme.

function enqueue_custom_editor_scripts() {
    // Register the script
    wp_register_script(
        'custom-editor-js',
        get_template_directory_uri() . '/assets/js/custom-javascript.js',
        array( 'wp-blocks', 'wp-element', 'wp-rich-text' ),
        filemtime( get_template_directory() . '/assets/js/custom-javascript.js' ),
        true
    );

    // Enqueue the script
    wp_enqueue_script( 'custom-editor-js' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_custom_editor_scripts' );

and then make a file called custom-javascript.js then add this code

(function( wp ) {
    const { __ } = wp.i18n;
    const { registerFormatType, toggleFormat } = wp.richText;
    const { RichTextToolbarButton } = wp.blockEditor;
    const { createElement, Fragment, useState } = wp.element;
    const { Popover, ColorPicker, Button } = wp.components;
	
	const TextColorButton = (props) => {
        const [isVisible, setIsVisible] = useState(false);
        const [color, setColor] = useState('#ff0000');

        const toggleVisible = () => setIsVisible(!isVisible);
        const applyColor = () => {
            const value = toggleFormat(
                props.value,
                {
                    type: 'custom/text-color',
                    attributes: { style: color: ${color}; }
                }
            );
            props.onChange(value);
            setIsVisible(false);
        };

        return createElement(Fragment, {},
            createElement(RichTextToolbarButton, {
                icon: 'editor-textcolor',
                title: __('Text Color', 'textdomain'),
                onClick: toggleVisible,
                isActive: props.isActive,
            }),
            isVisible && createElement(Popover, {
                position: "bottom center",
                onClose: () => setIsVisible(false),
            },
                createElement(ColorPicker, {
                    color: color,
                    onChangeComplete: (newColor) => setColor(newColor.hex),
                }),
                createElement(Button, {
                    isPrimary: true,
                    onClick: applyColor,
                }, __('Apply', 'textdomain'))
            )
        );
    };

    // Define your custom format
    registerFormatType( 'custom/text-color', {
        title: 'Custom Format',
        tagName: 'span',
        className: 'custom-format',
        edit: TextColorButton,
    } );
	
} )( window.wp );

add the file to the assets/js. you can use the file manager for your site like cpanel or ftp to copy the file to the js directory. the folder structure should be app>public>wp-content>themes>[theme name]>assets>js

Note: though I assure you I do not have any malicious intent, if you do not have any experience with code, be careful adding custom code to your site. you can copy the code to chat GPT and ask what is the purpose of that code to make sure it wont cause any harm to your site.

• This reply was modified 4 months, 3 weeks ago by gowinda.

Hi @gowinda,

I appreciate your help so much thus far!

This is all new for me, and step 1 I did manage, but step 2… I can’t figure out how to add a new file to paste the code in. My host provider suggested I download FileZilla, but I still can’t figure it out. Please check my screenshots for reference. If you could elaborate on how to add that new file exactly, that would be amazing!

Hi,

in your case, the public folder should be httpdocs. just follow it from there wp-content>themes>[theme name]>assets>js. fins the folder called js and upload your file there. (i think you can just drag and drop the file to the folder destination)

• This reply was modified 4 months, 3 weeks ago by gowinda.

Hi @gowinda,

I managed to add the file and paste all the codes, but I still don’t have the ‘highlight’ option.

Let me know if and what I did wrong. I really appreciate your help!

Hi,

the line of code that has a warning should be inside of grave accent [`] for the color: ${color};

wordpress somehow registers it for inline code here so it’s not showing up.

• This reply was modified 4 months, 3 weeks ago by gowinda.

Hi @gowinda,

Great, that fixed it! But it doesn’t say ‘highlight’ how it is supposed to, but I got the tool ‘Text Color,’ which is fine. This was a challenging fix, so I appreciate your time and effort to help me!

Hi,

I am glad it works, the name difference was intentional. Maybe future updates of wordpress would fix the problem so to prevent confusion and some unwanted conflict I give it a custom name and format type.

if you have any more questions, please do not hesitate to ask here ??

Hi @gowinda,

I was working on a new post again when I noticed the ‘Text Color’ option was gone again. How could this happen, and how do I fix it again? I have updated the theme so that you know.

Hi,

just so you know, updating themes in wordpress would reset all the files of that theme. so, the changes you made before probably also reset. you need to do it all again, unfortunately.