Enhancing Your WordPress Site with Simple Custom CSS and JS Plugin : Creating a Stardust Effect

By /

Adding custom styles and interactive elements to your WordPress site can be a great way to improve the user experience and make your content stand out. While WordPress offers a variety of customization options, there are times when you may need to add your own custom CSS or JavaScript to truly make your site unique. One of the easiest ways to do this is by using the Simple Custom CSS and JS plugin. In this post, we’ll walk through how easy it is to use this plugin to add custom CSS and JS to your WordPress site and even create a cool stardust effect using JavaScript!

Why Use Simple Custom CSS and JS?

The Simple Custom CSS and JS plugin is a powerful yet straightforward tool that allows you to add custom styles and scripts to your WordPress website without the need to modify theme files directly. Here’s why it’s so useful:

  1. No Need to Modify Theme Files: You don’t have to dive into theme files or risk losing your changes when you update your theme. The plugin lets you add custom code independently.
  2. Quick and Easy Implementation: It’s designed for both beginners and experienced developers, making it easy to inject custom styles and scripts with minimal effort.
  3. Non-Invasive: Since the code is added outside the theme files, it won’t interfere with your website’s core functionality, and you can easily disable or delete the code if needed.

Now that we know the benefits, let’s see how easy it is to add custom CSS and JS using this plugin.

Getting Started with the Simple Custom CSS and JS Plugin

Step 1: Install the Plugin

  1. From your WordPress dashboard, go to Plugins > Add New.
  2. Search for Simple Custom CSS and JS.
  3. Click Install Now, then activate the plugin once installed.

Step 2: Add Custom CSS

Once the plugin is activated, you’ll find a new menu under Appearance called Custom CSS & JS. Here, you can add your custom code.

  1. Go to Appearance > Custom CSS & JS.
  2. Click on Add Custom CSS.
  3. Enter your CSS code. For example, let’s add a simple stardust effect to a WordPress cover block:
cssCopyEdit/* Stardust Effect for Cover Block */
.stardust-effect {
  position: relative;
  overflow: hidden;
}

.stardust-effect .stardust {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background: transparent;
  animation: stardustAnimation 10s infinite linear;
}

/* Animation for the stars */
@keyframes stardustAnimation {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Particle animation (stars) */
.star {
  position: absolute;
  background: white; //black for white background
  border-radius: 50%;
  opacity: 0.7;
  animation: twinkleAnimation linear infinite;
}

@keyframes twinkleAnimation {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

Click Publish, and your custom styles will be applied to your site!

Step 3: Add Custom JavaScript

After adding the CSS, let’s create a stardust effect using JavaScript. The beauty of this plugin is that adding JS is just as easy as adding CSS!

  1. Go back to Appearance > Custom CSS & JS.
  2. Click Add Custom JS.
  3. Add the following JavaScript code:
javascriptCopyEditdocument.addEventListener('DOMContentLoaded', function() {
  const coverBlock = document.querySelector('.stardust-effect');

  if (coverBlock) {
    const stardustContainer = document.createElement('div');
    stardustContainer.classList.add('stardust');
    coverBlock.appendChild(stardustContainer);

    const createStars = () => {
      const numberOfStars = 100; // Adjust number of stars
      for (let i = 0; i < numberOfStars; i++) {
        const star = document.createElement('div');
        star.classList.add('star');
        
        // Randomize the size, position, and animation of each star
        const size = Math.random() * 3 + 1; // size between 1 and 4
        const positionX = Math.random() * 100; // Horizontal position
        const positionY = Math.random() * 100; // Vertical position
        const duration = Math.random() * 5 + 5; // Random animation duration between 5 and 10 seconds

        star.style.width = `${size}px`;
        star.style.height = `${size}px`;
        star.style.top = `${positionY}%`;
        star.style.left = `${positionX}%`;
        star.style.animation = `twinkleAnimation ${duration}s linear infinite`;

        stardustContainer.appendChild(star);
      }
    };

    createStars();
  }
});

Click Publish, and you’re all set. Now, when you visit your website, the stardust effect will appear as particles moving across the cover block.

How Easy Is It to Add Custom JS and CSS?

As you can see, using the Simple Custom CSS and JS plugin makes it incredibly simple to add custom code to your WordPress site. In just a few minutes, you’ve been able to create an interactive stardust effect using JavaScript and CSS. Here’s why this is so beneficial:

  • No Coding Experience Needed: You don’t need to be a developer to add custom effects or styles. The plugin’s interface is user-friendly and allows you to add CSS and JS in seconds.
  • Instant Preview: Once you add the custom code, you can instantly see the changes on your website, without needing to reload or refresh files manually.
  • Minimal Risk: Since the code is added separately, you don’t have to worry about breaking your theme or other parts of your site.

Conclusion: Customize Your WordPress Site Effortlessly

The Simple Custom CSS and JS plugin is an essential tool for anyone looking to add unique features to their WordPress site, whether it’s a simple design tweak or something as fun as a stardust effect. It allows you to add custom CSS and JavaScript to your site without the hassle of editing theme files or worrying about losing your changes when you update your theme.

By following the steps above, you’ve added a beautiful, interactive stardust animation to your cover block, making your WordPress site more engaging and visually appealing. With just a few lines of CSS and JS, you’ve transformed your site into something magical!

Scroll to Top