Reports indicate that WP Engine’s attempts to disable core WordPress features to enhance profitability have backfired, causing widespread operational issues for users. The company is now facing legal challenges related to its recent conduct, resulting in the revocation of its free access to WordPress.org’s valuable resources.

The crux of the issue lies in WP Engine’s push for greater control over the WordPress experience. The company aims to establish its own user login system, update servers, and manage plugin and theme directories, among other services. However, critics argue that these efforts contradict the open-source principles that underpin the WordPress community.

As WP Engine is now effectively banned from utilizing the collaborative security measures that have helped protect WordPress sites from vulnerabilities, the company will need to develop its own security protocols. This change raises concerns about the overall safety and reliability of WP Engine-hosted sites moving forward.

The decision to ban WP Engine from WordPress.org resources has sparked considerable debate within the community. Many users and developers are questioning why WordPress.org should support a company that seems to prioritize profit over the collective interests of the open-source project.

For WP Engine customers, the recommendation is clear: consider alternative hosting providers to ensure you receive an authentic WordPress experience free from the restrictions imposed by WP Engine’s recent actions. In light of the current circumstances, WordPress.org has advised customers to migrate their websites to other hosting services to safeguard their sites and maintain a seamless WordPress experience.

As the situation evolves, it is evident that WP Engine’s ban from WordPress.org may have lasting implications for both the company and its users.

Stay tuned for further updates on this developing story as the WordPress community continues to respond to the ongoing challenges posed by WP Engine’s controversial strategies.

1. Registration with FinCEN

Payment processors that transmit, convert, or store money fall under the regulatory definition of Money Services Businesses (MSBs) and are required to register with FinCEN. The registration process includes:

• MSB Classification: Payment processors that provide services such as facilitating payments, transferring funds between parties, or converting digital assets (like cryptocurrencies) into fiat currency, fall into this category. Examples include PayPal, Stripe, and crypto-exchange platforms.
• Timely Registration: MSBs must register with FinCEN within 180 days of starting operations and renew their registration every two years.
• Exemptions: Some businesses may qualify for an exemption if they are strictly intermediaries for merchants and not directly involved in moving funds between customers.

2. Customer Due Diligence (CDD) and Know Your Customer (KYC)

Customer Due Diligence (CDD) is a critical component of the AML program. Payment processors must implement a Know Your Customer (KYC) process to:

• Collect Basic Information: This includes the customer’s full name, date of birth, address, and taxpayer identification number.
• Verification of Identity: Achieved through documentary verification (e.g., passports, driver’s licenses) or non-documentary means.
• Beneficial Ownership: For businesses, payment processors must identify and verify the beneficial owners who control a significant portion of the entity, per FinCEN’s CDD Rule (since 2018).
• Enhanced Due Diligence (EDD): For high-risk customers, such as politically exposed persons (PEPs) or those from high-risk jurisdictions, more stringent checks are required.

Example: A payment processor onboarding a corporate client from a high-risk jurisdiction will likely need to perform EDD.

3. Suspicious Activity Reporting (SAR)

Payment processors are obligated to file a Suspicious Activity Report (SAR) with FinCEN when they detect any unusual or potentially illicit activity.

• Threshold for Reporting: A SAR must be filed if a transaction involves at least $5,000 and appears suspicious.
• Examples of Suspicious Activity: Large, unexplained transactions, structured payments, or customers refusing to provide KYC documentation.
• Filing Timeline: SARs must be filed within 30 days of detecting suspicious activity.

4. Currency Transaction Reporting (CTR)

The Currency Transaction Report (CTR) must be filed for transactions over $10,000 in cash within 24 hours.

• Linked Transactions: Multiple smaller transactions to avoid the $10,000 threshold must also be reported via a CTR.
• Filing Deadline: CTRs must be filed with FinCEN within 15 days of the transaction date.

Example: A customer making multiple deposits just under $10,000 might be attempting to evade reporting.

5. AML Program Requirement

All payment processors must implement a robust AML program tailored to their specific risks, which includes:

