How to remove the additional CSS from the WordPress Customizer

From WordPress 4.7 we have in the Customizer the option of " Additional CSS ", with the that add custom CSS classes to our site, and although it is a fantastic utility if you know CSS is a nuisance for which you have no idea or do not want to use it or take up space in the Customizer.

many situations in which it is possible that you prefer not to display the option of " additional CSS " in the Customizer .

From customers of the that you do not trust that they are retouching what they do not owe to collaborators who will be attracted to modify styles of the web at the first exchange.

So let's see several ways of remove the option of " Additional CSS " of Customizer from WordPress .

Remove the additional CSS option from the Customizer

The quickest and easiest way is to add the following code to the file functions.php of the active (child) theme :

With the above code you remove the utility, but you can go a step further to remove the section whole To do this you must replace the last line of code with the following, like this:

Control which user profile can see or not the CSS Additional

Another possibility is that controls it for each user profile . For this nothing better than the Members plugin a gem that I have always used.

You only have to edit the profiles you want to disable this possibility and uncheck the permissions of " HTML without restrictions "

What if I want a user profile to have HTML with no restrictions but no access to additional CSS?

Well, in this case you just have to add the following function to your functions.php :

This time the permission assignment is modified so that the filter hook map_meta_cap which is the one that enables unrestricted HTML, can not edit CSS.

Loading …

also help you:

How to disable the Gutenberg editor on custom content types

The advent of the publisher Gutenberg is getting closer and we want it or not as the main feature of WordPress 5.0 so we better prepare ourselves, to love it or to hate it.

If you just do not want it, I already explained how to deactivate Gutenberg completely but if you're still thinking about it, but you know that there are custom content types (celebrities custom post types ) in which you do not want to load for technical reasons or whatever, here's the solution.

As the same code indicates, you just have to change the content type Custom (CPT) code for yours where you do not want Gutenberg to load.

How to create a custom color palette for the Gutenberg editor

You already know that I'm not especially a big fan of the editor Gutenberg . Not from his philosophy of introducing visual editing to WordPress, which you know it is, that I think is necessary, but of how to implant it by noses and from its first versions, as a substitute for the default editor in the tickets, a big mistake.

Now, one thing does not take away the other, and is going to touch us, yes or yes adapt, so better to learn things, tricks, from the editor Gutenberg like this one that I propose to you today, I do not know if by conviction or because José Ángel Vidania has abducted me .

Well, one of the curiosities that the Gutenberg editor incorporates is ] the color palettes which by default is like this:

What you do not know is that these color palettes can be customized either because you use a special combination on your website, because you are a developer of themes, or simply because you like to get involved. [1 9659003] In either case, it is very easy to add your own color palette . You just have to edit the file functions.php of the theme and add something like this:

When saving your changes what you will get is the following:

Logically, in the code put the colors (in hexadecimal) you want in your color palette. Here I opted for two shades of magenta, a light gray and a dark gray (basic).

As you see, customize Gutenberg is very easy and you have to thank the development team huge documentation that is generating for this new and brand new WordPress editor, like it or not.

Loading …

That may also help you:

How to change the size of the highlighted image in the blog module in grid

The blog module in grid Divi is quite colorful and attractive, but if something I have found that my clients do not like is that the image prominent, or the box to her destined, have a fixed size, that is not the one that they want.

And yes, possibly have clients very squared, but it is necessary to give service to all no?

The other day we talk about how to match the height of the elements of the blog module in grid a solution that customers like a lot, but the truth is that this change the size of the highlighted image they ask for many more. 19659003] The problem is that Divi has a default size, and if your image is, for example, smaller or bigger, you adjust it as you want, or you pixelate it or cut it out . ] That said, the situation is when your client always uploads the images to a specific size to, and wants them to come out whole. In that case what touches is force the default size to the client .

Fortunately, the solution is simple.

You just have to add a couple of new functions at the end of the file functions.php of the son theme:

In the previous code only you have to change the example sizes of width and height of the thumbnail to those of your client's featured images .

Save the changes and that's it, now all the thumbnails with the highlighted image will have the exact size of the images uploaded by your client to that size .

Note: If you upload the highlighted images of another size to the code, then each image will be different. The trick is that the image you upload is exactly the same size as the one defined in the code.

Loading …

May also help you:

How to optimize Contact Form 7

If, like millions of WordPress users, your contact forms plugin is Contact Form 7 you may have noticed that of the only thing that sins is that according to what situations can slow down the loading of your website so we will put solution .

Selectively load Contact Form 7

] The main problem as far as the load is concerned, which has the plugin Contact Form 7 and the majority of plugins is that loads all its styles and scripts globally in your web , it does not matter if there is a form or not on each page.

