Components – Tech Corp

Social Media Icons Component

A powerful, flexible React-based social media icons system with 11 visual styles, 9+ social networks, animations, and complete WordPress integration. Perfect for headers, footers, and content areas.

🚀 Quick Start

The simplest way to add social icons to any page, post, or template:

[react_social_icons]

Automatically detects social links from WordPress Customizer or shows fallback demo icons.

Visual Styles

Default

[react_social_icons style="default"]

Clean icons with hover effects and brand colors

Rounded Colored

[react_social_icons style="rounded-colored"]

Icons with rounded backgrounds in brand colors

Glassmorphism

[react_social_icons style="glassmorphism"]

Modern glass effect with backdrop blur

Neon

[react_social_icons style="neon"]

Futuristic glow effects perfect for dark themes

Corporate

[react_social_icons style="corporate" show_labels="true"]

Professional business styling with labels

Rainbow Gradient

[react_social_icons style="rainbow-gradient" animation="custom-float"]

Animated rainbow backgrounds with floating effect

Size Options

Small

size="small"

Medium

size="medium"

Large

size="large"

XLarge

size="xlarge"

Animation Effects

Pulse Animation

animation="pulse"

Custom Float

animation="custom-float"

Custom Pulse

animation="custom-pulse"

Advanced Examples

🎨 Custom Brand Colors

Override default brand colors to match your brand palette

                        
[react_social_icons custom_colors='{"facebook": "#FF6B6B", "twitter": "#4ECDC4", "instagram": "#45B7D1"}' style="rounded-colored"]

🎯 Network Filtering

Display only specific social networks


[react_social_icons networks="facebook,instagram" style="floating"]

🔗 Manual Custom Links

Define custom social links with specific URLs

' style="corporate" show_labels="true" align="center"]

                        
[react_social_icons links='[
    {"network": "facebook", "url": "https://facebook.com/exceylon", "label": "Follow Us"},
    {"network": "twitter", "url": "https://twitter.com/exceylon", "label": "Tweet Us"}
]' style="corporate" show_labels="true"]

📋 Complete Parameters Reference

Parameter	Default	Options	Description
style	default	default, rounded, rounded-colored, square, square-colored, glassmorphism, neon, rainbow-gradient, corporate, ocean, minimal, floating	Visual style variant
size	medium	small, medium, large, xlarge	Icon and container size
align	left	left, center, right, between, around	Horizontal alignment
spacing	4	1-12	Tailwind spacing between icons
show_labels	false	true, false	Show text labels next to icons
animation	none	pulse, bounce, spin, ping, custom-pulse, custom-float	Animation type
networks	all	Comma-separated: facebook,twitter,instagram,linkedin,youtube,tiktok,whatsapp,github,discord	Filter specific networks
custom_colors	default	JSON object: {"facebook": "#FF6B6B"}	Override brand colors
auto_detect	true	true, false	Auto-load from WordPress Customizer

🔧 Integration Examples

Header Integration

                            
<?php echo do_shortcode('[react_social_icons 
    style="minimal" 
    size="small" 
    align="right"]'); ?>

Perfect for header areas with minimal styling

Footer Integration

                            
<?php echo do_shortcode('[react_social_icons 
    style="rounded-colored" 
    size="large" 
    align="center" 
    show_labels="true"]'); ?>
                            
                        

Ideal for footer sections with labels

Sidebar Widget

                            
<?php echo do_shortcode('[react_social_icons 
    style="floating" 
    size="medium" 
    animation="custom-pulse"]'); ?>

Great for sidebar widgets with hover effects

Call-to-Action Section

                            
<?php echo do_shortcode('[react_social_icons 
    style="glassmorphism" 
    size="large" 
    align="center" 
    spacing="6"]'); ?>
                            
                        

Perfect for call-to-action areas on gradients

⚙️ WordPress Configuration

Setting Up Social Media URLs

Configure your social media URLs in WordPress Customizer for automatic detection:

Go to Appearance → Customize
Navigate to Contact Data section
Add your social media URLs:
- Facebook URL
- Twitter URL
- Instagram URL
- LinkedIn URL
- YouTube URL (if available)
- And more...
Click Publish to save
Now [react_social_icons] will automatically use your URLs!

💡 Pro Tip: If no URLs are configured, the component will show demo links automatically.

React Navigation Component

A powerful React-based navigation system with 4 navigation styles, 5 hover effects, 5 color schemes, and mobile-responsive design. Provides same functionality as the Enhanced PHP Nav Walker with React performance.

🚀 Quick Start

The simplest way to add React navigation to any page, post, or template:

[react_navigation]

Automatically loads your WordPress primary menu with default styling and blue color scheme.

