sell website making service

Tag: customization

How WP-Sweep Saved My Client’s Website by Clearing and Cleaning Out Database Clutter and saved from wp-admin Error

Keeping a WordPress site running smoothly is essential, especially for clients relying on it for business. Recently, I had a client whose site was struggling with slow load times and frequent errors on the wp-admin side. After some troubleshooting, I found that a cluttered database was the main culprit. This was when I turned to the WP-Sweep plugin, and it proved to be an invaluable tool. Here’s a breakdown of how WP-Sweep helped me rescue the site and get it back on track.

Note: I wrote this review after using the plugin, this is not a paid review.

The Problem: Database Clutter Slowing Down the Site

With WordPress, it’s easy for the database to accumulate unnecessary data over time. Old revisions, unapproved comments, spam, transient options, and orphaned data can add up, creating a lot of “junk” that the site has to sift through every time it loads or runs a query. For my client’s site, this clutter had become a significant issue. Not only was the wp-admin area sluggish, but it was also throwing server errors that made the site almost unusable.

Discovering WP-Sweep

After some research and weighing options, I came across the WP-Sweep plugin, known for its effective cleanup abilities. This free plugin, developed by Lester ‘GaMerZ’ Chan, offers a user-friendly way to clear out various types of unwanted data that can slow down WordPress sites. Its simplicity and reliability immediately caught my attention, and I decided to give it a try.

The Solution: How WP-Sweep Optimized the Database

Once I installed and activated WP-Sweep, I was able to quickly access its dashboard. The plugin provided a comprehensive breakdown of all unnecessary items in the database, including:

  • Post Revisions – Older versions of posts that no longer served any purpose.
  • Deleted Comments and Spam – Comments that had been trashed but were still taking up space.
  • Transient Options – Temporary data stored by plugins and themes that weren’t relevant anymore.
  • Orphaned Post Meta and User Meta Data – Data that had become detached from posts or users due to past changes.

Each item could be swept away with a single click, which allowed me to clear out thousands of entries in just a few minutes. WP-Sweep doesn’t rely on direct database queries, so it’s also safe to use—an important factor when working on a client’s live site.

Results: Faster Load Times and No More Errors

After the WP-Sweep cleanup, the results were immediate and impressive. The database was streamlined, and wp-admin responsiveness improved dramatically. My client’s site, which was once plagued by errors and lag, was now running smoothly. WP-Sweep had not only saved me hours of manual database maintenance but also delivered a major performance boost for my client’s site.

Why WP-Sweep is a Must-Have for WordPress Optimization

From my experience, WP-Sweep is an excellent addition to any WordPress toolkit. Here are a few reasons why I recommend it:

  1. Simple to Use – No coding required, just a straightforward interface that anyone can use.
  2. Thorough Cleanup Options – Removes everything from revisions to orphaned data, making it a comprehensive solution.
  3. Safe and Reliable – Uses WordPress’s built-in functions, minimizing the risk of database errors.
  4. Improves Site Performance – By reducing database bloat, it enhances both front-end and back-end speed.

Conclusion: Give WP-Sweep a Try

If you’re experiencing similar issues or just want to keep your site in top shape, WP-Sweep is a powerful, user-friendly option for cleaning up your WordPress database. For me, it was the solution that saved my client’s website from frustrating performance issues. It’s a fantastic tool to help you keep your site running smoothly with minimal effort.

Try WP-Sweep today, and see how a clean database can transform your WordPress experience and save you from unwanted WordPress admin crash!

How WP-Sweep Saved My Client's Website by Clearing and Cleaning Out Database Clutter and saved from wp-admin Error
How WP-Sweep Saved My Client's Website by Clearing and Cleaning Out Database Clutter and saved from wp-admin Error

How to Create a Image Slider in WordPress with Elementor Plugin and CSS

Creating an engaging website requires more than just placing static elements on a page. One effective way to enhance the user experience is by using interactive elements, like sliders. In this tutorial, I’ll show you how to transform static columns into an animated slider using Elementor and CSS. This step-by-step guide will demonstrate how to convert a static section with columns in the Elementor WordPress plugin into a sliding column slider using only CSS and Elementor settings. A tutorial video is included at the end for visual learners. Read to the end to see the video tutorial.

