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 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:

Make all corners rounded • WordPress Help

/ * Rounded corners in Divi modules * /

@ media only screen and ( min width ]: 768px ) and ( max width : 980px ) {

. et_pb_featured_table : nth child ( 3 ) ] et_pb_featured_table : nth child ( 4 ) { margin top : 30px ; }

. et_pb_pricing_table : nth child ( odd ) {

webkit border top left [1 9659009] – radius : 6px ;

webkit border bottom left radius : 6px ;

moz border radius topleft : 6px ;

moz border radius ] – bottomleft : 6px ;

border top left radius [19659009]: 6px ;

border bottom left radius : 6px ;

}

. et_pb_pricing_table : nth child ( odd ) [19659007]. et_pb_pricing_heading {

webkit border top left radius : 4px ;

moz border radius topleft : 4px ;

border top left radius : ] 4px ;

}

. et_pb_pricing_table : nth child ( even ) {

webkit border top right radius : 6px ;

webkit border bottom right 09] – radius : 6px ;

moz border radius topright : 6px ;

moz border radius bottomright : 6px ;

border top right radius : ] 6px ;

border bottom right radius : 6px ; 19659002]}

. et_pb_pricing_table : nth child ( even ) . et_pb_pricing_heading {

webkit border top right – [19659010] radius : 4px ;

moz border radius topright : 4px ;

border top right radius : 4px ;

}

}

@ media only screen and ( max width [19659009]: 767px ) {

. et_pb_pricing_table {

webkit ] border radius : 6px ;

moz border radius [19659009]: 6px ;

border radius : 6px ;

}

. et_pb_pricing_heading . et_pb_tab_active : first child {

webkit border top left radius : 4px ;

] webkit border top right radius : 4px ;

] 19659009] – moz border radius topleft : 4px ;

moz border radius topright : 4px ;

border top left radius : 4px ;

] border top right radius : 4px ;

}

}

. et_pb_featured_table {

webkit border radius : 6px ;

moz border radius : 6px ;

border radius : 6px ;

}

. et_pb_featured _ table . et_pb_pricing_heading ] et_pb_tabs_controls . et_pb_column_1 _ 3 . et_pb_tab_active : first – [19659028] child . et_pb_column_1 _ 4 . et _pb_tab_active : first child . woocommerce tabs ul . tabs [19659007] {

webkit border top left radius : 4px ;

webkit border top right radius : 4px ;

moz border radius topleft ]: 4px ;

moz border radius topright : [19659012] 4px ;

border top left radius : 4px ;

border top right radius : 4px ;

]

. et_pb_pricing_table : first child {

webkit border [19659009] – top left radius : 6px ;

webkit border bottom left radius : 6px ;

moz border radius topleft : 6px ;

moz [19659009] – border radius bottomleft : 6px ;

border [1 9659009] – top left radius : 6px ;

border bottom left radius : 6px ;

}

. et_pb_pricing_table : first ] – child . et_pb_pricing_heading . et_pb_tab_active : first child {

] 19659009] – webkit border top left radius : 4px ;

moz border radius topleft : 4px ;

] border top left radius : 4px ;

}

. et_pb_pricing_table : last child {

webkit border top right radius : 6px ;

webkit ] – border bottom right radius : 6px ;

– [19659010] moz border radius topright : 6px ;

moz border radius bottomright : 6px ;

border top right radius : 6px ;

border – [1 9659010] bottom right radius : 6px ;

}

. et_pb_pricing_table : last child . et_pb_pricing_heading {

webkit border top ] – right radius : 4px ;

moz border – [19659010] radius topright : 4px ;

border top right radius : 4px ;

}

. et_pb_all_tabs . nav li ul ] . et search form {

webkit [196] 59009] – border bottom left radius : 6px ;

webkit border bottom right radius : 6px ;

] moz border radius bottomleft : 6px ;

[19659009] – moz border radius bottomright : 6px ;

border [19659009] – bottom left radius : 6px ;

border bottom right radius : 6px ;

}

. nav 03] li ul ul {

webkit border bottom right radius : 4px ;

moz border radius bottomright : 4px ;

border bottom ] right radius : 4px ;

}

