Skip to content

Usage Guide

Jump to bottom
Gabriela Carral edited this page Apr 30, 2025 · 1 revision

Theme Configuration

  1. Theme Options

    • Navigate to "Theme Options" in WordPress admin
    • Configure global settings:
      • Header options (logo, navigation, CTA button)
      • Footer options (logo, columns, copyright)
      • Social media links
      • Default colors and typography

  2. Custom Blocks The theme includes several pre-built blocks that you can use in any page or post:

    • Hero Section

      • Full-width header section
      • Supports background image/color
      • Title, description, and CTA buttons
      • Optional overlay and animation effects

    • Cards Grid

      • Display content in responsive card layout
      • Customizable number of columns (1-4)
      • Support for images, titles, text, and buttons
      • Multiple style variations

    • Call to Action (CTA)

      • Attention-grabbing sections
      • Customizable background and text colors
      • Support for buttons and links
      • Various layout options

    • Text Block

      • Rich text content with custom width
      • Background color options
      • Text alignment controls
      • Animation support

    • Video Block

      • Embed videos with poster images
      • Support for YouTube/Vimeo
      • Optional captions
      • Responsive playback

  3. Advanced Custom Fields

    • The theme uses ACF PRO for all custom fields
    • Field groups are version controlled in inc/acf-field-groups.json
    • To modify fields:
      1. Make changes in WordPress admin
      2. Export to JSON using ACF
      3. Replace the existing field groups file

  4. Styling Customization

    • SCSS files are organized by component and block
    • Main style variables in assets/scss/_variables.scss
    • Custom mixins in assets/scss/_mixins.scss
    • Block-specific styles in assets/scss/blocks/
    • Component styles in assets/scss/components/

  5. JavaScript Customization

    • Main entry point: assets/js/src/main.js
    • Block-specific JS in assets/js/src/blocks/
    • Custom components in assets/js/src/components/
    • Editor customizations in assets/js/src/editor/

Development Tips

  1. Local Development

    # Start development server
npm run dev

# Watch for file changes
# This will automatically:
# - Compile SCSS to CSS
# - Bundle JavaScript
# - Optimize images
# - Reload browser

  2. Creating New Blocks

    1. Add block template to template-parts/flexible/
    2. Register block in inc/blocks.php
    3. Add styles in assets/scss/blocks/
    4. Add JavaScript in assets/js/src/blocks/

  3. Theme Customization

    • Use WordPress customizer for basic settings
    • Extend theme options using ACF PRO
    • Follow BEM methodology for CSS
    • Use template parts for reusable components

  4. Production Deployment

    # Build production assets
npm run build

# Create distributable ZIP
npm run zip

Best Practices

  1. Performance

    • Optimize images before upload
    • Use lazy loading for images
    • Minimize third-party scripts
    • Enable browser caching

  2. Accessibility

    • Use semantic HTML
    • Include ARIA labels
    • Ensure keyboard navigation
    • Maintain color contrast

  3. SEO

    • Use proper heading hierarchy
    • Add alt text to images
    • Optimize meta descriptions
    • Create XML sitemap

  4. Security

    • Keep WordPress core updated
    • Update plugins regularly
    • Use strong passwords
    • Implement security headers

For more detailed information about development standards, please refer to our Code Standards documentation.

Clone this wiki locally