How to Create a Image Slider in WordPress with Elementor Plugin and CSS

What You’ll Need To Know

  • Basic knowledge of CSS, HTML, and Elementor
  • Access to the Elementor plugin on your WordPress website

Step-by-Step Guide to Create the Image Slider

Step 1: Understanding the Concept

We are going to convert static column images into sliding images. When you hover over a column, it expands to show some text, while the other columns become slightly darker with an overlay. This creates a dynamic, interactive effect that enhances user engagement.

Step 2: Setting Up the Static Columns

  1. Add a Section in Elementor and divide it into four columns.
  2. Insert Images into each column. These will serve as the content that will slide.
  3. Ensure Each Column Has a Fixed Height – This is essential for smooth transitions and to avoid jumping effects.

Step 3: Adding the Required CSS

  1. Go to WordPress Dashboard > Appearance > Customize > Additional CSS.
  2. Add the following CSS code:
  3. Adjust CSS Values as per your design requirements, like transition duration and width percentages.

.fcc { display:none; }

@media (min-width: 479px) {



.elementor-element-0549d70 .elementor-column{
      transition: all 0.6s cubic-bezier(.42,.41,.5,.49);
	height: 779.5px;
	    font-size: 26px;
    text-align: center;
}



section.elementor-element-0549d70:hover {
   /* width: 132vw !important; */ 
}


.elementor-element-0549d70 .elementor-column:nth-child(1):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(2):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(3):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(4):hover {
    width: 40% !important; 
}




 
.elementor-element-0549d70 .elementor-column:nth-child(1):hover p {display:none; }

.fwt{ color: white;}
.fgt { color: white;}

.elementor-element-0549d70 .elementor-column:nth-child(1):hover .fcc, 
.elementor-element-0549d70 .elementor-column:nth-child(2):hover .fcc,
.elementor-element-0549d70 .elementor-column:nth-child(3):hover .fcc,
.elementor-element-0549d70 .elementor-column:nth-child(4):hover .fcc {
    display: block;
    margin: auto;
     
}

.elementor-element-0549d70 .elementor-column:nth-child(1):hover p, 
.elementor-element-0549d70 .elementor-column:nth-child(2):hover p,
.elementor-element-0549d70 .elementor-column:nth-child(3):hover p,
.elementor-element-0549d70 .elementor-column:nth-child(4):hover p{
    display: none;
}
	
section.elementor-element-0549d70 .elementor-background-overlay
{background-color: #ff000000; 
opacity: 1;}


section.elementor-element-0549d70:hover .elementor-background-overlay
{background-color: #000000; 
opacity: 0.5;}
	
	
}

Step 4: Configuring Elementor Columns

  1. Edit Each Column using Elementor.
  2. Go to Style > Background Overlay.
  3. Choose a color overlay (e.g., black) and set its Opacity to create a subtle darkening effect.
  4. Set the Hover State: On hover, set the overlay to be transparent. This will give the active column a clearer, brighter look.

Step 5: Adding Text to Columns

  1. Inside each column, Add a Text Widget.
  2. Type your desired text (e.g., “Learn More”, “Explore”, etc.).
  3. Hide the Text Initially by setting it to display: none using CSS.
  4. Configure the CSS Hover Effect to reveal the text only when the column is hovered over.

Step 6: Replicate for All Columns

Repeat the above steps for all the columns. Make sure to tweak the CSS and adjust the text position if necessary to maintain a consistent look across the slider.

How to Create a Image Slider in WordPress with Elementor Plugin and CSS

Step 7: Fine-Tuning the CSS and Making It Responsive

  1. Adjust the Height and Width settings for different screen sizes using CSS Media Queries.
  2. Ensure the slider works seamlessly across all devices. Consider creating a different version for mobile where the hover effect might be challenging to implement. @media (max-width: 768px) { .elementor-column { width: 100%; height: auto; transition: none; /* Disable the hover effect for mobile */ } }

Watch the Tutorial Video

For those who prefer a more visual approach, check out the tutorial video at the end of this article. It will walk you through each step of the process.

Conclusion

By following the steps above, you should now have a beautiful, interactive image slider on your Elementor website. This simple CSS trick can help make your website more engaging, giving your content a sleek, modern feel. Feel free to customize the CSS code to match your site’s branding and design.

If you encounter any issues or have suggestions for improvements, please leave a comment below. Don’t forget to like, share, and subscribe for more tutorials!

See you in the next video!

How to Dynamically Display Different Languages in Visual Composer with Polylang WordPress Plugin

In today’s tutorial, I’ll walk you through the process of dynamically showing different languages on a WordPress website using the Visual Composer plugin, alongside the Polylang translation plugin. This setup will allow your website to display content in various languages based on user selection. Let’s dive into the details.

Introduction to Visual Composer and Polylang

Visual Composer is a drag-and-drop page builder plugin for WordPress, similar to Elementor, that allows you to create visually appealing pages without writing code. However, if you are using Polylang, a plugin designed to translate your website into multiple languages, it might not directly support dynamic text changes inside Visual Composer. But don’t worry; by using some custom code and shortcodes, you can integrate Polylang to work seamlessly with Visual Composer.

The Problem and the Solution

When I was searching for a solution to dynamically change text inside Visual Composer based on the user’s language preference, I realized there wasn’t a direct method available from the Polylang plugin. To overcome this limitation, I created a shortcode that responds when a user switches between languages. This shortcode dynamically displays the appropriate text in the selected language on the page. Below is a screenshot from my website, where we have different languages to select from in the header menu.

How to Dynamically Display Different Languages in Visual Composer with Polylang WordPress Plugin

Step-by-Step Guide

Here’s how you can achieve this functionality:

1. Create a Custom Function

Start by creating a custom function in your functions.php file, which is part of your WordPress theme. This function will allow us to generate dynamic content in multiple languages.

For example, let’s say we want to dynamically display the “About Us” section in different languages. Here’s a sample PHP code that you can copy-paste in your functions.php file:

<?php 

function footer_about_us() {
   
        if(pll_current_language() == 'en') {
                    echo '<div class="footer-footeraboutus">		
		
This is an english line.	jaksd ashdajs dha jshdajs hd 		 		
						</div>';
					
                } else if(pll_current_language() == 'fr') {
                    echo '<div class="footer-footeraboutus">		
		
This is   fr line. sadasdasdajksdh asjdh ajs hdjashd					
							
						</div>'; 
	
                } else if(pll_current_language() == 'de') {
                    echo '<div class="footer-footeraboutus">		
		
This is   de line.		jhsda jashdjahsd jashdaj kshd			
						
						</div>'; 			
			
	
                } 
   
}
add_shortcode('footeraboutus', 'footer_about_us');
// [footeraboutus]
?>

In this code:

  • pll_current_language() is a Polylang function that detects the current language.
  • Based on the current language, it returns the appropriate text (in this case, either English or French).

2. Add a Shortcode

Once you have your custom function, the next step is to register it as a shortcode in WordPress. Shortcodes allow you to insert dynamic content into posts and pages easily.

Now, you can use the shortcode [footeraboutus] anywhere on your website, including Visual Composer elements, and it will display the correct content based on the selected language.

3. Insert Shortcode in Visual Composer

After creating the shortcode, you need to insert it into your Visual Composer page. To do this:

How to Dynamically Display Different Languages in Visual Composer with Polylang WordPress Plugin
  • Go to the page you want to edit using Visual Composer.
  • Click on the element where you want to display the dynamic text.
  • Paste the shortcode [footeraboutus] inside the element.

Once the page is updated, the content in this section will dynamically change based on the language selected by the user.

Final Steps

After setting up the shortcode and inserting it into the page, all that’s left is to test it. When a user selects a different language (for example, English or French) from the Polylang language switcher, the corresponding content will be displayed automatically.

This method allows you to:

  • Dynamically display different languages on your website pages.
  • Easily manage multilingual content using Polylang and shortcodes.

Conclusion

With this approach, you can integrate the Polylang translation plugin with Visual Composer to create a seamless, multilingual WordPress website. The key lies in creating custom functions and shortcodes that respond to language changes dynamically. Whether you’re building an “About Us” section or any other content block, this method will ensure your users get the right content in their preferred language.

If you have any questions, feel free to leave them in the comments below. Don’t forget to like and share this article if you found it helpful!

Check Most Recent Posts