. et_pb_main_blurb_image img . et [19659009] – animated . et_pb_counter_container . et_pb_slider . et_pb_testimonial et_pb_promo . et_pb_image . et_pb_portfolio_item [19659010] img . et_pb_post img . et_pb_blog _ grid . et_pb_post . et_pb_newsletter . et_pb_toggle . et_pb_tabs . et_pb ] contact p input . woocommerce ul . products li . [19659517] product to img . woocommerce page div . product [19659010] div . images img . woocommerce tabs . et_overlay {

webkit border radius : 6px ! important ;

moz border radius [19659009]: 6px ! important ;

border radius : 6px ! important ;

}

. et_pb_blog _ grid ] . et_pb_post img {

webkit border top ] left radius : 4px ;

webkit border top [19659009] – right radius : 4px ;

moz border radius topleft : 4px ;

moz ] border radius topright : 4px ;

border top – [19659010] left radius : 4px ;

border top right radius : 4px ;

webkit border bottom left radius : 0 ;

webkit border bottom ] – right radius : 0 ;

moz border [196] 59009] – radius bottomleft : 0 ;

moz border radius bottomright : 0 ;

border bottom left radius : 0 ;

border bottom right radius ]: 0 ;

}

How to hide prices, and almost anything else, in WooCommerce • WordPress Help

Yesterday talking to a friend who has an NGO raised the issue of how ugly it is sometimes to see the prices and ranges of prices in the pages of WooCommerce so I got down to work to see how to hide them and, of course, share it with you so that you also learn to do it.

And look where It is not difficult, and we have a few possibilities.

Ready to become a WooCommerce ninja?

Hide prices only in store

If you only want to remove prices on the store page, add this code to the functions.php file of the active theme (child):

Here you have the before and after …

Hide prices everywhere except in the cart, the final purchase page and product

] For obvious reasons it does not make sense that the prices do not appear in the cart and in the page where the purchase is finalized, where it is paid, but in the rest of the pages. Simply use this other code if you want to hide the prices in the store and in the category pages:

Hide prices on the product page

But there's more, because you may not want the price list, or variations, on the same page of the products, or anywhere a simple product appears, such as linked products for example.

If this is the case, the code to be used will be this one:

And this is the difference …

Hide prices on all parts

A mix of all the above would be this code, with which we hide the prices everywhere except the cart and the payment page:

Hide more things from WooCommerce

Ah buddy, you got the bug, huh? Well you should know that you can remove practically almost anything from WooCommerce, you just have to know which ones are available and remove the hook.

A visual guide of the actions of a WooCommerce product page would be this: [19659003]

Now with the previous reference, you only have to decide which actions you are going to remove. To do this, you just have to choose what you want to hide from the following list of actions and change add_action by remove_action and add the chosen line to the file functions.php of the subject ( son ​​please ) active.

The list is this:

So if, for example, you do not want to display the list of categories and labels on the product page etas, the elements meta you would add this to your functions or file plugin functions.php :

which is not difficult?

The limit is your imagination, and the clear WooCommerce API . Maybe you'll think about " and there is not a plugin that does these things? ", and yes, there is something out there, but are sooooo limited, that you will not have all the freedom that the code gives you, so you still have to install 4 or 5 plugins to achieve what you would achieve with only 3 lines of code.

And, besides, it never hurts to dare with a little bit of code and step learn, grow do not you think?

A jugarrr and customize!

Loading …

That may also help you:

Access statistics by WordPress user

Normally one does not need to control how many times their users access but in publishing environments, online stores and corporate blogs all tracking it's little, so let's see how to know the access statistics of the users of a WordPress site quite easy by the way.

 breaking clock of record

In fact, we only have to add a few lines of code to our utility plugin, or we can also create a plugin just for that.

The lines to include would be the following:

In case you want take a look at what each part does … let's go in parts:

1. We put the necessary filters and hooks

2. We create a table in the database, where we store user accesses

3. We add the column that will show the accesses of each user in the list of WordPress users

4 . We show in the column the accesses of each user

5. We close and make everything work

If you prefer, as I said before, you can create a plugin with all the code, it would be something like this:

You save it in a folder with the name you want (no spaces please), compress it in ZIP and install it from WordPress in the usual way: Plugins -> Add new -> Upload plugin .

 user access counter

What do you prefer to have done already?

You can download it from GitHub or from here …

[download id=”80995″]

Viewed at SitePoint [19660042] 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 we have not warned you.

Loading …

That may also help you: