How can I incorporate HTML and CSS into the Wordpress editor?

Question

How can I incorporate HTML and CSS into the Wordpress editor?

I am currently working with a child theme based on "freestore". ()

My goal is to insert custom content into one of my pages using basic HTML and CSS. Although I have successfully made changes to the CSS styles within the theme's style.css file, I am facing issues when trying to add my own HTML along with CSS for styling purposes.

After creating a page named 'home' and inserting my HTML code through the WordPress tinymce text editor, I encountered difficulties applying the CSS from my style.css file. Inline styling does work, but I prefer external stylesheets for better organization.

For instance, in the WordPress text editor, I would include the following line:

<div id="cssTest">TEXT</div>

To style this element in my style.css file, I would write:

#cssTest {
    background-color: red;
}

However, the CSS rules are not being applied. On the other hand, adding inline styles directly in the HTML editor works smoothly:

<div id="cssTest" style="background-color: red;">TEXT</div>

My question is as follows:

How can I ensure that my styles are applied using an external stylesheet?
Is it advisable to create a custom template for the page and insert the HTML there instead?

html css wordpress css-selectors css-specificity

Answer 1

Answer №1

To ensure that the child theme's style.css includes the line Text Domain: freestore-child parentthemename-child, you can verify it manually. Any additional css id or class elements you introduce will be applied as well.

A recommended approach is to establish a custom.css file and include it in your child theme's functions.php using the wp_enqueue_style function.

I personally advocate for creating page templates tailored for specific pages such as the homepage, as I believe it contributes to better organization and efficiency.

Answer 2

To ensure that the child theme's style.css includes the line Text Domain: freestore-child parentthemename-child, you can verify it manually. Any additional css id or class elements you introduce will be applied as well.

A recommended approach is to establish a custom.css file and include it in your child theme's functions.php using the wp_enqueue_style function.

I personally advocate for creating page templates tailored for specific pages such as the homepage, as I believe it contributes to better organization and efficiency.

Answer 3

Answer №2

It is possible that a CSS rule from your original theme has higher specificity than the rule you are attempting to apply. To investigate this, use browser tools to inspect the element and determine which CSS rule is being applied.

For instance, if the existing rule looks like

.content main .section_1 .gxt1 {
  background-color: black;
}

, you will need to override it with a rule of even higher specificity, such as

.content main .section_1 .gxt1 #cssTest {
  background-color: red;
}

If the original rule includes an !important declaration, you must also use !important in your overriding rule. For example, to overwrite

.content main .section_1 .gxt1 {
  background-color: black !important;
}

, you would have to do something like

.content main .section_1 .gxt1 #cssTest {
  background-color: red !important;
}

Answer 4

It is possible that a CSS rule from your original theme has higher specificity than the rule you are attempting to apply. To investigate this, use browser tools to inspect the element and determine which CSS rule is being applied.

For instance, if the existing rule looks like

.content main .section_1 .gxt1 {
  background-color: black;
}

, you will need to override it with a rule of even higher specificity, such as

.content main .section_1 .gxt1 #cssTest {
  background-color: red;
}

If the original rule includes an !important declaration, you must also use !important in your overriding rule. For example, to overwrite

.content main .section_1 .gxt1 {
  background-color: black !important;
}

, you would have to do something like

.content main .section_1 .gxt1 #cssTest {
  background-color: red !important;
}

How can I incorporate HTML and CSS into the Wordpress editor?

Answer №1

Answer №2

Similar questions

Maintain the same UI appearance when the checkbox state is altered

What is the best way to stick a div to the top of another div?

Displaying today's date in a date picker on an HTML 5 form

Ensuring only one group is open at a time in jQuery when a new group is opened

Closing the Bootstrap 5 Navbar on Click Event

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

"Select2 dropdown fails to function properly upon returning to the page using the browser's

Using Selenium in Java to extract text from an h1 tag

having trouble retrieving information from the input field

Utilizing JSON data retrieved from an API to populate a dropdown menu in HTML

Browse through the chosen row information on a separate page with the help of angularJS

What is the reason behind utilities.scss taking precedence over styles.scss and local scss files?

Why do style assignments lose their motion when executed right after being made?

Discovering the type of device and the most recent login location using PHP in Wordpress

Show the file download link once the file has been selected using jQuery's file upload feature

How do I retrieve the download URL for the file created using Python in my Heroku App?

Complete and submit both forms during a single event

There are two borders in place, with the second border present only on the right and bottom

Using jQuery to create a complex hierarchy of div elements

Achieving vertical centering for content within :before/:after pseudo-elements