Creating the Star Wars opening crawl (text scrolling effect) in WordPress can be done using CSS and JavaScript. Below is a step-by-step guide on how to implement this effect using a custom WordPress page template, a plugin, or a shortcode.
Method 1: Using CSS & HTML (Best for Simplicity)
This method is straightforward and works without additional plugins.
Step 1: Add the HTML Structure
Create a new page or post in WordPress and add the following HTML to the Text/HTML editor:
Step 2: Add the CSS
Add this CSS to your WordPress Customizer > Additional CSS or inside your theme’s stylesheet (style.css
):
Step 3: Save and View
Save the page and preview it. You should see the classic Star Wars text scroll effect.
Method 2: Using a WordPress Plugin
If you prefer a plugin-based approach:
- Install a Custom CSS/JS Plugin
- Install and activate Simple Custom CSS and JS or WP Code Snippets.
- Add the CSS and JavaScript (see Method 3 below) inside the plugin.
- Insert the HTML in the Post/Page
- Use the Custom HTML Block in Gutenberg and paste the HTML.
- Save and View the effect.
Method 3: Using a WordPress Shortcode
If you want reusability, you can create a shortcode.
Step 1: Add This to Your theme’s functions.php
File
Step 2: Use the Shortcode
Now, you can insert the effect anywhere by adding:
Bonus: Enhancing with JavaScript (Adding Fading Stars)
If you want extra animation effects (such as fading stars in the background), add this JavaScript inside a custom script plugin or inside your theme’s JavaScript file:
Add this CSS animation inside your stylesheet:
Final Thoughts
- Best for Simplicity: Use HTML + CSS.
- Best for Customisation: Use the Shortcode Method.
- Best for Non-Coders: Use a WordPress Plugin.
- Extra Effects: Add JavaScript for a starry background.
Let me know if you need any modifications! 🚀