Navigation Styles

Default Style

[react_navigation style="default"]

Standard padding and typography with clean styling

Corporate Style

[react_navigation style="corporate" hover_effect="pill"]

Bold, uppercase styling with pill hover effect perfect for business sites

Modern Style

[react_navigation style="modern" hover_effect="square" color_scheme="green"]

Contemporary rounded corners with square hover effect and modern aesthetics

Minimal Style

[react_navigation style="minimal" hover_effect="underline"]

Clean, minimal spacing with subtle design

Hover Effects

Color Only

Home
About

color-only

Pill Effect

Home
About

pill

Square Effect

Home
About

square

Underline

Home
About

underline

Strikethrough

Home
About

strikethrough

Home
About

strikethrough

Color Schemes

Blue Theme (Professional)

color_scheme="blue"

Green Theme (Modern)

color_scheme="green"

Purple Theme (Creative)

color_scheme="purple"

Orange Theme (Warm)

color_scheme="orange"

Dark Theme

color_scheme="dark"

Mobile Navigation

📱 Mobile-Responsive Design

Collapsible submenus with touch-friendly toggles and progressive indentation

                        
[react_navigation is_mobile="true" style="minimal" hover_effect="square" color_scheme="blue"]

Touch-Friendly: Large tap targets for mobile devices

Collapsible: Submenus expand/collapse with smooth animations

3-Level Support: Complete hierarchy support

Advanced Examples

🎯 Custom Menu Location

Load navigation from different WordPress menu locations

                        
[react_navigation menu_location="footer" style="minimal" hover_effect="underline" color_scheme="dark"]

🎨 Custom CSS Classes

Add custom Tailwind classes for spacing and alignment

                        
[react_navigation 
    menu_class="flex space-x-8 justify-center" 
    container_class="bg-gray-50 p-4 rounded-lg"]

📋 Vertical Navigation

Perfect for sidebar navigation with vertical layout


[react_navigation menu_class="flex flex-col space-y-3"]

📋 Complete Parameters Reference

Parameter	Default	Options	Description
style	default	default, minimal, corporate, modern	Navigation styling variant
hover_effect	color-only	color-only, pill, square, underline, strikethrough	Hover animation effect
color_scheme	blue	blue, green, purple, orange, dark	Predefined color theme
menu_location	primary	primary, footer, sidebar, etc.	WordPress menu location
is_mobile	false	true, false	Enable mobile mode
spacing	normal	tight, normal, loose	Item spacing
menu_class	auto	Any Tailwind CSS classes	CSS classes for menu
container_class	auto	Any Tailwind CSS classes	CSS classes for container
menu_data	auto	JSON array of menu items	Custom menu data override

🔧 Integration Examples

Header Navigation

                            
<nav class="hidden md:block">
  <?php echo do_shortcode('[react_navigation 
      style="modern" 
      hover_effect="pill" 
      color_scheme="blue"]'); ?>
</nav>
                            
                        

Perfect for main header navigation

Mobile Navigation

                            
<div class="mobile-menu md:hidden">
  <?php echo do_shortcode('[react_navigation 
      is_mobile="true" 
      style="minimal"]'); ?>
</div>
                            
                        

Responsive mobile menu with collapsible submenus

Sidebar Navigation

                            
<aside class="sidebar">
  <?php echo do_shortcode('[react_navigation 
      style="minimal" 
      hover_effect="underline"
      menu_class="flex flex-col space-y-2"]'); ?>
</aside>
                            
                        

Vertical navigation for sidebar areas

Footer Navigation

                            
<footer>
  <?php echo do_shortcode('[react_navigation 
      style="minimal" 
      hover_effect="underline" 
      color_scheme="dark" 
      menu_location="footer"]'); ?>
</footer>
                            
                        

Footer links with dark theme

⚖️ PHP Walker vs React Component

Feature	PHP Walker	React Component
Navigation Styles	✅ 4 styles	✅ Same 4 styles
Hover Effects	✅ 5 effects	✅ Same 5 effects
Color Schemes	Custom configuration	⚡ 5 predefined + custom
Implementation	PHP wp_nav_menu setup	🎯 Simple shortcode
Performance	Server-rendered	⚡ React optimization
Mobile Support	Separate mobile walker	✨ Unified component
Animations	CSS transitions	🔥 Smooth React animations

🔄 Migration from PHP Walker

Before and After Examples

❌ Before (PHP Walker)

                                
$enhanced_walker = new Tailwind_Nav_Walker(array(
    'nav_style'    => 'modern',
    'hover_style'  => 'pill', 
    'colors'       => array(
        'text_default' => 'slate-700',
        'text_hover'   => 'blue-600',
        'bg_hover'     => 'blue-50'
        // ... complex configuration
    )
));

wp_nav_menu(array(
    'walker' => $enhanced_walker,
    'menu_class' => 'flex space-x-4'
));
                                
                            

✅ After (React Component)

                                
[react_navigation 
    style="modern" 
    hover_effect="pill" 
    color_scheme="blue"
    menu_class="flex space-x-4"]
                                
                            

💡 Pro Tip: The React component automatically handles all complex color configuration through predefined schemes, making implementation much simpler while maintaining all visual functionality.

🎨 Custom Colors & Font Families

Custom Color Implementation

                            
[react_navigation 
    style="modern"
    hover_effect="pill"
    use_custom_colors="true"
    text_color="#2d3748"
    text_hover="#667eea"
    text_active="#ffffff"
    bg_hover="rgba(102, 126, 234, 0.1)"
    bg_active="#667eea"
    font_family="'Roboto', sans-serif"
    menu_class="flex space-x-4"]
                            
                        

Supported Color Formats:

• HEX: #3b82f6, #667eea
• RGB: rgb(59, 130, 246)
• RGBA: rgba(59, 130, 246, 0.8)
• CSS Names: blue, crimson, darkslategray

PHP Walker Custom Colors

                            
$custom_walker = new Tailwind_Nav_Walker(array(
    'nav_style' => 'modern',
    'hover_style' => 'pill',
    'font_family' => "'Roboto', sans-serif",
    'use_custom_colors' => true,
    'custom_colors' => array(
        'text_color' => '#2d3748',
        'text_hover' => '#667eea',
        'text_active' => '#ffffff',
        'bg_hover' => 'rgba(102, 126, 234, 0.1)',
        'bg_active' => '#667eea'
    )
));

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => $custom_walker
));
                            
                        

Available Custom Properties

Text Colors

• text_color
• text_hover
• text_active

Background Colors

• bg_hover
• bg_active

Submenu Colors

• submenu_bg
• submenu_text
• submenu_text_hover
• submenu_bg_hover

Font Family Examples

Popular Font Combinations

font_family="'Roboto', sans-serif"
font_family="'Open Sans', sans-serif"
font_family="'Montserrat', sans-serif"
font_family="'Poppins', sans-serif"
font_family="'Inter', sans-serif"

System Font Stacks

font_family="system-ui, sans-serif"
font_family="ui-monospace, monospace"
font_family="ui-serif, serif"

Form Components

Documentation for contact forms, booking forms, and custom form components.

📋 Coming Soon

Pricing Components

Flexible pricing tables and subscription components.

💰 Coming Soon

Team Components

Team member cards, staff listings, and profile components.

👥 Coming Soon

Future Components

Additional components planned for future releases.

Testimonial Sliders

Interactive customer testimonials

Gallery Components

Image galleries and portfolios

Statistics Counters

Animated number counters

Component Library

Social Media Icons Component

🚀 Quick Start

Visual Styles

Default

Rounded Colored

Glassmorphism

Neon

Corporate

Rainbow Gradient

Size Options

Small

Medium

Large

XLarge

Animation Effects

Pulse Animation

Custom Float

Custom Pulse

Advanced Examples

🎨 Custom Brand Colors

🎯 Network Filtering

🔗 Manual Custom Links

📋 Complete Parameters Reference

🔧 Integration Examples

Header Integration

Footer Integration

Sidebar Widget

Call-to-Action Section

⚙️ WordPress Configuration

Setting Up Social Media URLs

React Navigation Component

🚀 Quick Start

Navigation Styles

Default Style

Corporate Style

Modern Style

Minimal Style

Hover Effects

Color Only

Pill Effect

Square Effect

Underline

Strikethrough

Color Schemes

Blue Theme (Professional)

Green Theme (Modern)

Purple Theme (Creative)

Orange Theme (Warm)

Dark Theme

Mobile Navigation

📱 Mobile-Responsive Design

Advanced Examples

🎯 Custom Menu Location

🎨 Custom CSS Classes

📋 Vertical Navigation

📋 Complete Parameters Reference

🔧 Integration Examples

Header Navigation

Mobile Navigation

Sidebar Navigation

Footer Navigation

⚖️ PHP Walker vs React Component

🔄 Migration from PHP Walker

Before and After Examples

❌ Before (PHP Walker)

✅ After (React Component)

🎨 Custom Colors & Font Families

Custom Color Implementation

Supported Color Formats:

PHP Walker Custom Colors

Available Custom Properties

Text Colors

Background Colors

Submenu Colors

Font Family Examples

Popular Font Combinations

System Font Stacks

Form Components

Pricing Components