Suppose, I want to add image in background for my navigation menu on mobile devices and keep site Logo at its original place (and visiable), how do I do that?Edit

To add a background image to your mobile navigation menu while keeping your site logo visible in its original position, follow these steps:

Method 1: Using CSS (No Plugin)

Add this CSS to your theme’s “Additional CSS” section (Appearance > Customize > Additional CSS):

css/* Target mobile devices */
@media (max-width: 991px) {
  /* Style the navigation menu container when expanded */
  .main-navigation.toggled ul,
  .mobile-menu-active .main-navigation ul,
  .navbar-collapse.show,
  .menu-primary-container,
  .menu-container-mobile {
    background-image: url('https://your-site.com/wp-content/uploads/your-background-image.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* Add more styling as needed */
    padding: 20px 0;
    margin-top: 10px;
  }
  
  /* Ensure logo remains visible when menu is expanded */
  .site-branding,
  .navbar-brand,
  .site-logo-div,
  .custom-logo-link {
    position: relative;
    z-index: 1001; /* Higher than mobile menu */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

Method 2: For More Control (Child Theme Approach)

If you need more control, create a child theme and modify the mobile menu template:

1. Create a child theme if you don’t have one already
2. Copy your parent theme’s navigation template file (often navigation.php, menu.php, or within header.php)
3. Add a container div around the mobile menu items with a class like mobile-menu-background
4. Style this container with your background image

Method 3: Using Page Builders

For Elementor:

Elementor Mobile Menu Background CSS

/* CSS for Elementor Mobile Menu Background */ 
/* Target Elementor's mobile menu */ 
@media (max-width: 767px) 
{ /* Style the mobile menu container */ 
.elementor-nav-menu--dropdown, .elementor-menu-toggle.elementor-active + .elementor-nav-menu-

For Divi:

css@media (max-width: 980px) {
  /* Style mobile menu container */
  .et_mobile_menu {
    background-image: url('https://your-site.com/wp-content/uploads/your-background-image.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
  
  /* Add overlay for better text visibility */
  .et_mobile_menu:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
  }
  
  /* Ensure menu items are above overlay */
  .et_mobile_menu li {
    position: relative;
    z-index: 2;
  }
  
  /* Keep logo visible */
  .logo_container {
    position: relative;
    z-index: 99999;
  }
}

Method 4: Using a Plugin

You can use the “CSS Hero” or “Microthemer” plugin to:

1. Target your mobile menu container with their visual selectors
2. Add the background image property
3. Style text elements for visibility
4. Add z-index to your logo

Troubleshooting Tips:

1. Finding the correct selectors: Use browser dev tools (F12) to inspect your mobile menu when toggled open to find the exact class names
2. Image sizing: Make sure your background image is properly sized (approximately 600-800px wide)
3. Text contrast: Add a semi-transparent overlay or text shadow to ensure menu text is readable
4. Logo visibility: If your logo disappears, adjust the z-index property to be higher than your mobile menu

I want to change default navigation hamburger icon to something different of my own choice? How to achieve that?

To change the default hamburger navigation icon to a custom one, you have several approaches depending on your platform and framework. Here’s how to do it:

Using CSS and HTML

The simplest approach is to replace the hamburger icon with your own custom icon:

<!-- Replace the default hamburger icon with a custom icon -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
  <!-- Remove the default span with navbar-toggler-icon class -->
  <!-- Add your custom icon instead -->
  <img src="your-custom-icon.svg" alt="Menu" width="24" height="24">
</button>

Using Font Icons (like Font Awesome)

If you’re using icon fonts:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
  <!-- Instead of the default hamburger icon -->
  <i class="fas fa-bars-staggered"></i> <!-- or any other icon -->
</button>

Using CSS to Customize the Default Icon

If you want to keep the default structure but modify the appearance:

css/* Override the default hamburger icon */
.navbar-toggler-icon {
  background-image: url("your-custom-icon.svg") !important;
  /* OR create a custom icon with CSS */
  background-image: none !important;
  position: relative;
}

.navbar-toggler-icon::before {
  content: "≡"; /* Or any other character */
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
}

For Specific Frameworks

Bootstrap

css.navbar-toggler-icon {
  background-image: url("your-custom-icon.svg") !important;
}

React

jsx<button className="navbar-toggler">
  <img src="/path/to/custom-icon.svg" alt="Menu" />
</button>

React Native

jsximport { TouchableOpacity, Image } from 'react-native';

<TouchableOpacity onPress={toggleMenu}>
  <Image source={require('./custom-icon.png')} style={{width: 24, height: 24}} />
</TouchableOpacity>

Changing the Hamburger Menu Icon in WordPress

For WordPress, you have several options to change the hamburger menu icon depending on your theme and whether you’re comfortable with code:

Option 1: Using CSS (No Plugin)

Add this CSS to your theme’s “Additional CSS” section in the Customizer (Appearance > Customize > Additional CSS):

css/* Hide the original hamburger icon */
.menu-toggle span,
.navbar-toggler-icon,
.menu-icon,
.menu-toggle::before,
.menu-toggle::after {
    display: none !important;
}

/* Add your custom icon using a Unicode character */
.menu-toggle::before,
.navbar-toggle::before,
.menu-icon::before {
    content: "\2630"; /* Example: trigram for heaven symbol */
    /* OR content: "\f0c9"; if using Font Awesome */
    font-size: 24px;
    display: inline-block !important;
}

/* If using Font Awesome */
.menu-toggle::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

You’ll need to inspect your site with browser developer tools to find the exact class names your theme uses for the hamburger icon.

Option 2: Using a Custom SVG/Image

Add this to your theme’s Additional CSS:

css/* Hide the original hamburger icon */
.menu-toggle span,
.navbar-toggler-icon {
    background-image: url('https://your-site.com/wp-content/uploads/your-custom-icon.svg') !important;
    background-color: transparent !important;
    background-size: contain !important;
}

Option 3: Using a Child Theme

If you’re comfortable with creating a child theme, you can modify the navigation.php or header.php file to replace the hamburger icon code.

Option 4: Using Plugins

Method A: Menu Icons Plugin

1. Install and activate the “Menu Icons” plugin
2. Go to Appearance > Menus
3. Edit your menu items and add custom icons to each

Method B: Custom HTML Widget

If your theme allows adding widgets to the header:

1. Add a “Custom HTML” widget
2. Insert your custom icon HTML
3. Use CSS to position it correctly

Option 5: Page Builders

If you’re using a page builder like Elementor, Divi, or Beaver Builder:

1. Edit your header template
2. Find the navigation/menu module
3. Look for hamburger/mobile menu icon options
4. Replace with your custom icon or choose from their icon library

Would you like me to elaborate on any of these options or provide specific code for your particular WordPress theme?

While developing WordPress site, I first created child theme of current block theme(generally Twenty Twenty-Five). What are standard practices, I should follow so that site doesn’t breakup in the future ?

Also tell me what are things, I should setup on site (I do cow coding, working on live server, generally on subdomain) before even starting any website project? What are things I should Customise in style (gutenberg), which important plugins or themes or settings I should work on?

What I should do during project to avoid repeating work?

What are checklist I should follow at the end of each project? Finishing and migration along with other thingsEdit

WordPress Child Theme Development Best Practices

Creating a child theme for Twenty Twenty-Five is a great start. Here are some standard practices to ensure your site remains stable:

Child Theme Development Best Practices

1. Proper Structure
   • Include all required files (style.css with proper theme headers)
   • Use functions.php only for necessary hooks and filters
   • Create a proper folder structure for assets
2. Enqueue Parent Theme Resources
   • Always properly enqueue parent styles and scripts
   • Use wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css')
3. Version Control
   • Use version numbering in your style.css header
   • Consider using Git for tracking changes
4. Avoid Direct Core Overrides
   • Use hooks and filters instead of copying entire template files
   • When copying template files, keep modifications minimal
5. Testing
   • Test across multiple browsers and devices
   • Check compatibility with latest WordPress version

Project Setup Checklist (Before Starting)

1. Environment Setup
   • Create a staging environment (even on subdomain)
   • Install debugging tools like Query Monitor
   • Set up local development environment if possible
2. Security Measures
   • Implement basic security plugins (Wordfence or similar)
   • Change default admin username
   • Use strong passwords and limit login attempts
   • Set up SSL certificate
3. Performance Foundation
   • Install caching plugin (WP Rocket, WP Super Cache)
   • Configure image optimization (Smush, ShortPixel)
   • Set up a CDN if needed
4. Essential Plugins
   • SEO plugin (Yoast or Rank Math)
   • Backup solution (UpdraftPlus, BackWPup)
   • Form handler (Contact Form 7, WPForms)
   • Security plugin (already mentioned)
5. Block Editor Customization
   • Set up custom color palette to match brand
   • Define custom block patterns for common layouts
   • Create reusable blocks for frequently used elements

During Project Development

1. DRY Principles
   • Create reusable components/blocks
   • Use block patterns for consistent layouts
   • Utilize template parts for repeated elements
2. Documentation
   • Comment your code
   • Document custom functions and hooks
   • Create a style guide for consistency
3. Performance Optimization
   • Regularly check page speed
   • Optimize images before uploading
   • Minimize plugin usage
4. Regular Backups
   • Before major changes
   • After completing significant sections

Final Project Checklist

1. Quality Assurance
   • Cross-browser testing
   • Mobile responsiveness check
   • Accessibility audit (WCAG compliance)
   • Check for broken links
   • Test all forms and interactive elements
2. SEO Optimization
   • Verify meta titles and descriptions
   • Check heading structure
   • Optimize images with alt text
   • Ensure XML sitemap is generated
   • Add schema markup where appropriate
3. Performance Final Check
   • Run Google PageSpeed Insights
   • Optimize largest contentful paint
   • Minimize unused JavaScript and CSS
4. Security Audit
   • Update all plugins and themes
   • Remove unused plugins
   • Check user permissions
   • Implement security headers
5. Migration/Handover
   • Create comprehensive documentation
   • Prepare training materials if needed
   • Ensure backup system is working
   • Set up monitoring tools
6. Launch Preparation
   • Disable any “under construction” mode
   • Configure proper redirection if needed
   • Update robots.txt file
   • Connect Google Analytics/Search Console

By following these practices, you’ll build more maintainable WordPress sites that won’t break with future updates and will be easier to manage long-term.

While developing a site, I often use group block on WordPress site and I keep it full width with 4vw left and right padding with 40px top and bottom padding, to keep a responsive layout across devices.

I want to know, is this best strategy? What are the alternatives do I have? Consider future scaling, what standard practices I should follow? How Web development companies manage these things while developing sites?Edit

That’s a thoughtful question about responsive layout approaches. Your current strategy of using a full-width group block with 4vw horizontal padding and 40px vertical padding is a solid starting point, but there are several considerations and alternatives worth exploring.

Your Current Approach

Using viewport width (vw) units for horizontal padding is responsive by nature since it scales with the viewport size. This approach:

• Adapts automatically to different screen sizes
• Maintains consistent proportional spacing
• Is relatively simple to implement

Alternative Approaches

1. Container-Based Layout with Max-Width

css.container {
  width: 100%;
  max-width: 1200px; /* or other appropriate value */
  margin: 0 auto;
  padding: 40px 20px; /* fixed padding inside the container */
}

This approach:

• Prevents content from stretching too wide on large screens
• Maintains readability on desktop monitors
• Centers content on larger viewports

2. CSS Grid System

Using a responsive grid framework with defined breakpoints:

css.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 40px 4vw;
}

3. Fluid Typography and Spacing

css:root {
  --base-size: 1rem;
  --scale-ratio: 1.2;
  --padding-inline: clamp(1rem, 4vw, 4rem);
  --padding-block: clamp(2rem, 5vh, 5rem);
}

Using clamp() provides minimum and maximum constraints while allowing fluid scaling in between.

Industry Best Practices

Professional web development companies typically:

1. Use component-based design systems with predefined spacing and layout rules
2. Implement responsive breakpoints for different device categories
3. Define a consistent spacing scale (8px, 16px, 24px, 32px, etc.)
4. Test extensively across multiple devices and screen sizes
5. Consider content strategy when defining layouts (how content impacts design at different viewport sizes)
6. Prioritize accessibility by ensuring layouts work with zoom and text resizing

Recommendations for Future Scaling

1. Create a design system with reusable components and consistent spacing rules
2. Use relative units strategically:
   • rem for typography and component sizing (relative to root font size)
   • em for spacing within components (relative to component’s font size)
   • vw/vh for viewport-relative sizing (but with constraints using clamp())
   • Fixed units (px) where appropriate for borders and small details
3. Consider container queries (newer CSS feature) for component-level responsiveness
4. Implement a hybrid approach:css.content-section { width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(20px, 4vw, 80px) clamp(16px, 4vw, 64px); }

This hybrid approach gives you the benefits of viewport-relative scaling while setting sensible minimum and maximum constraints.

Would you like me to elaborate on any of these approaches or provide more specific examples for WordPress implementations?

Provide me a development Strategy to make any web development work mobile responsive.

Mobile-First Development Strategy

Here’s a comprehensive strategy for ensuring your web development projects are truly mobile responsive across all devices and screen sizes:

Phase 1: Planning & Foundation

1. Adopt Mobile-First Design Principles

• Design for smallest screens first, then progressively enhance for larger screens
• Focus on core content and functionality before adding desktop-only features
• Create wireframes and prototypes starting with mobile layouts

2. Establish a Responsive Design System

• Define a consistent grid structure
• Create a typographic scale that works across devices
• Develop a modular spacing system (8px increments work well)
• Document breakpoints based on content needs, not specific devices

3. Set Up Development Environment

• Use modern build tools (Webpack, Vite, etc.)
• Configure viewport meta tag correctly:html<meta name="viewport" content="width=device-width, initial-scale=1.0">
• Implement linting for CSS to catch responsive design issues

Phase 2: Implementation

4. Write Semantic HTML

• Use proper semantic elements (<nav>, <main>, <section>, etc.)
• Structure content in a logical, hierarchical manner
• Keep accessibility in mind with proper ARIA attributes where needed

5. Implement CSS Best Practices

• Use relative units:
  • rem for typography and component sizing
  • em for component internal spacing
  • % for widths and flexible layouts
  • vw/vh with constraints via clamp()
• Employ flexible layouts:css.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(16px, 4vw, 64px); }
• Use modern layout techniques:css.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 32px); }

6. Implement Media Queries Strategically

• Start with mobile styles as the default
• Add breakpoints where design needs to adapt:css/* Mobile-first default styles */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } /* Tablet and up */ @media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop and up */ @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

7. Optimize Images and Media

• Implement responsive images with srcset and sizes attributes
• Use modern image formats (WebP, AVIF) with fallbacks
• Lazy load images and videos below the fold
• Consider art direction for different viewports:html<picture> <source media="(max-width: 767px)" srcset="mobile-image.jpg"> <source media="(min-width: 768px)" srcset="desktop-image.jpg"> <img src="fallback.jpg" alt="Description" loading="lazy"> </picture>

8. Handle Touch Interactions

• Ensure tap targets are at least 44px × 44px
• Implement swipe gestures for touch devices
• Design hover states that work well or have alternatives on touch devices

Phase 3: Testing & Optimization

9. Implement Comprehensive Testing

• Test on real devices across manufacturers and OS versions
• Use browser developer tools to simulate different devices
• Test with different network conditions
• Verify accessibility with screen readers

10. Performance Optimization

• Minimize render-blocking resources
• Optimize critical rendering path
• Implement code splitting for faster initial load
• Set performance budgets for different device categories

11. Edge Cases & Quality Assurance

• Test with zoomed content (200% zoom)
• Check keyboard navigation works on all screen sizes
• Test font size adjustments
• Verify form interactions on mobile devices

Phase 4: Maintenance & Iteration

12. Monitor Usage and Performance

• Implement analytics to track device usage
• Set up error monitoring for mobile-specific issues
• Collect user feedback specifically about mobile experience

13. Continuous Improvement

• Regularly review analytics to identify problematic devices/browsers
• Update responsive approach as new device categories emerge
• Keep current with evolving web standards and capabilities

WordPress-Specific Implementation

If you’re working specifically with WordPress:

1. Choose a lightweight, responsive theme as a base
2. Use theme customizer for responsive settings
3. Implement responsive blocks in Gutenberg with appropriate settings:css/* In your block's CSS */ .my-custom-block { padding: clamp(16px, 4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
4. Add responsive custom fields for different screen sizes
5. Test extensively with popular WordPress page builders if used

By following this development strategy, you’ll create websites that not only work across devices but provide excellent user experiences regardless of how they’re accessed.Retry

Claude does not have the ability to run the code it generates yet.

Claude can make mistakes.
Please double-check responses.

3.7 Sonnet

How to enable svg support in WordPress, with and without plugin? Why they’re not considered safe for website?

Without Plugins

To enable SVG uploads in WordPress without plugins:

Add code to functions.php:

function add_svg_support($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'add_svg_support'); // Optional: Add SVG sanitization function sanitize_svg($data) { // Only run on SVG uploads if ($data['type'] === 'image/svg+xml') { // SVG sanitization code would go here } return $data; } add_filter('wp_handle_upload_prefilter', 'sanitize_svg');

Add SVGZ support (optional):php

function add_svgz_support($mimes) { $mimes['svgz'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'add_svgz_support');

Using Plugins

Several plugins can enable SVG support:

1. Safe SVG – Popular option with sanitization features
2. SVG Support – Allows SVG uploads and inline embedding
3. WP SVG – Simple solution for SVG uploads

Security Concerns with SVG Files

SVGs aren’t considered safe by default because:

1. They contain XML code – SVGs are XML files that can include scripts and embedded content
2. XSS vulnerability – Can contain JavaScript that executes when loaded
3. SSRF attacks – Can contain external references that make server-side requests
4. XML entities – Can use XML entities for denial of service or data extraction

Safe Implementation Practices

To safely use SVGs:

1. Always sanitize – Remove scripts and potentially harmful elements
2. Use sanitization libraries – Like DOMPurify or SVG sanitizers
3. Limit upload permissions – Only allow trusted users to upload SVGs
4. Serve with correct headers – Use Content-Type: image/svg+xml and consider Content-Security-Policy

Would you like more details on any specific aspect of SVG implementation or security

Creating a child theme for Twenty Twenty-Five is a great start. Here are some standard practices to ensure your site remains stable:

Child Theme Development Best Practices

1. Proper Structure
   • Include all required files (style.css with proper theme headers)
   • Use functions.php only for necessary hooks and filters
   • Create a proper folder structure for assets
2. Enqueue Parent Theme Resources
   • Always properly enqueue parent styles and scripts
   • Use wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css')
3. Version Control
   • Use version numbering in your style.css header
   • Consider using Git for tracking changes
4. Avoid Direct Core Overrides
   • Use hooks and filters instead of copying entire template files
   • When copying template files, keep modifications minimal
5. Testing
   • Test across multiple browsers and devices
   • Check compatibility with latest WordPress version

Question: theme.json Customization, what it is? What its capable of? How we can do that? Give a detailed examples along with codes.

The theme.json file is the backbone of WordPress block themes, acting as a central configuration file that defines your theme’s default styles, available options, and block behaviors. It’s incredibly powerful for customizing your site without plugins.

What is theme.json?

theme.json is a configuration file that:

• Controls global styles, settings, and block-specific styles
• Defines what customization options are available to users
• Sets default values for spacing, colors, typography, and more
• Creates a consistent styling system across your site

What Can theme.json Do?

With theme.json, you can:

• Define custom color palettes
• Set typography options (fonts, sizes, line heights)
• Create custom spacing scales
• Control block-specific defaults
• Add custom CSS properties
• Set layout constraints
• Disable or enable specific features
• Define custom gradients
• Create responsive behavior
• Set up duotone filters

How to Customize theme.json

1. Access your theme files via FTP, SFTP, or your hosting file manager
2. Navigate to your active theme’s directory
3. Find the theme.json file (or create one if it doesn’t exist)
4. Edit the file with any text editor
5. Save and upload the changes

Comprehensive theme.json Example

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0073aa",
          "name": "Primary"
        },
        {
          "slug": "secondary",
          "color": "#2c3338",
          "name": "Secondary"
        },
        {
          "slug": "accent",
          "color": "#ff6b6b",
          "name": "Accent"
        },
        {
          "slug": "background",
          "color": "#ffffff",
          "name": "Background"
        },
        {
          "slug": "text",
          "color": "#333333",
          "name": "Text"
        }
      ],
      "gradients": [
        {
          "slug": "primary-to-accent",
          "gradient": "linear-gradient(135deg, #0073aa 0%, #ff6b6b 100%)",
          "name": "Primary to Accent"
        }
      ],
      "duotone": [
        {
          "colors": ["#0073aa", "#ffffff"],
          "slug": "primary-white",
          "name": "Primary and White"
        }
      ],
      "custom": true,
      "customGradient": true,
      "link": true
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
          "slug": "system-font",
          "name": "System Font"
        },
        {
          "fontFamily": "Georgia, serif",
          "slug": "serif",
          "name": "Serif"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "14px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "18px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "24px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "32px",
          "name": "Extra Large"
        }
      ],
      "lineHeight": true,
      "fontWeight": true,
      "fontStyle": true,
      "textDecoration": true,
      "textTransform": true,
      "letterSpacing": true
    },
    "spacing": {
      "units": ["px", "em", "rem", "%", "vh", "vw"],
      "padding": true,
      "margin": true,
      "blockGap": true,
      "spacingSizes": [
        {
          "slug": "small",
          "size": "1rem",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "2rem",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "3rem",
          "name": "Large"
        }
      ]
    },
    "border": {
      "radius": true,
      "color": true,
      "style": true,
      "width": true
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    },
    "custom": {
      "spacing": {
        "baseline": "20px",
        "headerHeight": "80px",
        "footerHeight": "60px"
      },
      "typography": {
        "line-height": {
          "tiny": 1.15,
          "small": 1.4,
          "medium": 1.6,
          "large": 1.8
        }
      }
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--background)",
      "text": "var(--wp--preset--color--text)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system-font)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "spacing": {
      "blockGap": "2rem",
      "padding": {
        "top": "2rem",
        "right": "2rem",
        "bottom": "2rem",
        "left": "2rem"
      }
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        ":hover": {
          "color": {
            "text": "var(--wp--preset--color--accent)"
          }
        }
      },
      "h1": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--x-large)",
          "fontWeight": "700",
          "lineHeight": "1.2"
        },
        "spacing": {
          "margin": {
            "top": "2rem",
            "bottom": "1rem"
          }
        }
      },
      "h2": {
        "typography": {
          "fontSize": "calc(var(--wp--preset--font-size--large) * 1.2)",
          "fontWeight": "700",
          "lineHeight": "1.3"
        }
      }
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "lineHeight": "1.8"
        },
        "spacing": {
          "margin": {
            "bottom": "1.5rem"
          }
        }
      },
      "core/heading": {
        "color": {
          "text": "var(--wp--preset--color--secondary)"
        },
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--serif)"
        }
      },
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "#ffffff"
        },
        "border": {
          "radius": "4px"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)",
          "fontWeight": "600"
        },
        "spacing": {
          "padding": {
            "top": "0.75rem",
            "right": "1.5rem",
            "bottom": "0.75rem",
            "left": "1.5rem"
          }
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--accent)"
          }
        }
      },
      "core/cover": {
        "spacing": {
          "padding": {
            "top": "3rem",
            "right": "3rem",
            "bottom": "3rem",
            "left": "3rem"
          }
        }
      },
      "core/image": {
        "border": {
          "radius": "8px"
        },
        "spacing": {
          "margin": {
            "bottom": "2rem"
          }
        }
      },
      "core/quote": {
        "typography": {
          "fontStyle": "italic",
          "fontSize": "var(--wp--preset--font-size--large)"
        },
        "border": {
          "width": "0 0 0 4px",
          "color": "var(--wp--preset--color--primary)",
          "style": "solid"
        },
        "spacing": {
          "padding": {
            "left": "2rem"
          },
          "margin": {
            "top": "2rem",
            "bottom": "2rem"
          }
        }
      }
    }
  },
  "templateParts": {
    "header": {
      "area": "header"
    },
    "footer": {
      "area": "footer"
    }
  }
}

Detailed Explanation of theme.json Sections

1. Settings

The settings section controls what options are available in the editor and their default values:

Color Settings

json"color": {
  "palette": [
    {
      "slug": "primary",
      "color": "#0073aa",
      "name": "Primary"
    }
  ]
}

This defines a color called “Primary” with the hex value #0073aa that can be used throughout the theme.

Typography Settings

json"typography": {
  "fontFamilies": [
    {
      "fontFamily": "Georgia, serif",
      "slug": "serif",
      "name": "Serif"
    }
  ],
  "fontSizes": [
    {
      "slug": "medium",
      "size": "18px",
      "name": "Medium"
    }
  ]
}

This defines available fonts and font sizes for the theme.

2. Styles

The styles section defines default styles for your theme:

Global Styles

json"styles": {
  "color": {
    "background": "var(--wp--preset--color--background)",
    "text": "var(--wp--preset--color--text)"
  },
  "typography": {
    "fontFamily": "var(--wp--preset--font-family--system-font)",
    "fontSize": "var(--wp--preset--font-size--medium)"
  }
}

Block-Specific Styles

json"blocks": {
  "core/paragraph": {
    "typography": {
      "lineHeight": "1.8"
    },
    "spacing": {
      "margin": {
        "bottom": "1.5rem"
      }
    }
  }
}

This sets specific styles just for paragraph blocks.

Real-World Examples

Example 1: Customizing Button Blocks

json"blocks": {
  "core/button": {
    "color": {
      "background": "var(--wp--preset--color--primary)",
      "text": "#ffffff"
    },
    "border": {
      "radius": "4px"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)",
      "fontWeight": "600"
    },
    "spacing": {
      "padding": {
        "top": "0.75rem",
        "right": "1.5rem",
        "bottom": "0.75rem",
        "left": "1.5rem"
      }
    },
    ":hover": {
      "color": {
        "background": "var(--wp--preset--color--accent)"
      }
    }
  }
}

Example 2: Creating a Custom Quote Style

json"core/quote": {
  "typography": {
    "fontStyle": "italic",
    "fontSize": "var(--wp--preset--font-size--large)"
  },
  "border": {
    "width": "0 0 0 4px",
    "color": "var(--wp--preset--color--primary)",
    "style": "solid"
  },
  "spacing": {
    "padding": {
      "left": "2rem"
    },
    "margin": {
      "top": "2rem",
      "bottom": "2rem"
    }
  }
}

Tips for Working with theme.json

1. Use Developer Tools: Inspect your site with browser developer tools to understand which elements you need to target.
2. Start Small: Begin with simple modifications before attempting complex changes.
3. Reference Variables: Use CSS variables (like var(--wp--preset--color--primary)) to maintain consistency.
4. Backup First: Always make a backup of your theme.json file before editing.
5. Test Changes: Check your modifications on different screen sizes and devices.
6. Use WordPress Documentation: The official WordPress theme.json documentation is invaluable.

With these techniques, you can completely transform your WordPress block theme without using any plugins, giving you greater control and better performance.

Whats schema and version in this file?Edit

Understanding schema and version in theme.json

The $schema and version properties in a WordPress theme.json file serve important purposes for theme development and compatibility:

The $schema Property

The $schema property references the JSON Schema definition that validates your theme.json file:

json"$schema": "https://schemas.wp.org/trunk/theme.json"

What it does:

1. Validation: It allows code editors to validate your theme.json structure against the official WordPress schema
2. Autocompletion: Enables autocompletion in compatible editors (like VS Code)
3. Documentation: Provides inline documentation and tooltips about available options
4. Error Detection: Helps catch typos and incorrect property names

The URL points to the latest WordPress schema definition. You can also point to a specific version like:

• https://schemas.wp.org/wp/6.1/theme.json
• https://schemas.wp.org/wp/6.2/theme.json

The version Property

The version property indicates which version of the theme.json structure your file is using:

json"version": 2

What it means:

• Version 1: The initial version introduced in WordPress 5.8
• Version 2: Introduced in WordPress 5.9, with expanded features (current standard)

Why it matters:

1. Feature Support: Different versions support different features
2. Backward Compatibility: WordPress knows how to interpret your file based on this version
3. Processing Logic: WordPress uses this to determine how to process your theme.json file

Version 2 is the current standard and includes support for:

• More granular control over block-specific styles
• Enhanced typography options
• CSS variables and custom properties
• Pseudo-selector styling (like :hover, :focus)
• Template parts definitions
• And many more features

Best Practices

1. Always include both $schema and version in your theme.json file
2. Use version 2 for modern WordPress themes
3. Use the trunk schema for the latest features or a specific version schema if targeting older WordPress versions
4. Keep these properties at the root level of your JSON structure

The combination of these properties ensures your theme.json file is properly validated and processed by WordPress.Retry

I want paragraph text color to be a gradient.Edit

Creating Gradient Text for Paragraphs in WordPress with theme.json

To create paragraph text with gradient colors using theme.json, you’ll need to use a combination of theme.json settings and some custom CSS properties. Here’s how to implement gradient text for paragraphs:

Method 1: Using theme.json with Custom CSS

Add this to your theme.json file:

theme.json with Gradient Text for Paragraphs

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "gradients": [
        {
          "slug": "text-gradient",
          "gradient": "linear-gradient(135deg, #ff6b6b 0%, #0073aa 100%)",
          "name": "Text Gradient"
        }
      ],
      "custom": true,
      "customGradient": true
    },
    "custom": {
      "gradient-text": {
        "property": "background",
        "value": "var(--wp--preset--gradient--text-gradient)"
      }
    }
  },
  "styles": {
    "blocks": {
      "core/paragraph": {
        "color": {
          "text": "transparent"
        },
        "css": "-webkit-background-clip: text; background-clip: text;"
      }
    }
  }
}

However, the above approach may not work in all themes because theme.json doesn’t directly support the CSS properties needed for gradient text. For better compatibility, you’ll need to add custom CSS.

Method 2: Adding Custom CSS in theme.json

theme.json with Custom CSS for Gradient Text

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "gradients": [
        {
          "slug": "text-gradient",
          "gradient": "linear-gradient(135deg, #ff6b6b 0%, #0073aa 100%)",
          "name": "Text Gradient"
        }
      ],
      "custom": true,
      "customGradient": true
    }
  },
  "styles": {
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontWeight": "bold"
        }
      }
    }
  },
  "customTemplates": [],
  "templateParts": []
}

Then, add this to your theme’s additional CSS (either through the Site Editor or in your style.css file):

Custom CSS for Gradient Text

.wp-block-paragraph {
  background: var(--wp--preset--gradient--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: inline-block;
}

Method 3: Using theme.json with Inline Styles

For more recent WordPress versions with better CSS support in theme.json:

Advanced theme.json for Gradient Text

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "gradients": [
        {
          "slug": "text-gradient",
          "gradient": "linear-gradient(135deg, #ff6b6b 0%, #0073aa 100%)",
          "name": "Text Gradient"
        }
      ]
    }
  },
  "styles": {
    "blocks": {
      "core/paragraph": {
        "css": "background: var(--wp--preset--gradient--text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; display: inline-block;"
      }
    }
  }
}

Important Notes:

1. The display: inline-block property is important for proper gradient rendering
2. Font weight affects how visible the gradient is – bolder text shows gradients better
3. Support for gradient text varies slightly between browsers
4. Test your implementation across different devices and browsers
5. You might need to adjust the gradient values for optimal readability

If you want to add a class selector to only apply this to certain paragraphs, you can use the “Additional CSS Class” option in the block editor for specific paragraphs, then target those in your CSS instead of all paragraphs.

Would you like me to explain any specific part of this implementation in more detail?Retry

Claude can make mistakes. Please double-check responses.

Question: I have a block theme on my WordPress site. It has predefined/default style like colors, padding, spacing, fonts, etc., all defined. Also, the design of each block is defined. I want to customise the design and look and feel of each block. How to go about this without using any plugin?

You can customize your WordPress block theme’s design and appearance without plugins by using several built-in WordPress features. Here’s how to approach this:

1. Use the Site Editor

The WordPress Site Editor is your primary tool for customizing block themes:

1. Go to Appearance → Editor in your WordPress admin
2. From here, you can modify templates, template parts, and styles globally

2. Global Styles

For theme-wide customization:

1. In the Site Editor, click the Styles icon (usually looks like a circle with paint brushes)
2. This panel lets you modify:
   • Typography (fonts, sizes, weights)
   • Colors (palette, background, text)
   • Layout (spacing, padding, margins)
   • Borders and other style elements

3. Block-Level Customization

To customize specific blocks:

1. Select any block in the editor
2. Use the block settings panel (right sidebar) to modify that particular block type
3. Click the three-dot menu and select “Edit” to access additional settings

4. Custom CSS

For more advanced customization:

1. In the Site Editor, click the Styles icon
2. Scroll down and find “Additional CSS”
3. Add custom CSS to target specific blocks or elements

For example, to modify paragraph blocks:

css.wp-block-paragraph {
  font-family: 'Your Font', sans-serif;
  line-height: 1.8;
  margin-bottom: 2rem;
}

5. Create Block Variations

For complex block customization:

1. In the Site Editor, create a custom pattern with your block
2. Style it exactly as you want
3. Save it as a reusable pattern
4. Use this pattern throughout your site

6. theme.json Customization

For deeper theme customization:

1. Access your theme files through FTP or the file manager in your hosting
2. Find and edit the theme.json file in your theme’s root directory
3. Modify the JSON structure to change default styles, available options, and block presets

This is the most powerful method but requires understanding of JSON structure and theme development.

Can i change the default postion of pages and media in my wordpress admin dashboard.

Yes, you can absolutely change the default position of Pages, Media, or any other admin menu items in the WordPress dashboard! You can do this programmatically by removing and re-adding the menu items in the order you want, or using menu position numbers.

function wpio_custom_menu_order($menu_ord) {
    if (!$menu_ord) return true;

    return array(
        'index.php',                // Dashboard (stays at 1)
        'edit.php?post_type=page', // Pages (2)
         'edit.php',                // Posts (3)
        'upload.php',              // Media (4)
        /*Add custom post types or others below as needed:
        'edit.php?post_type=wpio-artwork',
        'edit.php?post_type=wpio-book',
        'edit.php?post_type=wpio-movie',*/
    );
}
add_filter('custom_menu_order', '__return_true');
add_filter('menu_order', 'wpio_custom_menu_order');

🔧 Method 1: Change Menu Order via menu_order Filter

This gives you full control over the admin menu order, including Pages, Media, CPTs, and more.

phpCopyEditfunction custom_menu_order($menu_ord) {
    if (!$menu_ord) return true;

    return array(
        'index.php',                // Dashboard
        'upload.php',              // Media
        'edit.php?post_type=page', // Pages
        'edit.php',                // Posts
        'separator1',              // Separator
        'edit.php?post_type=book', // Your CPT
        'themes.php',              // Appearance
        'plugins.php',             // Plugins
        'users.php',               // Users
        'tools.php',               // Tools
        'options-general.php',     // Settings
    );
}
add_filter('custom_menu_order', '__return_true');
add_filter('menu_order', 'custom_menu_order');

📝 Tips:

• The values must match the menu slugs.
• You can inspect them by hovering over the menu items and checking the URL (edit.php?post_type=page for Pages, etc).

📍 Method 2: Use menu_position in CPTs

If you’re registering Custom Post Types (like Books, Movies), you can set menu_position like this:

phpCopyEdit'menu_position' => 5, // Below Posts

Reference positions:

In this post, I’ll be going through

Text Blocks [ Block Name | Block Type | CSS Class ]

A Short Description goes here.

Learn more

Paragraph

core/paragraph .wp-block-paragraph

Text gradient support.

Text  Animation

Carved Text

Heading

core/heading .wp-block-heading

Text gradient support.

List

core/list .wp-block-list

Right icon circular background.

Quote

core/quote .wp-block-quote

Quote icons block variation.

Classic

Code

core/code .wp-block-code

Code Title (Code Type Identifier) + Code snippet copy button.

VS Code like feel (Like numbers on left side.

Fixed height code + Expand

Details

Can we make heading with different background color and summary with another, more light colour.

Automatic closing.

Preformatted

core/preformatted .wp-block-preformatted

Pullquote

core/pullquote .wp-block-pullquote

Table

Table core/table .wp-block-table

Making it mobile Responsive 

More control on setting column widths.

Verse

Verse core/verse .wp-block-verse

Media Blocks

A short description goes here.

Learn more

Image

core/image .wp-block-image

Gallery

core/gallery .wp-block-gallery

Audio

core/audio .wp-block-audio

Cover

core/cover .wp-block-cover

File

core/file .wp-block-file

Media & Text

core/media-text .wp-block-media-text

Video

core/video .wp-block-video

Design Blocks

Buttons (new 5.4)

Buttons core/buttons .wp-block-buttons

Button core/button .wp-block-button

Button Icon Support

GPT: I want to customise my WordPress Button Blocks Hover state with green background and white text color. Please tell me, where I can put code for this in my child theme, additional css or any other place along with code. Also tell me how and from where I can remove existing code for hover state.

Sticky Button (Being sticked at the button of the page or with right & bottom padding.)

I.e. Email us button with an icon.

Button (deprecated)

Columns

Columns core/columns .wp-block-columns

Column core/column .wp-block-column

Grid

Group

Group core/group .wp-block-group

Row

Row core/row .wp-block-row

Stack

Stack core/stack .wp-block-stack

Parallax Effect using Stack + Position: sticky;

 → Cards ( Services | Features)

PPT on WordPress Page

Text Columns (deprecated)

More

Page Break

Separator

Separator core/separator .wp-block-separator

Different Styles Variation

Spacer

Spacer core/spacer .wp-block-spacer

Horizontal Spacer?

Group(with gradient  and no padding>spacer with height 2px.

Widgets Blocks

A short description goes here.

Learn more

Archives

Archives core/archives .wp-block-archives

Calendar (new in 5.3)

Calendar core/calendar .wp-block-calendar

Categories List

Categories core/categories .wp-block-categories

Custom HTML

Latest Comments

Latest Comments core/latest-comments .wp-block-latest-comments

Latest Posts

Latest Posts core/latest-posts .wp-block-latest-posts

Page List (new in 5.8)

RSS (new in 5.3)

RSS core/rss .wp-block-rss

Search (new in 5.3)

Search core/search .wp-block-search

Shortcode

Shortcode core/shortcode .wp-block-shortcode

Social Icons (new in 5.4)

Social Icons core/social-links .wp-block-social-links

Tag Cloud (new in 5.3)

Tag Cloud core/tag-cloud .wp-block-tag-cloud

Theme Blocks

A short description goes here.

Learn more

Navigation (new in 5.9)

Navigation core/navigation .wp-block-navigation

I want to add text “Menu” for my WordPress Hamburger Menu and “Close” when clicked to open, applicable for Mobile Menu

Cant we achieve this with only additional css, targeting wp-block-navigation__responsive-container only

I don’t want to limit this for screen readers only. It should be visible normally.

Just changing hamburger icon to custom png or svg with an clock-wise rotational animation

Custom Link

Home Link

Submenu 

Log in & Log-out

Background Colour 

Radius

Site Logo (new in 5.8)

Site Logo core/site-logo .wp-block-site-logo

Site Title (new in 5.8)

Site Title core/site-title .wp-block-site-title

Site Tagline (new in 5.8)

Site Tagline core/site-tagline .wp-block-site-tagline

Query Loop(new in 5.8)

Query core/query .wp-block-query

Post Template

Post Template core/post-template .wp-block-post-template

Post Title (new in 5.8)

Post Title core/post-title .wp-block-post-title

Post Excerpt (new in 5.8)

Post Excerpt core/post-excerpt .wp-block-post-excerpt

Post Featured Image (new in 5.8)

Post Featured Image core/post-featured-image .wp-block-post-featured-image

Post Content (new in 5.8)

Post Content core/post-content .wp-block-post-content

Read More core/read-more .wp-block-read-more

Post Author

Post Author core/post-author .wp-block-post-author

Post Author Biography

Checkout Author section on this blog: https://blog.tbhcreative.com/user-friendly-link-state-design/ 

author-bio { 

margin: 60px 0 100px 60px;

padding: 60px 60px 0 60px;

border: 2px solid #ffc609;

}

Author Image (Margin: -20px 40px -40 -100)

Wrapper under a column: 

Post Author Name

Post Date (new in 5.8)

Post Date core/post-date .wp-block-post-date

Post Modified Date

Post Categories (new in 5.8)

Post Tags (new in 5.8)

Pagination

Posts List

Avatar

Post Navigation Link

Next Post

Previous post

Read More (new in 5.9)

Comments (new in 6.1)

Comments core/comments .wp-block-comments

Comments Title

Comment Template

Comment Author Name

Comment Date

Comment Content

Comment Reply Link

Comment Edit Link

Comment Pagination

Post Comments Form

Post Comment (deprecated)

Login/out (new in 5.8)

Term Description (new in 5.9)

Archive Title (new in 5.9)

Search Results Title (new in 6.1)

Template Part (new in 5.9)

Template Part core/template-part .wp-block-template-part

Embed Blocks

Short Description goes here.

Learn more

Embed

Embed (Generic) core/embed .wp-block-embed

Twitter

Twitter core/embed .wp-block-embed-twitter

YouTube

YouTube core/embed .wp-block-embed-youtube

WordPress

SoundCloud

Spotify

Flickr

Vimeo

Vimeo core/embed .wp-block-embed-vimeo

Animoto

CloudUp

Crowdsignal

Dailymotion

Imgur

Issuu

Kickstarter

Mixcloud

Pocket Casts

Reddit

ReverbNation

Screencast

Scribd

Slideshare

SmugMug

Speaker Deck

TikTok (new in 5.4)

TED

Tumblr

VideoPress

WordPress.tv

Amazon Kindle

Pinterest

Wolfram

Facebook

Facebook core/embed .wp-block-embed-facebook

Instagram

Instagram core/embed .wp-block-embed-instagram

Learn more about the Embeds in this support article: Embeds.

What’s Additional CSS

Benefits of using Additional CSS.

Most Common Mistake I Commit while using Additional CSS

1. I often forget to use the dot (.) before any class.
2. Improper Closing tag (curly brackets) like {}.

Additional CSS Codes

Global Setting 

// Applying Smooth Scrolling to all elements
html {
     scroll-behavior: smooth;
}

//Removing Default 2px outline
:focus {
    outline:none;
}

WordPress Style Guide: Elements Specifics CSS

Header & Navigation Menu

Header section can be achieved by both Columns & Group Block.

/* Top Menu */

.wp-block-navigation-submenu {
     border-radius: 12px;
     }

.wp-block-navigation ul li {
    list-style: none;
    padding: 5px;
    border-radius: 16px;
    }

.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    color: blue;
    border: 1px solid blue;
    padding: 6px;
    border-radius: 50px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
   }

Highlighting Current Page in Navigation Bar

1. Try this CSS:

.sidebar li.wp-block-navigation-item.current-menu-item a {
    color: red;
    background-color: yellow;
}

2. Try this CSS:

.sidebar .wp-block-navigation ul{
    flex-direction: column;
}

.wp-block-navigation ul li,.wp-block-navigation ul li a{
    width: 100%;
    text-align: center;
}

    /* Optional: Add a background overlay for the rest of the screen */

body.menu-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 50%;
    width: 50%;
    height: 70%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
   }

.menu-open .wp-block-navigation__responsive-container {
    transform: translateX(0);
   }

 /* Optional overlay */

body.menu-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);

/* Semi-transparent overlay */
    z-index: 9998;
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
   }
}

@media (max-width: 768px) {
.menu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: blue;
   }

// Add "Menu" or "Close" text using ::before 
.menu-toggle::before {
    content: attr(data-text);
    margin-right: 10px;
    color: blue;
    font-size: 16px;
    display: inline-block;
   }

// Change the text dynamically based on aria-expanded 
.menu-toggle[aria-expanded="false"]::before {
    content: "Menu";
   }

.menu-toggle[aria-expanded="true"]::before {
    content: "Close";
   }
}

// Change the WordPress default CSS breakpoints media query 

@media ( min-width: 782px ) {
.wp-block-navigation.nav-top--mobile {
    display: none;
   }
}

@media ( max-width: 781px ) {
.wp-block-navigation.nav-top--desktop {
    display: none;
 }

.wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-container {
   animation: slide-out 0.5s forwards;
   -webkit-animation: slide-out 0.5s forwards;
   padding: var(--wp--style--root--padding-top,2rem) 
   var(--wp--style--root--padding-right,2rem) 
   var(--wp--style--root--padding-bottom,2rem) 
   var(--wp--style--root--padding-left,2rem);
}

.wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-container.is-menu-open {
   animation: slide-in 0.5s forwards;
   -webkit-animation: slide-in 0.5s forwards;
}

 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
   padding-top: calc(2rem + 24px);
}

 .wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-dialog { 
  gap:inherit; 
}

.wp-block-navigation.nav-top--mobile :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)){
    padding: 0;
   }
}

/** animation slide-in-out **/

@keyframes slide-in {
0% {
    -webkit-transform: translateX(100%);
  }

100% {
    -webkit-transform: translateX(0%);
   }
}

@-webkit-keyframes slide-in {
0% {
    transform: translateX(100%);
  }

100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
0% {
    transform: translateX(0%);
  }

100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes slide-out {
0% {
    -webkit-transform: translateX(0%);
  }

100% {
    -webkit-transform: translateX(100%);
  }
}

.wp-block-navigation .wp-block-navigation-iteam:hover {
    color: blue;
    font-weight: bold;
    border-bottom: 1px solid blue
}

Column Reversing⭐ ✨

Method 1: Targeting specific column for Reverse Order

// Column Reverse on Mobile Phone

@media only screen and (max-width: 768px) {
.wpio-right-column {
    order: -1; /* Reverses the order of right column */
   }
}

Method 2: Targeting both column for Reverse Order

Column Radius

/* Column Radius*/
.wpio-column-radius {
    border-radius: 16px;
   }

Paragraph: Text Justification

// To Justify text Alignment
.wpio-justify-text {
    text-align: justify;
   }

.wpio-word-spacing {
    word-spacing: 5px;
   }

Group Block | for Query Loop

Customizing height of Group Block for different Devices

/* CSS for desktop & mobile view */
// Desktop
@media (min-width: 1024px) {
.wcpn-group-block {
    height: 300px; /* Set your desired height */
   }
}

//Mobile Device
@media (max-width: 1024px) {
.wcpn-group-block {
    height: auto; /* It ensures no height restriction */
   }

Row Block as Marquee for “Our Clients” section

Buttons

Default syntax of button block is

.wp-block-buttons {
    //CSS Properties Goes here.
}

Defining button Colors in different States.

Observation: I think, the following code is used in WP Classic Themes. Why? Compare wp-element-button and wp-block-button

.wp-block-buttons:hover {
    background-color: --wp--preset--color--contrast-2;
    color: white;
   }


:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
    background-color: var(--wp--preset--color--contrast-2);
    border-color: var(--wp--preset--color--contrast-2);
    color: var(--wp--preset--color--base);
}

I’m building my website on WordPress CRM and currently, I’m working on the “header Section”. In the initial phase, when I’m accessing the site on any device, the header should be transparent with the Site logo, the site name or tagline and menus. This should be easily accessible with 100 VH.When I’m scrolling my site downward. I want additional CSS to make my header background white, the logo size should be reduced by at least 20% and the site name should be hidden.

/* Initial header styles */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent! important;
    transition: background-color 0.1s ease;
}

.site-header .logo img {
    max-height: 100px; /* Adjust as needed */
    transition: max-height 0.1s ease;
}

.site-header .site-info {
    display: block; /* Initially shown */
}

.site-header .site-tagline {
    display: block; /* Initially shown */
}

.site-header .site-tagline, .site-header .site-title {
    color: #fff; /* Adjust text color */
    margin: 0;
}

.site-header .site-navigation {
    /* Your menu styles */
}

/* Scrolled header styles */

body.scrolled .site-header {
    background-color: #fff !important;
}

body.scrolled .site-header .logo img {
    max-height: 80px; /* Reduce logo size */
}

body.scrolled .site-header .site-info {
    display: none; /* Hide site info */
}

Floating Bar

Reference Site: Learn with Vivek

Also learn how the developer has built the “Timeline” section.

<style>

        #floating-bar {

            position: fixed;

            bottom: 10px;

            left: 50%;

            transform: translateX(-50%);

            padding: 10px 20px;

            background-color: #2b2b2b;

            border-radius: 10px;

            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);

            z-index: 1000;

            width: auto;

            display: none; /* Initially hidden */

            align-items: center;

            justify-content: center;

            color: white;

        }

        #floating-bar a {

            display: inline-block; /* Ensures the link behaves like a block-level element */

        }

        #floating-bar button {

            margin-left: 10px;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            background-color: #d8613c;

            color: white;

            cursor: pointer;

            font-size: 16px;

            width: auto;

        }

        #floating-bar button:hover {

            background-color: #c54f2f;

        }

        @media (max-width: 600px) {

            #floating-bar {

                width: 90%; /* Adjust width as needed */

                display: flex;

                justify-content: space-between;

                padding: 10px;

                box-sizing: border-box;

                left: 50%;

                transform: translateX(-50%);

                border-radius: 10px;

            }

            #floating-bar span {

                flex: 1; /* Allows text to take up available space */

                text-align: center; /* Center text horizontally */

            }

            #floating-bar button {

                width: 100%; /* Adjust width as needed */

                padding: 12px;

                margin: 0;

                font-size: 16px; /* Increased text size for mobile */

            }

        }

 </style>

<div id=”floating-bar” style=”display: flex;”>

        <span>Start Your Journey </span>

        <a href=”https://learnwithvivek.com/pricing-in/” rel=”noopener”>

            <button>Join Now!</button>

        </a>

</div>

<script type: “text/javascript”>

        window.addEventListener(‘scroll’, function() {

            const floatingBar = document.getElementById(‘floating-bar’);

            if (window.scrollY > 90) {

                floatingBar.style.display = ‘flex’; // Show the bar when scrolled

            } else {

                floatingBar.style.display = ‘none’; // Hide the bar when at the top

            }

        });

        // Initial check to hide the floating bar on page load

        window.addEventListener(‘load’, function() {

            const floatingBar = document.getElementById(‘floating-bar’);

            floatingBar.style.display = ‘none’; // Ensure it’s hidden on initial load

        });

</script>

Forminator Additional CSS

.forminator-input {
    border: 1px solid EDEDED;
    line-height: 28px;

border-radius: 25px;

}

.forminator-textarea {

border: 1px solid EDEDED;

border-radius: 12px;

}

.forminator-button-submit {

border-radius: 25px;

padding: 10px 25px;

}

// Glass Effect From https://css.glass 
.wpio-glass {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.5px);
    -webkit-backdrop-filter: blur(8.5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

color: var(--button--color-text-active);
background-color: var(--button--color-background-active);

// Button Placeholder style - Since buttons appear in various blocks,  let’s use a placeholder to keep them all in-sync

button:active, .button:active, input:active[type="submit"], .wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active

%button-style { @include crop-text(var(--button--line-height));
color: var(--button--color-text);
cursor: pointer;
font-weight: var(--button--font-weight);
font-family: var(--button--font-family);
font-size: var(--button--font-size);
background-color: var(--button--color-background);
border-radius: var(--button--border-radius);
border-width: 0;
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
transition: var(--button--transition-hover);
&:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}

&:hover,
&:focus,
&.has-focus {
    color: var(--button--color-text-hover);
    background-color: var(--button--color-background-hover);
}
}

// Onsale Placeholder style - Since buttons appear in various blocks, let’s use a placeholder to keep them all in-sync

%onsale-style {
    border-radius: 100%;
    border: none;
    background-color: var(--global--color-alert-warning);
    color: var(--global--color-foreground-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--global--font-size-xs);
    font-weight: 700;
    font-family: var(--global--font-primary);
    min-height: 3.236rem;
    min-width: 3.236rem;
    padding: 0.202rem;
    position: absolute;
    text-align: center;
    text-transform: none;
    line-height: 3.236;
    top: -0.5em;
    left: -0.5em;
    margin: 0;
    z-index: 9;
    width: 70px;
    height: 70px;

&.preorder {
    width: unset;
    height: unset;
   }
}