A modern WordPress plugin for creating stunning animated slogans with typewriter effects, handwritten styles, and dynamic text display. Perfect for hero sections, quotes, and call-to-action messages.
- 🎬 Multiple Animation Styles: Typewriter, handwritten, neon, gradient, rainbow, and more
- ⚡ Performance Optimized: Intersection Observer, lazy loading, memory management
- ♿ Accessibility First: Respects reduced motion preferences, screen reader friendly
- 📱 Responsive Design: Works perfectly on all devices
- 🎨 Customizable: Speed, cursors, colors, fonts, and timing
- 🔧 WordPress Native: Shortcodes, REST API, admin interface
- 🌍 Internationalization Ready: Translation-ready code
- Download the plugin files
- Upload to your WordPress
/wp-content/plugins/directory - Activate the plugin through the WordPress admin
- Start using shortcodes in your posts and pages!
<!-- Simple typewriter effect -->
[typewriter_text text="Hello World!" speed="100" cursor="|"]
<!-- Advanced slogan with styling -->
[shogun_slogan text="Your Amazing Slogan" style="gradient" animation="fade"]
<!-- Animated text effects -->
[animated_text text="Fade in smoothly" animation="fade" speed="1000"]Creates a typewriter animation effect.
Parameters:
text(required) - The text to displayspeed(default: 100) - Typing speed in millisecondscursor(default: "|") - Cursor characterloop(default: false) - Loop the animationdelay(default: 0) - Delay before startingclass- Additional CSS classesid- Element ID
Examples:
[typewriter_text text="I will help you make The Smart Move - I guarantee it!" speed="80" cursor="|"]
[typewriter_text text="Fast typing!" speed="30" cursor="_"]
[typewriter_text text="Custom emoji cursor" speed="100" cursor="🔥"]Creates animated slogans with various styles.
Parameters:
text(required) - The slogan textstyle(default: typewriter) - Animation styleanimation(default: fade) - Entry animationspeed(default: 1000) - Animation speedclass- Additional CSS classesid- Element ID
Available Styles:
typewriter- Classic typewriter effecthandwritten- Handwritten script stylegradient- Animated gradient colorsneon- Glowing neon effectrainbow- Rainbow color shiftingfire- Fire-like flickeringmatrix- Matrix-style effectterminal- Terminal/console style
Examples:
[shogun_slogan text="Premium Services" style="gradient" animation="fade"]
[shogun_slogan text="Handwritten Note" style="handwritten" animation="slide"]
[shogun_slogan text="Future Tech" style="neon" animation="bounce"]Simple text animations without typewriter effect.
Parameters:
text(required) - The text to animateanimation(default: fade) - Animation typespeed(default: 1000) - Animation durationdelay(default: 0) - Delay before animationloop(default: false) - Loop the animation
Examples:
[animated_text text="Smooth fade in" animation="fade" speed="1500"]
[animated_text text="Slide from bottom" animation="slide" speed="800"]
[animated_text text="Bouncy entrance" animation="bounce" speed="1200"]Get creative with cursor characters:
- Standard:
|,_,▌ - Symbols:
★,♦,●,♠,♣,♥ - Arrows:
→,↗,↘,⟩,» - Emojis:
🔥,⚡,✨,💫,🌟,💎 - Writing:
✍️,🖋️,🖊️,✏️
Perfect for Real Estate Intelligence Agency (https://RealEstate-Huntsville.Com):
<!-- Main Hero Slogan -->
[typewriter_text text="I will help you make The Smart Move - I guarantee it!" speed="80" cursor="|" loop="false"]
<!-- Attribution -->
[typewriter_text text="- Mikko Jetsu, REIA" speed="100" cursor="★" delay="3000"]
<!-- Call to Action -->
[shogun_slogan text="Join REIA today!" style="handwritten" animation="bounce"]<!-- Professional Header -->
[shogun_slogan text="Innovation Meets Excellence" style="gradient" animation="fade"]
<!-- Product Launch -->
[typewriter_text text="Introducing the future of..." speed="60" cursor="⚡"]
<!-- Testimonial -->
[shogun_slogan text="Best service we've ever used!" style="handwritten" animation="slide"]<!-- Neon Style for Modern Sites -->
[shogun_slogan text="Digital Revolution" style="neon" animation="fade"]
<!-- Rainbow for Fun Brands -->
[shogun_slogan text="Colorful Creativity" style="rainbow" animation="bounce"]
<!-- Fire Effect for Energy -->
[shogun_slogan text="Blazing Fast Results" style="fire" animation="slide"]Access settings via WordPress Admin → Shogun Slogans → Settings
- Default Speed: Set default typing speed (milliseconds)
- Default Cursor: Set default cursor character
- Default Loop: Enable/disable looping by default
- Accessibility: Respect reduced motion preferences
- Performance: Enable Intersection Observer optimization
- Debug Mode: Enable for development/troubleshooting
Add custom styles via the plugin settings or your theme's CSS:
/* Custom typewriter styling */
.shogun-typewriter {
font-family: 'Your Custom Font', monospace;
color: #your-color;
font-size: 1.5rem;
}
/* Custom cursor styling */
.typewriter-cursor {
color: #ff6b35;
animation: customBlink 1s infinite;
}
@keyframes customBlink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ Mobile browsers
- Intersection Observer: Animations start only when visible
- Lazy Loading: Assets load only when needed
- Memory Management: Automatic cleanup prevents leaks
- Hardware Acceleration: Smooth CSS animations
- Reduced Motion: Respects accessibility preferences
- WordPress: 5.0+ (tested up to 6.7)
- PHP: 7.4+ (tested up to 8.3)
- Multisite: Fully supported
- Block Editor: Native integration
- Classic Editor: Full compatibility
# Clone the repository
git clone https://github.com/DavidEngland/Shogun-Slogans.git
# Navigate to WordPress plugins directory
cd /path/to/wordpress/wp-content/plugins/
# Symlink or copy the plugin
ln -s /path/to/Shogun-Slogans shogun-slogans
# Activate in WordPress adminshogun-slogans/
├── assets/
│ ├── css/
│ │ ├── slogans-final.css # Main frontend styles
│ │ └── admin.css # Admin interface styles
│ ├── js/
│ │ ├── slogans-final.js # Main frontend script
│ │ └── admin.js # Admin interface script
│ └── images/
│ └── shogun-slogans-logo.svg
├── languages/ # Translation files
├── tests/ # Test files
│ ├── comprehensive-test.html # Complete test suite
│ └── wordpress-shortcodes-ready.html
├── shogun-slogans-final.php # Main plugin file
├── README.md # This file
├── .gitignore # Git ignore rules
└── LICENSE # GPL v3 license
// Access the global API
window.ShogunSlogans
// Initialize all animations
ShogunSlogans.init();
// Control all animations
ShogunSlogans.pauseAll();
ShogunSlogans.resumeAll();
ShogunSlogans.stopAll();
// Event listeners
ShogunSlogans.on('typewriter:complete', function(event) {
console.log('Animation completed:', event.detail);
});
// Create custom animations
const animation = ShogunSlogans.createAnimation(element);// Modify default options
add_filter('shogun_slogans_default_options', function($options) {
$options['default_speed'] = 80;
return $options;
});
// Force asset loading
add_filter('shogun_slogans_should_load_assets', '__return_true');
// After plugin initialization
add_action('shogun_slogans_init', function($plugin_instance) {
// Your code here
});We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow WordPress coding standards
- Use meaningful variable and function names
- Add PHPDoc comments for all functions
- Test across multiple WordPress versions
- Ensure accessibility compliance
- ✨ Complete rewrite with modern architecture
- ⚡ Performance optimization with Intersection Observer
- ♿ Enhanced accessibility features
- 🎨 New animation styles (neon, rainbow, fire, matrix)
- 🔧 Improved WordPress integration
- 📱 Better responsive design
- 🐛 Multiple bug fixes and improvements
- 🎉 Initial public release
- 🎬 Basic typewriter and slogan animations
- 🔧 WordPress shortcode support
- 📊 Admin interface
This project is licensed under the GPL v3 License - see the LICENSE file for details.
- Inspired by classic typewriter effects
- Built with modern web standards
- Tested by the WordPress community
- Special thanks to REIA (Real Estate Intelligence Agency - https://RealEstate-Huntsville.Com) for the use case inspiration
- 📧 Email: support@yourwebsite.com
- 🐛 Issues: GitHub Issues
- 📖 Documentation: Plugin Wiki
- 💬 WordPress Forums: Support Forum
Made with ❤️ for the WordPress community
"The right words at the right time can change everything."
- Mobile-responsive design
- Added admin dashboard
- Improved shortcode system
- Added PHP helper functions
Made with ❤️ for WordPress