How to modify the CSS of your WordPress without using a Child Theme

Surely more than once you had to modify the CSS code of your WordPress and have had fear of losing everything when you update the version of your WordPress .

I'm sure that after a lot of reading on the internet at the end you have come to the conclusion that the best solution to change the CSS of your WordPress without losing it with an update is through a Child Theme or son ​​theme .

Well, this process is not a simple topic and requires minimal knowledge even if there are plugins that do it automatically ]

So today I come to bring you a plugin with which you can modify the CSS of your WordPress without having to worry about installing children themes or strange things . You will only need to install the plugin and you will be ready to write lines and lines of CSS code.

The plugin I am talking about is Simple CSS . This wordpress plugin acts as a kind of child theme and gives priority to this style sheet above the rest .

Once the plugin is installed you will only have to put write lines of code in the new plugin .

In case any property you have written in Simple CSS is not respected you simply have to add the code ! Important before ending each property.

Example:

In this way you will ensure that all your properties written in Simple CSS are respected.

Also, with this plugin you can do things as interesting as modify the CSS of a particular WordPress page

 simple plugin css

To do this, you simply have to indicate the page on which the CSS (ID) will be modified and then write the CSS code

To know the ID of a WordPress page you will simply have to edit an entry or page in wordpress and look at the URL that appears once you are editing.

In this URL you will see the ID of the page since it is the number that appears after the code post =

You can also modify the CSS of the WordPress blog section using this code: You can also modify the CSS of the blog section WordPress using this code:

How you can check there are a thousand and one ways to modify the CSS of your WordPress with this plugin even if you use some visual layout ( Divi Elementor Visual Composer ).

Note that this plugin is the perfect complement for this allows to modify the CSS of any part of the web saving resources and optimizing your WordPress to the maximum without Necessity of any Child Theme.

Loading …

That may also help you:

How to change the location of the uploads folder in WordPress

Until not long ago we could easily change the location of the folder to which we uploaded the images and other files but from WordPress 3.5 that wonderful field that we had in " Settings -> Media " disappeared.

Fortunately it is very easy to make this change, and we have 2 methods to get it.

Choose file upload folder with a plugin

Easier impossible Do you want to recover the setting that allowed to change the location of the folder where the files are uploaded in WordPress?

Well we have two plugins, that I know at least, that recover it, as well of simple.

  • WP Original Media Path : Add an "expert" setting on the new page of Settings> WP Original Media Path from which to change the folder for your uploaded files.
  • ] Upload Url and Path En Abler : Cleaner than the previous one, simply recover the setting to be able to change the file upload path in Settings> Media of the administration of your WordPress.

Basically we changed this … [19659003]  Settings upload wordpress files

To recover with Upload URL and Path Enable the settings that had been before WordPress 3.5, these …

OR to a new setting, and something more limited, with WP Original Media Path …

Choose file upload folder with code

If you opt for this possibility it is also easy , just add a small code to the WordPress configuration file ( wp-config.php ) to define the folder to which the images will be uploaded, pdf and others by default .

The best of all is that works just like the folder by default, automatically creating folders by year and month if you wish .

 upload wordpress files

The line to add, yes, before line require_once (ABSPATH.'wp-settings.php '); it would be like this:

Logically you have to change the example path to which your

That's right, personally I recommend, for greater certainty, that completely change the route of " wp-content " as I explained a long time ago.

] Loading …

That may also help you:

How to edit the file templates with the visual editor

When we activate the Divi theme in our WordPress installation, we can lay out the pages and the entries with the visual editor but, in principle, we can not edit the file templates: neither categories, nor taxonomies .. .

So, if we do not know the code, we can use the Divi theme to visually format our pages, but we will not be able to edit the templates .

As of now, with a little knowledge of how WordPress works, we can have a much improved Divi .

Knowing the hierarchy of WordPress templates and with a simple line of code, we can hack Divi to be able to edit these templates with the visual editor .

Edit file template with Divi

To layout the content of the file template with the Divi's visual editor, we have to create a template with Divi, know which file of the Divi theme we must edit (or create new, if it does not exist) and include a short code with the design ID that we have created .

Let's go step by step to get this:

Create the Divi template with the design we want to give the file page

Let's go to the Divi Library and create a new template . The type of template must be " Design " (" Layout ") and it is important that it is not global .

 New settings template

In this design we can include all the modules that we need but it is important that in the design we include a module that collects the entries of Custom Post Type ] for which we are creating this design, since later we will include it in the template of that CPT and it is the archive page.

In our case, the CPT is " Projects " , so we will include a "Portfolio"

Create a child theme

To be able to edit the theme files without losing Divi updates, we must create a child theme. To achieve this, we need to access the files on our website via FTP, or if you prefer with a plugin .

Locate the file that we must edit or create in our child theme

Once let's have our folder with the theme son, we must create in that folder a file that is called with a specific name, which WordPress understands as template file .

To know what name we have to give to this template file, we must know the famous outline of the structure of a WordPress theme .

According to this scheme, to edit the file template, we must edit or create the file ] archive.php . This is true in all WordPress installations, regardless of the theme they have installed.

If we wanted to edit one of the pages of a Custom Post Type we should edit the file single-slug. php . In our case, as we have installed the Divi theme, which comes with the Custom Post Type which is called "Projects", whose slug is "project", we must edit or create the file single-project.php .

Insert in the template the module of the Divi Library

To insert in the file template the template that we have created and that we have saved in the Divi Library, we have to do the following:

We create a file that is called archive.php . We can do this with our favorite code editor (I use Sublime Text ) or with the notebook, and copy the following code:

The number that appears in quotation marks is the ID of the template type design or " layout " that we have previously created with our visual editor and saved in the Library of Divi.

How can we find out the ID of a template in the Divi Library? We go to the Divi Library, we put the cursor on the name of the module, and we look in the bar of State. The number that appears is the ID of the design.

 ID of the template or Divi module

We visit the page and we see the magic

We visit misitioweb.com/project and we check that our own design is loaded on the file page.

By touching a bit of code and understanding the WordPress template scheme slightly, we can take a very big step in designing our web pages with Divi.

Other applications

Knowing this system, we can go much further and get to design pages with a much improved user experience.

For example, we can automatically include a navigation system for messages in all the tickets. This would significantly improve the usability of our website, in a very simple way. You already know how to do it, right? Let's see what it would look like:

1. You create a template with a "Navigation through messages" module in the Divi Library.
2. You see what your ID is.
3. Edit or create the file single.php (or single-slug.php ) of your child theme.
3. You paste this code in the place where you want to place the navigation module, replacing the numbers that are in quotes with the ID of the template:

Thus, the navigation module for the messages would appear in all the entries (if you have edited single.php ) or in the entries of a certain category (if you have edited single-slug ).

As you can see, this system is very simple and very useful at the same time. In my opinion, Divi is the best commercial theme for WordPress that currently exists . If, in addition, we learn a little about how WordPress works, we get a very valuable tool .

I invite you to share in the comments how you use this system so that we can all see examples of templates of Divi Enhanced .

Loading …

May Also Help You:

What is WP_DEBUG and how to use it

If you are a developer, when you are programming a theme or plugin you must have a controlled environment but active WP_DEBUG ?. Well you should.

The activation of WP_DEBUG in WordPress development environments is greatly recommended . Putting it into operation is a simple operation that will reward you with great benefits for your work.

So let's see what this is about.

 stethoscope computer

What is WP_DEBUG? [19659007] WP_DEBUG is a simple permanent global variable, also known as PHP constant, introduced in WordPress 2.3.1, which you can use to enable or disable debug mode in WordPress .

Default mode debugging is inactive, but it is practically essential to activate it when you start a development work of themes or plugins .

WP_DEBUG is launched from the WordPress configuration file, the famous wp-config. php normally located in the WordPress installation folder, although you can find it somewhere else.

In principle the activation of WP_DEBUG is simple, you just have to put it in true or false depending on whether you want it to be active or inactive respectively.

In this way, to activate WP_DEBUG simply add the following line to the file wp-config.php :

And to turn debug mode off, change it to the following:

Una Once WP_DEBUG is active, debug messages and PHP notices will appear on the pages of your website. These messages usually help the developer to detect problems with the code, which might otherwise go unnoticed.

Now, the mere fact of activating WP_DEBUG is not enough. It is important to keep a record of errors for later review, something that we can also activate, better not?

WP_DEBUG_LOG

If you want to save the errors and notifications in a registry file where you can review them afterwards, you just have to activate the WP_DEBUG_LOG functionality. Putting it in true will save all errors and messages in a file named debug.log located in the folder / wp-content / .

Activate WP_DEBUG_LOG is so simple, again, how to add this to the file wp-config.php :

Save changes made and from now on WordPress will keep a log of all messages and errors in the file debug. log . Then you just have to review the code of your work to solve it.

Now, it occurs to me that if we are already saving the messages and errors in a file, what is the need to continue seeing those ugly messages and errors on the screen while programs ?

We are going to see the solution to this annoyance.

WP_DEBUG_DISPLAY

If we already have a file of the errors and messages we can avoid that they are shown in the pages in which they are generated. for this you have to activate the PHP constant called WP_DEBUG_DISPLAY. Once the debug mode is still active, messages or errors will not be displayed on your site.

Again, it is very easy to activate it, you just have to add one more line to the file wp-config.php :

In summary , that if you want to activate the debugging, that the messages are saved but not shown, the lines to add to wp-config.php would be the following:

That's it … that's it … that's all friends

And now, it's not complicated but it's a very useful tool for the developer, essential I would say. When you create or modify code for WordPress it is vital to check any possible error in it to be able to solve it, to debug it and offer a clean and professional code to your clients .

Of course, then you have to remember to disable the WP_DEBUG debug mode when you finish scheduling, for obvious security reasons.

Did you know the WP_DEBUG debug mode? What's more, do you use it?

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say that we have not warned you.

Loading …

That may also help you: