Author name: Shaighan Khalid

Ever you see some websites using beautiful icons in content that caught your attention. In this blog we will tell you how you can add beautiful and stunning icons in your wordpress website with 2 easy methods.

You can easily add font awesome icons in wordpress by using a simple plugin or manually by using code. 

What is font awesome?

Font awesome is a popular icon and toolkit that is used by millions of designers and developers. The icons in Font Awesome are vector-based, which means they can be resized without losing quality and can be styled using CSS properties such as color, size, shadow, and more.

Why should you use font awesome icons in your website?

Using font awesome icons in your website makes your user experience more attractive that provide following benefits:

Performance Advantage:

Font awesome has a performance advantage. We all love those websites that load fast. All the font awesome icons are included in a single file so it only takes a single request from the server to load all the icons in a single click.

Browser Compatibility:

We do not need to worry about browser compatibility for font awesome icons. It is well supported by all major and modern browsers with all file formats like ( ttf, eot, svg, woff ). It is considered the same as other web fonts.

How to manually add font awesome in wordpress without use of any plugin

Step1: Download font awesome kit

The first step is to download the font awesome kit from the official site of font awesome.

Step2: Create icons folder in WP-CONTENT

The second step is to open your cpanel and create an ICON named folder in the wp-content folder.

Step3: Upload font awesome to Cpanel

The third step is to upload font awesome kit to icon folder that you recently created in WP-CONTENT Folder.

Step4: Add this code to functions.php

The last and final step is to paste this code in your function.php file of your wordpress theme. For best practise we suggest you to create a child theme in your wordpress website & make sure your css is loading properly in your website

add_action( 'wp_enqueue_scripts', 'shaighan_enqueue_fontawesome' );
function shaighan_enqueue_fontawesome() {
        wp_enqueue_style('shaighan-font-awesome', 'https://shaighankhalid.com/wp-content/icon/font-awesome');
}

Note: Don’t forget to replace the url from wp_enqueue_style

If you are using any cache plugin in your wordpress website don’t forget to clear the cache.

How to add font awesome icons in wordpress website using a plugin. 

In this step we will tell you how you can add font awesome icons to a wordpress website without any code knowledge by using a simple plugin. Here are the steps:

Step1: Download the plugin:

In the first you need to login to your wordpress dashboard and click on plugins>AddNew and search for Font awesome plugin. After your download the font awesome plugins click on activate

Step1: Save the setting:

Once you download and activate the plugin in your wordpress website. You need to do some small setting.

If you are using free version click on free > web fonts & save the setting.

Disable right click in wordpress disallow users with various options, including the ability to save images, copy text, and inspect elements. By disabling this functionality, website owners aim to deter users from easily copying and downloading their content.

In this article, we’ll guide you through the process of disabling right-click in WordPress without the use of plugins.

Why we should disable right click in wordpress website

Content Protection:

Disable right-click in wordpress can deter casual users from easily copying and saving images or text from your website.

Preventing Image Theft:

Photographers, artists, or anyone with visual content may use this method to make it more difficult for users to save or download their images.

Please note the following considerations:

Backup:

Before making any changes to theme files, it’s advisable to create a backup of your website. This ensures you can revert to the previous state if anything goes wrong.

Child Theme:

If you’re working with a custom theme, it’s often recommended to use a child theme to make modifications. This prevents your changes from being overwritten during theme updates.

Syntax Check:

Ensure that the code you add is correct and follows PHP syntax. A small mistake in the functions.php file can break your entire site.

Remember that modifying theme files directly should be done carefully, and it’s always good practice to have a development or staging environment for testing before applying changes to a live site.

Step-by-Step Guide:

Accessing Theme Files:

In the Theme Editor, look for the functions.php file on the right-hand side. It’s usually found under the “Theme Files” section in your wordpress dashboard.

Update the following code in theme file:

if ( !is_user_logged_in() ) {
 function disable_right_click_idc() {
 ?>
<script>
document.addEventListener("contextmenu", function(e) {
 e.preventDefault();
}, false);
</script>
<?php
}
add_action('wp_footer', 'disable_right_click_idc');
}

After inserting the code, click the “Update File” button to save your changes.

In the fast-paced world of the internet, website loading speed is crucial for retaining visitors and improving user experience. One way to enhance this experience is by adding a preloader to your WordPress site. A preloader is a simple animation or graphic that displays while your site is loading, giving the user visual feedback that the site is working. In this tutorial, we’ll walk you through the process of adding a preloader to your WordPress website without the use of plugins.

Why Add a Preloader in wordpress?

Enhanced User Experience:

Preloaders provide visual feedback to users that the website is loading. This can help reduce bounce rates and keep visitors engaged.

Professional Appearance:

A well-designed preloader can enhance the overall aesthetics of your website, making it more visually appealing.

Loading Time Perception:

Preloaders can create the illusion that your site is loading faster, even if load times are not particularly speedy

Add a preloader in your wordpress website

Step 1. Find an animated loader icon

In the world of web design, animated loader icons play a vital role in enhancing user experience and making your website more visually appealing. These icons are not only functional but also a creative way to engage your site’s visitors while content loads.

Step 2. Upload your icon in media library

The next step is to upload your jpeg, png, SVG or GIF file to your wordpress media library and copy the url of your preloader file

Step 3: Copy the following snippet code for functions.php

The next and final step to add preloader in wordpress is to copy this code and paste this in function.php file of your theme.

Note: Dont forget to change your File URL from the code :

add_action( 'init', 'Redpishi_Preloader' );
function Redpishi_Preloader() { if(!is_admin() &&  $GLOBALS["pagenow"] !== "wp-login.php" ) { 
	
$delay = 1;	//seconds
$loader = 'https://www.example.com/wp-content/uploads/2023/07/preloader.gif';
$overlayColor = '#ffffff';	
	
echo '<div class="Preloader"><img src="'.$loader.'" alt="" style="height: 150px;"></div>
 <style>
.Preloader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: '.$overlayColor.';
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
<script>
document.body.style.overflow = "hidden";
document.addEventListener("DOMContentLoaded", () => setTimeout( function() { document.querySelector("div.Preloader").remove(); document.body.style.overflow = "visible"; } , '.$delay.' * 1000));
</script>
'; }}

Finally, thoroughly test your website to ensure that the preloader works as expected. You may need to make adjustments to the CSS and JavaScript to fit your specific needs. Test your site on different devices and browsers to ensure compatibility.

Adding a preloader to your WordPress site without a plugin is a straightforward process that can significantly improve user experience and make your site look more professional. By following these steps and customizing the preloader to match your site’s style, you can create a visually appealing loading experience for your visitors.