• Written Policies and Procedures: To ensure compliance with AML laws.
• Internal Controls: Systems to monitor transactions and conduct regular risk assessments.
• Employee Training: Regular training on AML compliance and suspicious activity detection.
• Independent Audits: Periodic audits to test the effectiveness of the AML program.
• Designation of a Compliance Officer: A senior-level employee must oversee the program.

6. Recordkeeping Requirements

Payment processors must retain records of customer information, CTRs, SARs, and other relevant documentation for at least five years.

7. Monitoring and Auditing

Payment processors must continuously monitor customer activity for suspicious patterns and perform regular audits to ensure their AML procedures are effective.

• Transaction Monitoring: Automated systems to flag high-risk activities.
• Ongoing Auditing: Independent audits to identify gaps in the AML program.

8. Sanctions Compliance

Payment processors must comply with sanctions imposed by the Office of Foreign Assets Control (OFAC), checking their customers and transactions against the Specially Designated Nationals (SDN) list.

• Dynamic Screening: Regular screening processes to avoid potential violations.

Example: If a payment processor processes a transaction for an entity on the SDN list, they could face significant penalties.

9. Penalties for Non-Compliance

Non-compliance with AML regulations can result in severe penalties, including:

• Fines: Ranging from thousands to millions of dollars, depending on the severity of the violation.
• Criminal Liability: Company executives may face personal liability, including fines or imprisonment.
• Loss of Business License: Non-compliant processors may lose their licenses.

10. Emerging Trends: Virtual Currencies and New Payment Technologies

With the rise of digital currencies and blockchain-based systems, AML regulations now cover new types of payment processors.

• Cryptocurrency Compliance: Cryptocurrency payment processors must adhere to the same AML requirements as traditional MSBs.
• New Technology, New Risks: Payment processors using peer-to-peer apps, DeFi platforms, or digital wallets must adopt innovative monitoring tools.

Example: In 2021, the U.S. Treasury Department emphasized that virtual currency exchanges are considered MSBs and must register with FinCEN.

By adhering to these AML practices, payment processors play a vital role in preventing financial system misuse and maintaining the integrity of the broader financial network.

Creating a custom metadata field

The first thing we need to create is a custom metadata field to hold the price prefix and suffix so we can, later on, add them to the product.

Note that we need to create two fields. One to save the prefix and another one to save the suffix. Another important part is to run them through sanitization to ensure no malicious code or other than text can be inputted into the field.

Remember that all code goes to your themes functions.php file.

/**
 * Original code by https://bloginbox.com
 * Create and show prefix and suffix fields in product settings
 */

function wcps_create_custom_field() {
    $args = array(
    'id' => 'custom_prefix_for_price',
    'label' => __( 'Prefix for prices', 'wc-prefix-suffix' ),
    'class' => 'prefix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price prefix here', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
    
    $args = array(
    'id' => 'custom_suffix_for_price',
    'label' => __( 'Suffix for prices', 'wc-prefix-suffix' ),
    'class' => 'suffix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price suffix here.', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
}

add_action( 'woocommerce_product_options_general_product_data', 'wcps_create_custom_field' );

/**
 * Save custom fields to database.
 */

function wcps_save_custom_field( $post_id ) {
 $product = wc_get_product( $post_id );
 $prefix = isset( $_POST['custom_prefix_for_price'] ) ? $_POST['custom_prefix_for_price'] : '';
 $suffix = isset( $_POST['custom_suffix_for_price']) ? $_POST['custom_suffix_for_price'] : '';
 $product->update_meta_data( 'custom_prefix_for_price', sanitize_text_field( $prefix ) );
 $product->update_meta_data( 'custom_suffix_for_price', sanitize_text_field( $suffix ) ); 
 $product->save();
}
add_action( 'woocommerce_process_product_meta', 'wcps_save_custom_field' );

Adding the functionality

Now that we have the metadata fields to hold the prefix and suffix we need to add them before the price in WooCommerce when needed. To do this we will connect to the woocommerce_get_price_html filter and find the products that have prefix and suffix saved as metadata to them. After that, we simply return the prefix and suffix with the price if they can be found. Otherwise, we will only return the price.

/**
 * Connect to filter and add prefix and suffix to price
 */

add_filter( 'woocommerce_get_price_html', 'wcps_add_price_suffix', 99, 4 );
function wcps_add_price_suffix( $price, $product ){
    
    global $post;
     $product = wc_get_product( $post->ID );
     $prefix = $product->get_meta( 'custom_prefix_for_price' );
     $suffix = $product->get_meta( 'custom_suffix_for_price' );
 // Check if product has prefix or suffix before adding it to price
     if( $prefix || $suffix )  {
        $price = $prefix . ' ' . $price . ' ' . $suffix;
        return $price; // Return price with prefix and suffix
    }
    else {
        return $price; // If no prefix or suffix is found we will return just the price.
    }
}

Conclusion

In conclusion, adding a prefix and suffix to the price is not hard, but does take some extra coding. Something we do need to point out is that the prefix or the suffix will not show up in the cart, checkout, or on the order page.

Below you can find example images of the product prefix and suffix on a product archive page, single product page.

Feel free to copy the full code from below and add it to your themes functions.php file.

/**
  * Create and show prefix and suffix fields in product settings
 */

function wcps_create_custom_field() {
    $args = array(
    'id' => 'custom_prefix_for_price',
    'label' => __( 'Prefix for price', 'wc-prefix-suffix' ),
    'class' => 'prefix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price prefix here', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
    
    $args = array(
    'id' => 'custom_suffix_for_price',
    'label' => __( 'Suffix for price', 'wc-prefix-suffix' ),
    'class' => 'suffix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price suffix here.', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
}

add_action( 'woocommerce_product_options_general_product_data', 'wcps_create_custom_field' );

/**
 * Save custom fields to database.
 */

function wcps_save_custom_field( $post_id ) {
 $product = wc_get_product( $post_id );
 $prefix = isset( $_POST['custom_prefix_for_price'] ) ? $_POST['custom_prefix_for_price'] : '';
 $suffix = isset( $_POST['custom_suffix_for_price']) ? $_POST['custom_suffix_for_price'] : '';
 $product->update_meta_data( 'custom_prefix_for_price', sanitize_text_field( $prefix ) );
 $product->update_meta_data( 'custom_suffix_for_price', sanitize_text_field( $suffix ) ); 
 $product->save();
}
add_action( 'woocommerce_process_product_meta', 'wcps_save_custom_field' );

/**
 * Connect to filter and add prefix and suffix to price
 */

add_filter( 'woocommerce_get_price_html', 'wcps_add_price_suffix', 99, 4 );
function wcps_add_price_suffix( $price, $product ){
    
    global $post;
     $product = wc_get_product( $post->ID );
     $prefix = $product->get_meta( 'custom_prefix_for_price' );
     $suffix = $product->get_meta( 'custom_suffix_for_price' );
 // Check if product has prefix or suffix before adding it to price
     if( $prefix || $suffix )  {
        $price = $prefix . ' ' . $price . ' ' . $suffix;
        return $price; // Return price with prefix and suffix
    }
    else {
        return $price; // If no prefix or suffix is found we will return just the price.
    }
}

Steps to add a custom sidebar in WordPress without using a plugin

1. Navigate to Appearance -> Theme Editor from your admin dashboard.
2. Select the Theme Functions(functions.php) file under the Theme Files table.
3. Paste the below code in the functions.php file and click on the Update File button.

   if ( function_exists('register_sidebar') )
   
   register_sidebar( array(
   
   'name' => __( 'Custom Sidebar'),
   
   'id' =>; 'custom-sidebar',
   
   'description' => __( 'A custom sidebar'),
   
   'before_widget' => '',
   
   'after_widget' => "",
   
   'before_title' => '',
   
   'after_title' => '',
   
   ));
   

   
   4. Now to display the above registered sidebar, add the below code to the sidebar.php file of your theme and click on the Update File button.

   dynamic_sidebar( 'Custom Sidebar' );
   

   Note: If your theme doesn’t have a sidebar.php file then you can paste the above code in the Single Post(single.php) file or any part of the website where you want to display the sidebar in. You will have to make some CSS changes to align the sidebar according to your needs. You can change the name Custom Sidebar with your own.
   

   5. Visit Appearance -> Widgets from your admin dashboard. A new option of a Custom Sidebar will now be visible in your widgets section. You can add widgets to it and the changes will be now visible on your WordPress website.

   

   Conclusion

   A sidebar can play an important role in increasing the functionalities on your website or helping people navigate your website better. With the help of above code you can add a custom sidebar to your website without using any plugin.

Even though Gutenberg is pretty powerful, but still, some fundamental parts are missing from Gutenberg like the ability to add custom margin and padding for our block or if we wanna add some scroll animation to our block also the ability to hide or show the blocks based on device type is missing. If you have used page builders like Elementor you know they have these features and they are very common and you have used them quite often.

In this article, we are going to learn how we can get add the margin, padding, hide block based on screen type, animation, and custom CSS for any Block in Gutenberg Block Editor and use it more easily and design things in whatever way we want.

We will share not just one but two ways of how you can get this functionality, first the easy way using a plugin and second not so easy way or you can say kinda hack to achieve similar functionality without using any plugins so let’s begin.

How to Add Advance Controls to Any Block Using Plugin?

For achieving these functionalities for our block we will be using the GhostKit plugin. This plugin has three hundred thousand plus active installation and whopping 4.9 stars out of 5-star ratings on WordPress plugins repo.

Install the Plugin

Installation of plugins is fairly simple just head over to Plugins>Add New from your WordPress dashboard and search for the “GhostKit” plugin, just click on install and then activate the plugin. If you are facing any issue in plugin installation you can follow this guide.

After installation of the plugin, no extra steps are needed now all of your blocks have the option to set margin, padding, animation, and custom CSS. Now let’s see how exactly we can access and use these new options.

One thing I want to clear no matter what block you’ll use you’ll get the same block controls for every block, you can access these advanced controls from the right sidebar. So just add any block and you in the editor and you can access these controls.

How to Add Custom Margin & Padding in a Block

First, let’s see the margin and padding option we get for our block, as you can see in the image above for our block we get an option to set margin and padding for each individual size for our block.

1. Screen Size: A great thing about this plugin is you can set different margins and padding for different device sizes. You can choose your desired device type like PC, Laptop, Tablet, and smartphone to set specific margin and padding for them.
2. Margin Box: In the margin box you can add a margin for every side of your block.
3. Padding Box: Just like the margin box you can use this box to add the padding for your block.
4. Important Checkbox: We can also use the check-box highlighted with number four to mark these changes important so if any block has some CSS that might conflict with this external margin and padding important will override that and we will be set for sure.

How to Hide or Show a Block, Based on Device

Now let’s see how we can hide any block on certain device types, this will be helpful if you want to hide certain sections of your page on mobile devices and show a different version of that section. With this plugin, you get an option to choose a display option for your block.

By default, it will set to inherit(value similar to parent) for all devices but you can choose to inherit, hide, or show the block in the given screen sizes:

1. Desktops: Devices with screen width <=(greater than or equal to) 1200px,
2. Laptops: Devices with screen width <= 992px,
3. Tablets: Devices with screen width <= 768px,
4. Smartphones: Devices with screen width <= 576px.

How to Add Scroll Animation in a Block

Now let’s see how we can add a scrolling animation to our block when we scroll the page. With this plugin, we get the scrolling animation option as shown in the image above. By default, the animation will be none and we can choose between two types of animation fade and Zoom. Both of these animations have some control options so let’s look at them as well.

Fade Animation

When we choose the Fade option as scroll animation we will get the following option as shown in the image below.

1. Animation Entry Point: We can choose the animation entry point for our fade animation, by default it is set to center and we can choose between center, left, right, up, or down by clicking on the arrow.
2. Duration: We can set the duration in milliseconds, how long we want our animation to animate in.
3. Delay: We can also set the delay for animation starting time in milliseconds.

Zoom Animation

If you choose to have a zoom animation as scrolling animation for your block you’ll get the animation control options as shown in the image below.

1. Animation Entry Point: Similar to fade animation you can also choose an entry point for your animation, you can choose between the center(default option), left, right, top, bottom.
2. Scale: For the zoom animation you can choose how much you want to scale your block.
3. Duration: To set the time, how long you want your animation to last.
4. Delay: How much delay do you want before your animation starts appearing.

How to Add Custom CSS in Any Block

Adding a custom CSS to our block is also super easy, currently, Gutenberg only offers us to add names and classes for our block but with a plugin, we can directly add CSS from the block control sidebar very easily. As you can see in the image we can type whatever CSS you like. You can also click on “Open in Modal” to open a big dialog box to easily write your CSS in a bigger space.

How to Add Margin and Padding to a Block Without a Plugin

This method is a bit tricky and not very efficient and requires a bit more extra steps, you can say it’s not a method but a hack to achieve similar functionality. The idea is to use multiple blocks to get whatever margin we want between our blocks.

There’s a two-step process to achieve this functionality first to get the spacing on the top and bottom of a block simply use a spacer block at the top and bottom and adjust the size to get desired spacing.

However to add spacing to the left and right spacers don’t work instead you’ll need to use a columns block with three columns, then in the center column add the element you want and adjust the size of the other two columns based on your need.

And with that, you can set desired spacing on all four sides of any block. Yes we know it’s not a very efficient method but if you want to do this for just one or two blocks then this hack is better than installing a plugin. We do hope WordPress will add this feature in Gutenberg Block Editor till then you can use the methods we have shared.

How to Add Other Advance Controls Without Plugin

After learning the margin and the spacing method you are probably wondering what is the hack to do other advanced stuff with the block. Unfortunately, the answer is none, there is no easy way to achieve other block controls to the block unless you wanna write CSS in your Theme Editor.

Just to calm your curiosity technically you can add the classes and ids to your blocks when you add them in your post and then add CSS targeting those ids and classes in your theme editor but that is not very efficient, you need to add code in your theme files and if you don’t know how they work you can mess things up. Also seeing the changes will take a lot of time since you constantly need to switch tabs and check if the style you are adding does not conflict with the theme CSS.

One use case of this can be when you use a reusable block, you can add the custom CSS for that once, and then whenever you use it again it will work smoothly and can save your time.

Conclusion

Having some advanced controls for your block can really increase your overall design and usability of Block Editor and also make it feel closer to the site builder and capable of replacing the site builders completely. In this article, we have shared how you can achieve these advanced controls.

We have learned how we can use the GhostKit plugin to achieve these advanced controls also a kind of hack and a nonlogical way. And I believe you know when to use when.

If you are facing any issues while following this article or have any suggestions, questions or ideas do share them in the comments below we will respond to them as soon as possible.

Gutenberg has completely changed the way how we use to use WordPress, we can control every part of our website and every content can be styled individually and that is great but a page title is still tied up to the theme design and there is no easy way to hide or unhide it in Gutenberg.

In this article, we will learn how exactly we can hide our post or page titles that are running our web designs.

Why Hide the Page Titles?

So let’s first start with the most basic question: Why do you want to hide your post or page title in the first place? The answer is simply not every page needs a title. While a title is kinda required on your blog posts, it doesn’t really expected on every page of the website because you don’t want your pages to look like boring blogs.

For example how often do you see a title on any website’s “Home” page? Almost never because that is unnecessary and in some cases even consider unprofessional. You can say the same thing for other pages like “About” and “Services”, these pages need to speak for themselves and if they don’t you might need to take a second look at your design.

But having a title isn’t always bad and you don’t even wanna delete it entirely just wanna hide it and use h1 with a better design or maybe want to hide it and use a different placement or design for your title. But hiding a title from your post or page is not as easy as removing a block from your website and WordPress didn’t provide any easy option for that either.

Another thing you may need to consider before removing the title is the SEO of your site because Google’s algorithm or crawler bots don’t like pages that don’t have a proper title for the page. There are a few things you must consider before taking any action.

SEO Impact

Search engines like Google or Bing use automated bots known as crawlers that scan your webpages and store them in Google servers o better index them in the search result. Since they are bots and don’t know how good-looking your page and how amazing your page looks to the human eye they only know your code and the structure of your page. They read your page elements like its title, headings, and page hierarchy to determine what this page is all about.

When you search for something on any search engine it pulls up the content based on the title and most likely when you click on any search result and go to the page you’ll see the title of that page. When your page has a title element it considers it a title and when it doesn’t have any title it considers h1 tag your page title and when either of them doesn’t exist then the crawler can consider any piece of text or smaller heading as your title and that is bad for your SEO.

How to Hide Titles in Gutenberg

Now let’s look at how we can hide the title of our pages or post, there are a couple of ways of doing that, some method requires editing some codes some requires having a plugin so let’s take a look at them one by one.

A friendly reminder is that we are going to make some changes to the theme files or install some third-party plugin, so it is always a good idea to take a backup if anything gets wrong. Don’t worry we are not going to make any drastic changes in its basic and beginner level stuff.

Hide Titles from all the pages

To hide the title from all the pages we need to use custom CSS to hide it across the pages, there are multiple ways of adding custom CSS to the website from the site editor, from the Theme editor, or via using any third-party plugin such as Custom CSS Plugin.
To add custom CSS go to your WordPress dashboard, go to Appearance > Customize and find the Additional CSS menu. In the CSS code box, paste in the following CSS code:

.entry-title {
display: none;
}

Make sure to save the changes and now go back to your site now you won’t see any title on your website.

Hide title from selected posts or pages

Hiding the title from all pages is fine but you may don’t want that for every page and only want to hide it from a selected page or post. For that, you can use a plugin called Title Remover just install and activate this plugin. After that in your page or post editor, you’ll see a new checkbox called Hide title from this item just checkmark it as shown in the image below:
After that save changes and update or publish your page and now when you visit your page your title will be gone from the page.

Conclusion

Now you know why you need to hide your post title and how it impacts the SEO of your website and how you can actually hide it from all the pages or selected pages. However, one thing I recommend is to try keeping the title or at least use the plugin to hide it from selected pages only because default titles are very useful and good for SEO.

When you go to scroll a page and there’s a touch event listener (wheel, mousewheel, touchstart, touchmove, etc.), the browser will not scroll immediately until it knows that the listener isn’t going to prevent the default scroll behavior. It doesn’t want to start scrolling prematurely, only to find out the listener eventually calls preventDefault()) because it wants to do something different.

Example: Cancelling the scroll altogether when interacting with an embedded Google Map

So this is where passive event listeners come in.

By adding a {passive: true} flag to the event listener, we can now tell the browser the listener will NOT cancel the default scroll behavior, and it’s safe to scroll immediately.

If you check your website on google page speed insights you may see this.

The problem is with the core WordPress comment system. WordPress (js/comment-reply.min.js) generating “non-passive” listeners. The script is responsible for comments UI features, in specific enabling users to comment in reply to another comment (i.e. nested commenting).

The problem with “non-passive” listeners is that they can slow down simple user interactions such as scrolling.

If you don’t allow nested comments anyway, you could simply remove this script from loading.

So How to fix this ?

Here is how you can remove the script from loading. But one thing to remember if you unload this, the nested comment will not work.

function wp_dereg_script_comment_reply(){wp_deregister_script( 'comment-reply' );}
add_action('init','wp_dereg_script_comment_reply');

You can add this code in your function.php and it will be done.

How to Add a Passive Listeners for this?

The following code should be added in your .js file, or inside a <script> tag in every page (.e.g in header.php) or even as a tag in TagManager if you use that.

//Function checks if a given script is already loaded
function isScriptLoaded(src){
    return document.querySelector('script[src="' + src + '"]') ? true : false;
}

//When a reply link is clicked, check if reply-script is loaded. If not, load it and emulate the click
$('.comment-reply-link').click(function(){ 
    if(!(isScriptLoaded("/wp-includes/js/comment-reply.min.js"))){
        var script = document.createElement('script');
        script.src = "/wp-includes/js/comment-reply.min.js"; 
    script.onload = emRepClick($(this).attr('data-commentid'));        
        document.head.appendChild(script);
    } 
});
//Function waits 50 ms before it emulates a click on the relevant reply link now that the reply script is loaded
function emRepClick(comId) {
sleep(50).then(() => {
document.querySelectorAll('[data-commentid="'+comId+'"]')[0].dispatchEvent(new Event('click'));
});
}
//Function does nothing, for a given amount of time
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

Conclusion

Hopefully, WordPress.org core contributors can come up with something official but till then we need to do this manually to make our site more google friendly and improve scroll performance using these code snippets to add Passive Event Listeners

Adding JavaScript code with the help of a plugin

If you are new to WordPress then using a plugin is the best way to add JavaScript code to your website. Header Footer Code Manager by 99 Robots is a great plugin for the task. It has over 200,000 active installations on the WordPress plugin store and provides an easy dashboard to add JavaScript code to specific pages and posts. Follow the below steps to add JavaScript code to specific pages using this plugin:

1. Install and activate the plugin.
2. Once the plugin is activated a menu item by the name of HFCM will be added to your admin navigation sidebar.
3. Navigate to HFCM -> Add New.
4. In Snippet Name enter a name for the snippet,
   In Snippet Type select Javascript,
   In Site Display dropdown select Specific Pages option,
   In Page List dropdown select the page you want to add the JS code on,
   You can leave the rest options to default.
   
5. Now scroll down to the Snippet/Code box and add your JavaScript code in that box.
6. Once done, click on the Save button at the bottom. Your JS code will now work on that specific page.

Adding JavaScript code without a plugin using code

Using a plugin for everything is not the recommended way. They often slow down your website and add unnecessary code to the web pages. Follow the below steps to add JavaScript code to specific pages without the help of a plugin.

1. Navigate to Appearance -> Theme Editor from your admin dashboard.
2. Select the functions.php file from Theme Files list.
3. Add the below code in the edit box of functions.php file to add Javascript code to specific pages.

   function js_code_page() {
   if (is_page ('3')) {
   ?>
   <script type="text/javascript">
   // Add your JavaScript code here
   </script>
   <!--?php } } add_action('wp_head', 'js_code_page'); &#91;/php&#93; In the above code replace 3 with Page ID for the specific page you want the JS code to run on. You can also add JS code to specific posts using the below code. &#91;php&#93; function js_code_post() { if (is_single ('5')) { ?-->
   <script type="text/javascript">
   // Add your JavaScript code here
   </script>
   <!--?php &lt;br ?--> }
   }
   add_action('wp_head', 'js_code_post');
   

   Here replace 5 with your Post ID.
   
   5. Once done, click on the Update File button at the bottom.

   Conclusion

   You may often require to add JavaScript code to your pages. With the help of the above tutorial you will be able to add the code easily in your WordPress website using a plugin or without one.

NGINX is open-source software for web serving, Nginx is one of the most popular web servers in the world. It’s a lightweight and robust web server that is mostly used in hosting high-traffic websites.
In this guide, I will explain the step-by-step process to install the Nginx web server and are going to configure the Nginx server block. We will install the Nginx server on ubuntu, it’s super easy to do so let’s just get into it.

Prerequisites

A system running Ubuntu 20.04 Linux
A user account with sudo or root privileges
A stable internet connection is recommended to install Nginx packages.

Step 1 – Update The Packages

Before installing anything it is always recommended to update the packages. And this command will update all your packages.
$ sudo apt update

Step 2 – Install Nginx

Install Nginx with the following command.
$ sudo apt install nginx
Then you will get the prompt to continue, press ‘Y’ on the keyboard, and hit ENTER. After that Nginx will get installed on your system.

Step 3 – Verify Installation

After the installation, Nginx automatically starts on your system. To check if Nginx is successfully installed on the system use the following command.
$ sudo systemctl status nginx
After running this command you should see the active (running) status which means you are good to go.

Step 4 – Setup Firewall

Now we are going to change our firewall setting to allow traffic to our NGINX server from various HTTP and non-HTTP web servers on port 443, 80, or both of these ports. For now, we will only need to allow traffic on port 80. To grant Nginx access through the default Ubuntu firewall, enter the following command.
$ sudo ufw allow ‘nginx http’

Also, use this command to refresh the new firewall settings.
$ sudo ufw reload

Step 5 – Test The Server

Now make sure Nginx is running as shown in step 3 and then open any of your browsers and navigate to the following URL
http://your_system_ip
You should see “Welcome to Nginx!” on your browser as shown in the image below. This means Nginx is running successfully on your system.

Step 6 – Basic Commands

Now that you have successfully installed and run an Nginx server on your system you should know some basic management commands to properly run the system in the future.

To stop your web server, use the following command:

$ sudo systemctl stop nginx

To start the web server when it is stopped, use the following command:

$ sudo systemctl start nginx

To restart the service again, use the following command:

$ sudo systemctl restart nginx

To reload the Nginx use the following command:

$ sudo systemctl reload nginx

When you first install the Nginx by default, Nginx is set to start automatically when the server boots. If you want to disable this behavior by using the following command:

$ sudo systemctl disable nginx

To re-enable start up at boot, you can use the following command:

$ sudo systemctl enable nginx

These are some basic sets of commands which will help you manage your Nginx server after installing this on your system.

Uninstall Nginx server

Now you have learned to install the Nginx let’s know how you can uninstall this from your system. Use the following command to uninstall Nginx from ubuntu

$ sudo apt purge nginx

After that to remove other Nginx related unnecessary packages use the following command.
$ sudo apt autoremove

Reinstall Nginx

To reinstall Nginx, you need to first uninstall the current Nginx like we have shown you above and Install it again as we have mentioned in this article above.

Common Questions

Now let’s look at some common questions you have for installing, uninstalling Nginx in ubuntu or say Linux machine.

Can you install Nginx in ubuntu without sudo?

No sudo permission is required for installing Nginx Linux because it requires performing certain actions that can only be used with root privileges.

Is Nginx is paid?

If you are thinking that Nginx is paid or has some high-tier paid application then let me be clear there is nothing like that, Nginx is completely free and open source.

Does this tutorial work on other versions of ubuntu?

Most probably, you can use the same commands in other versions as well but if something isn’t working drop a comment we will let you know.

There are various benefits of being able to add custom CSS such as making almost any kind of changes to your pages, using lightweight code instead of the heavy Elementor code and having full control over the design.

In this article, we are going to show how you can add custom CSS in Elementor.

Steps to add custom CSS in Elementor if you have the PRO version

1. Select the element you want to add custom CSS to. On selecting you will see an Advanced tab in the panel on the left hand side, click it.
   
2. Scroll down to the Custom CSS option and expand it.
3. You can add all your custom CSS code in this box.
4. That’s it. You can now easily add your custom CSS codes in Elementor.

If you are not subscribed to the PRO version of the Elementor plugin then you can still add custom CSS to your elements. Follow the below steps for it.

1. From your admin dashboard navigate to Appearance -> Customize.
2. Scroll down to the Additional CSS option on the left panel and click it.
   
3. Add your custom CSS code in the box and Publish the changes.
   

Conclusion

Being able to add custom CSS gives you complete control over the design of your pages. With the help of the above tutorial you can easily add custom CSS in Elementor. If you do not have the PRO version of Elementor then you can use the built-in WordPress Theme customizer to add custom CSS.