This, which is understandable, because the developer does not know where you are going to put a form it is a burden on the load of pages and entries that will not show any form but that, however, will be uploaded n them all CSS and JavaScript plugin.

Imagine, then, a website with 20 pages and 500 entries in which only one of the pages has a form. What you will get is that the styles and scripts of Contact Form 7 will be loaded in all of them, it does not matter if they have a form or not .

The solution is to register styles and scripts only in the pages or entries in which there is form.

Do not register CSS styles of Contact Form 7

Not to register ( deregister ) the styles of Contact Form 7 in any page or entry other than in which yes there is a form we just have to know the slug of the page with form, and cancel them in the rest, like this:

This code must be put in your customizations plugin or at the end of archi vo functions.php of the active theme (better if it is the theme child ).

What the code does is check if the page is not the one with the slug ] contact in which case un-registers the Contact Form 7 styles using the WordPress function wp_deregister_style.

Not registering the Contact Form 7 JavaScript

] For to un-register the JavaScript in the pages that do not have form we will do almost the same, but this time with the function wp_deregister_script . Following the previous example would be like this:

Of course, remember to save changes in your plugin customizations or file functions.php the one you have chosen to add these functions.

What if I have forms on several pages?

Good question. No problem, then we will adapt the code for to include the slugs of all the pages that have form .

The only thing is to modify the line that looks for the condition is_page and that modify it indicating the array of slugs instead of a single one. For example:

How to locate the slugs of your pages with forms

If you do not know where to locate the slugs of your pages you just have to go to the window of administration of posts or pages and click in any of them in Quick Edition and copy from there the slug .

Selective Load of Contact Form 7 locating the shortcode

As you already know, the Contact Form 7 plugin will show your forms where you find a shortcode containing contact-form-7 so other mediant mode e that we can load styles and scripts is locating this string in your content and unregistering styles and scripts in the rest .

You just have to create a function like this:

What the above code does is override the actions by which Contact Form 7 loads styles and scripts there where the shortcode of the plugin.

Do not load anything from CSS or JavaScript from Contact Form 7

If, for any reason, at some point you want to completely cancel the loading of Contact Form 7 styles and scripts you can define new constants in your file wp-config.php these:

This may be interesting in development environments, for example.

Can it be done with plugins?

I'll say yes, but the issue is that the only one available for this basically what you are asking for is the conditional on which it will not apply which you have to know and apply, so it's the same as what we did with the first codes.

If you want to try it, it's called Script Logic .

The problem with the refill of Contact Form 7

A few months ago it arose [19459] 067] an optimization problem whereby the usual web speed meters like GTMetrix showed important page load delays because of the following string:

The problem occurred where you had a loaded cache of page with some plugin so the active content as the integrated reCAPTCHA of Contact Form 7 needs to be updated in each page load, generating a call to the famous refill .

If you still have this problem can be solved in two ways:


Since version December 2017, this problem has been solved used, so update.

Manually delete the plugin page cache

Although you already know that I never recommend modifying plugins, themes or WordPress files, if for another reason you can not update, and do not use any type of CAPTCHA, locate the includes / controller.php file and cancel (comment) or delete these lines:

And why better not change plugins?

You yourself, but Contact Form 7 is the plugin with a more continuous development, which is updated to improve, and with a wider ecosystem, due to the hundreds of extensions that improve it .

The only thing is that if it causes you some problem of delay of load of pages you already know how to solve it.

Loading …

That may also help you:

How to automatically add products to the cart just by visiting the store

An element of loyalty in any online store could be add a product, preferably free, to the shopping cart any visitor just for the fact of having reached your ecommerce, so let's see how to get it.

Add a product automatically to the cart

To achieve this you first need to identify the product ID that you want to add to the cart. To do this, go to the list of products on your WordPress desktop and in the list you will see them when you hover over any product.

Once you have located the product you want to automatically add to the cart, it's time to create the function that will do the magic .

To do this add a code like the following to your plugin functionalities or if you prefer it in the file functions.php of the active theme :

If you look closely, every line that starts with $ wp_customize refers to to a section or panel of the customizer, and in the example there are 4 of them that have two bars (//) in front.

These bars what they do is to render the code ineffective, they make it a comment, so that will remove the sections or panels that do not have them leaving only these in view.

Another possibility is simply to erase those lines, but I preferred to leave it so that you know all the possibilities and you are the one choose what will be seen and what will not.

Summing up:

  • If a line has 2 The front bars will be seen in the customizer, because you cancel the code that removes them ( remove_section ).
  • If you do not have the 2 bars it will NOT be seen in the customizer, since the function is executed and will remove that That said, a complete customizer would be such that:

    And, once active the previous code would remain that way :

    And if you want to hide or show other different sections you already know how it's done

    Loading …

    That may also help you:

Show the entries in alphabetical order in the WordPress loop

By default, the loop from WordPress will display your blog entries in chronologically inverse mode so that your last entry will be shown higher than the previous ones, but sometimes it may be interesting to skip this convention and display them alphabetically .

Either to create an alphabetical index where each entry is one of the definitions, or a glossary, or any type of publication that requires entries to be shown alphabetically is an option to take into account for the day you want to use this possibility in a project.

Category file in alphabetical order

An example would be to show some specific category in alphabetical order. For this we should edit the file of the template of the categories, normally category.php and add something before loop like this:

Cover in alphabetical order

On the other hand, if what you want is show the loop of the cover in alphabetical order instead of chronologically invers or, in this case what we will do is modify the main WordPress requests ( pre_get_posts and is_main_query ).

But in this case it is not necessary to edit the file with the loop cover but it is better to do it forcing the modification from a file of functions ]either an own plugin or the file functions.php of the active theme.

We did this by adding this to the chosen one:

This function will edit the main request before it is executed, and will make sure that wherever the main request of the entries, such as in index.php entries are shown alphabetically .

Loading …

may also help you:

How to remove additional product tabs in WooCommerce

WooCommerce by default shows at least 2 tabs in addition to the basic information of the product, the product description and the valuations, but if you do not need them you can easily delete them .

If you do not have it clear, before reading, you may want to change the order in which they are displayed by default, so you can I recommend reviewing this other article on how to change the order of the WooCommerce tabs .

Why should I remove these tabs?

There are many reasons, but the main one is to reduce possible distractions, to make the sale easier, because if the client has reached the product page and has the basic information and the buy button, why distract them with more data or user ratings?

elim Inar only the description tab

If you only want to delete the description tab and leave the others, for example, the stars in the Google search results are always good, you can do it easily.

You just have to Access the function file of your child theme ( functions.php ) or to your customizations plugin and add the following:

How to delete only the ratings tab

If, on the other hand, you want to remove the ratings tab then the code to add would be this one:

How to delete only the Additional information tab

The additional information is the one that shows attributes in list mode when you decide to show them on the product page, and almost never adds anything, so you can remove it almost always, and it would be with this other code. I say:

How to remove all the eyelashes

Oh, what did you all want? Easier impossible you do not need to add all the previous codes, better use this other code that unifies them all:

And why can not CSS?

Sure, you can also not show the tabs instead of not loading them.

Now, keep in mind that this method is less optimal, because your web loads the functions and then hides the visualization of the tabs it is much more efficient to simply avoid loading with the previous method.

But if you want to do it then add this code in the section of Additional CSS of the Customizer :

And hide the tabs but you still see the description of the product?

Also, then the CSS would be the following:

As you can see, with a bit of code you can customize WooCommerce to infinity the limit is your imagination and the needs of your online store.

Loading …

That may also help you:

Lightbox also in the images, not only in the galleries • WordPress Help

As you already know if you use Divi among its possibilities it incorporates in a native way the effect lightbox , or table of light, in the galleries, to open the images in a pop-up window. The only downside is that this does not work on single images.

If you activate the Divi gallery option in the theme settings or the plugin when you insert a gallery in an entry or page, clicking on any image is will open in a pop-up window (modal) from which you can easily navigate between the other images in the gallery and, most importantly, without leaving the publication you are in.

 lightbox divi en images

But there are many users who also need or want that functionality when they link an image to the multimedia file, and there does not work by default lightbox by Divi with what would have to install a new plugin, with its own script that creates the pop-up window.

And the main problem is the overload, having use two scripts to get the same effect . A few scripts that will load in each URL of your site.

Another problem of having two scripts for the same thing is that the user experience will not be consistent since it will be difficult to find another plugin / script that has the same pop-up window design as the one used by Divi.

Fortunately there is a way to re-use the same Divi script also for the single images linked to the multimedia file .

Effect ] lightbox from Divi in ​​images with a bit of code

For to use the script lightbox from Divi, also in single images simply add this code to the file ] functions.php of Divi's son theme:

Effect lightbox of Divi in ​​images with a plugin

 divi lightbox for images

If you prefer to use a plugin Do the same, take advantage of the existing Divi script you can install Divi Lightbox for Images .

You do not have to configure anything, just install it and activate it . From that moment on, linking an image to your multimedia file will also use the Divi script for it, not only for the galleries.

In passing, the plugin loads the script at the bottom of the page, better for optimization ( WPO ) of your site .

Loading …

may also help you: