Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting.

<span style="text-decoration-line: underline;">text underlined</span>

I would like to change this functionality to insert the following code into the content:

<u>text underlined</u>

I understand that I need to adjust the TinyMCE init settings, but I am unsure of where to locate this. Can someone provide guidance on what needs to be added there? This modification is essential for my WordPress blog, so any assistance is greatly appreciated :)

htmlwordpresstinymceeditor

Answer №1

If you want to achieve this, you can create your own custom shortcode. Simply include the code below in your functions.php file and then use [u] before and after the text you want to be enclosed in <u>-tags.

function underline_shortcode( $atts, $content = null ) {
    return '<u>' . $content . '</u>';
}
add_shortcode( 'u', 'underline_shortcode' );

Alternatively, you can make adjustments in your wysiwyg.php file by adding the following code snippet after tinyMCE.init {...

inline_styles: false,
formats: {
    underline: { inline: 'u', exact : true }
}

This will ensure that the formatting button will use traditional tags for underlining. Keep in mind, however, that using u-tags is no longer recommended as they are deprecated. (Source: Underline format problem)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add option button

Is there a way to dynamically add radio buttons using jQuery or JavaScript and save the data into a database? I have successfully appended input types such as text, textarea, checkbox, and select with options. Here is my code: <!DOCTYPE html> < ...

javascriptphpjqueryhtmlmysqli

What is the best way to design a Global Navigation menu for websites?

For example, I am looking to integrate a Navigation menu into my website using just one file. I have considered using PHP or creating an HTML frame, but I am wondering what the current industry standard is for professionals. Any insights? ...

javascriptjqueryhtmlcssnode.js

Adjust the container within the column to match the height of the column in the bootstrap grid

Why is the green container expanding over the blue column when I apply height: 100% or h-100? Is there a way to make it fit just the remaining height of the column? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstra ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

javascriptjqueryhtmlcssdynamic

HTML text/code ratio display tool

I need help finding a firefox/firebug plugin (or any OFFLINE tool is fine) that can show me the real text/markup ratio. While there are some online options available like and a Firefox plugin at (which is also online), I am specifically looking for an o ...

htmloptimization

Different sources for multiple iframes

Greetings everyone, I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src. <html><body&g ...

jqueryhtmliframe

Combine various input data and store it in a variable

I am looking for a way to add multiple input text values together and store the sum in a variable. Currently, I can add the values and display it in an id, but I want to assign it to a variable instead. The condition for this variable is described below af ...

javascriptjqueryhtml

A step-by-step guide on leveraging useRef() to specifically target dynamic material-ui tabs

When attempting to upload files to a specific channel, they always end up being uploaded to the first tab or channel. I've been using useRef to try and fix this issue, but I'm not sure what exactly is missing. By "tab," I am referring to the tab ...

javascripthtmlreactjsdommaterial-ui

Numerous criteria for selecting a checkbox

I am working with a student database table called student_db, which looks like this: Name Gender Grade City John Male 2 North Dave Male 4 North Garry Male 3 North Chirsty Female 5 East Monica Female 4 East Andrew Male ...

javascriptphpjquerymysqlhtml

Central Player Component

Do you need help with centering text and a player on your WP site? Check out my website Here is the code I am currently using: <div class="listen_section"> <div class="container"> <div class="row"> <div class ...

htmlcsswordpress

Can someone please explain to me why the Transition effect is not functioning properly for input:checked::before?

Can someone please help me troubleshoot why the transition effect on the input's before element is not working when checked? If I can't solve this issue, I might have to consider alternative solutions. input[type="checkbox"]{ width: 160px ...

htmlcssinputchecked

Experiencing difficulties with setting the width of owl carousel

Here is the HTML code snippet: <div class="row"> <div class="col-lg-7 col-sm-6"> <div class="owl-carousel" id="homeCarousel"> <div class="item"> <img src="images/brela.jpg" alt="brela makarska"> </d ...

htmlcss

Sending a post request in PHP

Having an issue with a basic post form functionality where the data is not being transmitted correctly. After hitting submit, the process.php file is stating that no username and password have been entered. It seems like there may be a simple mistake that ...

phphtml

What is the best way to connect a fresh post to a different URL in ReactJS and Redux?

Currently, I am working with Redux and ReactJS to develop a discussion platform. One of the key features I am trying to implement is where users can input the title and content of their post, which will then be submitted to create a new post. After submit ...

javascripthtmlurlreactjsredux

Excessive greed in 2 column layout is causing left alignment issues

Check out the sample code here: http://jsfiddle.net/YUhgb/ HTML Markup <html> <body> <div class="left"></div> <div class="right"> <div class="container"> <div class="i ...

htmlcss

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...

javascripthtmlcssinputclick

Adding multiple lines of text using jQuery

I am facing an issue while trying to append a string to an HTML element. It works perfectly fine with a single line string, but breaks when I try to split it into multiple lines. <div><h4 >List to do:</h4><span id="added"></span ...

jqueryhtmlstringappend

Currently focusing on improving the responsiveness of the navigation bar and grid layout

I'm facing a new challenge I can't seem to crack: Despite setting my grid boxes to be responsive with 1fr column and (6, fr) row, they are displaying poorly on mobile devices. Additionally, my navbar remains fullwidth and mobile-like even when i ...

htmlcss

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

javascripthtmlcssvue.jsvuetify.js

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Hello everyone, I'm a complete beginner when it comes to programming so please be gentle with me on my first question :) I'm trying to put together a simple website with a lightbox gallery, and you can check out what I have so far here. The prob ...

javascriptjqueryhtmlcss