How to display a div in the WordPress TinyMCE editor

While I've noticed similar questions on this topic in the past, my query has a unique angle.

In today's world of responsive design, it has become crucial to be able to integrate divs with media query CSS into our content seamlessly.

I am interested in creating a button that can easily insert divs into the text area of Wordpress pages. Although a WordPress shortcode could achieve this, I would prefer the page layout to appear exactly as it will on the website without causing confusion for clients, especially when it comes to layout.

We can add tables to tinyMCE which display accurately in the editor by enabling tinyMCE's table button in Wordpress or using a WordPress plugin. I'm aiming for a similar effect with divs.

When switching to the text tab in Wordpress edit pages/posts, we can add HTML markup and see the divs when reverting back to Visual (using TinyMCE). However, this method might be too complex for most clients, making it less practical.

Therefore, I have two queries: 1. Is it feasible to create a TinyMCE button that adds divs visually matching their appearance on the web page? 2. Can the outcome of WP shortcodes be displayed visually in the editor?

Thank you in advance,

Neil

cssresponsive-designwordpresstinymce

Answer №1

This 

"Category Header=category-header;Sub-Category Header=sub-category-header";

...needs to serve as the content for 'theme_advanced_styles'.

Whereas this 

$style_formats = array(
array(
    'title' => 'Column',
    'block' => 'div',
    'classes' => 'col',
    'wrapper' => true
    ),
);

...should be designated as the value for 'style_formats' within the TinyMCE settings configuration.

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

The alignment of the Bootstrap form is incorrect

Seeking a solution for centering all form elements in the middle using Bootstrap. Attempts to adjust margin: 0 auto !important on the form-control class did not fully resolve padding/margin issues, especially with uneven spacing on input fields. Additional ...

htmlcsssassresponsive-designbootstrap-4

I am experiencing an issue where the CSS code is not appearing in the Chrome Debugger when I inspect an element

I recently wrote some CSS code to remove default browser styles: /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } ​ /* Remove default padding */ ul[class], ol[class] { padding: 0; } ​ /* Remove default margin */ body, h ...

htmlcss

What is the best way to spin an element around its center?

I'm faced with a challenge where I have an element that needs to be rotated using JavaScript. The rotation is currently functional, but it's rotating around points other than its center. My goal is to rotate the element around its own center. ...

javascriptjqueryhtmlcss

The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure whit ...

htmlcsstwitter-bootstrapbootstrap-5

Interactive Text Transformation on Mouse Over

My goal is to create a sleek and clean Index page featuring a simple white background with text centered in the middle. The initial text will be: USEStudio Upon hovering the mouse, the text will transform into: ...

jqueryhtmlcss

Automatically adjust the size of input control text based on the screen dimensions

I am facing an issue with resizing the text inside an input control when the window is resized. The problem occurs between the width range of 1032px to 575px, where the text inside the input control does not display completely. However, below 575px width, ...

htmlcssbootstrap-4

Angular 8 offers the functionality of a mat-dialog that is both draggable and resizable, providing

In search of a solution to enable both dragging and resizing for a mat-dialog. I have successfully implemented the dragging functionality using cdkDrag (DragDropModule). However, when trying to use resize: booth; in CSS, it seems to conflict with the dragg ...

cssangularangular-materialangular-cdk

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...

javascripthtmlcssflexboxcss-grid

Position the image slider uniformly at the bottom using CSS (utilizing the Slick Carousel library)

I am utilizing the slick carousel library to create a unique and elegant slider. However, when using images with varying heights, I am encountering issues in aligning the images at the same bottom: https://i.stack.imgur.com/ab5s3.png Here is my code snip ...

htmlcssslick.js

Substitute HTML data attributes

Hey everyone, I'm wondering how to change a data attribute in my code. For example, I am currently using a script for a video background, but I want to replace the video with a lighter version when viewed on a mobile device. In my JavaScript file, I h ...

javascriptjquerycss

Issue with TinyMCE loading skins in Rails with Webpack (404 error)

Currently, I am in the process of transitioning a Rails project from assets pipeline to webpack. However, I have encountered an issue with getting TinyMCE to work after installing it through yarn - the text editor isn't loading as expected. Pre-webpa ...

ruby-on-railsnpmwebpacktinymce

Display a unique button and apply a strike-through effect specifically for that individual list item

I've encountered an issue with my code that is causing problems specifically with nested LI elements under the targeted li element: $('#comment-section .comment-box a#un-do').hide(); $('#comment-section ul li[data-is-archived="true"]& ...

javascriptjqueryhtmlcss

The text in Outlook for Windows emails is being obscured by a button that is overlapping it

As a newcomer to HTML email development, I've encountered an issue that has been puzzling me for the past few days. The problem lies in creating a two-column layout where the left column contains an image and the right column holds text along with a b ...

htmlcssemailoutlookhtml-email

"Step-by-step guide on positioning a video in the center over another

I am designing a landing page and I want to incorporate a background video with a centrally aligned logo on top of the video. My goal is for the center of the logo to always align with the center of the background image, regardless of how the page responds ...

cssvideoresponsive-design

Solve inconsistent divs using HTML and Bootstrap styling techniques

I'm currently working on a .cshtml page where I display database objects in a card format using HTML and Bootstrap. However, the cards are appearing unevenly as shown below: https://i.sstatic.net/LbrrH.png Here is the code snippet I am using: @model ...

htmlcssbootstrap-4

Steps for constructing a customized table

I'm not entirely sure if I explained that clearly, so here's another attempt: My goal is to create a table where each alternating row has border radius applied to the top sides, filling the space created by the border radius with the color of th ...

htmlcsscss-tables

How to implement a delay for submenu dropdown in Bootstrap 3

I am trying to implement a delay on a submenu that I have created, rather than the entire bootstrap3 dropdown menu. The goal is to allow users to easily move their cursor to the submenu without it closing unexpectedly. Although the jquery code should still ...

javascriptjqueryhtmlcsstwitter-bootstrap

Looking for a personalized grid layout with 3 columns for your thumbnails?

I am trying to make this work and I stumbled upon this website. Instead of having 4 columns, I would like to have 3 columns with the same height. Is there a way to achieve this? This is how it appears on my webpage: x http://imagizer.imageshack.us/v2/15 ...

htmlcsstwitter-bootstrap-3

The search bar on the screen does not span the entire width as expected using Bootstrap CSS styling

I have a search form with an input field and a button. When I place the form in a standalone HTML file, the input and button span across the width of the div. However, when I embed it into the specific div I am working on, it shrinks to the left. Here is t ...

htmlcsstwitter-bootstrap

Exploring query options in jQuery for searching text using the :contains selector

Why is the if statement below not giving me the expected results? Every time it just turns the paragraph yellow, even when the word doesn't match the :contains expression. Here's the query I'm using. $(document).ready(function() { if ($ ...

javascriptjqueryhtmlcss