Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Dynamic menu (Polylang example)
  • Classic editor block <p> tags missing
  • Classic block image styles
  • Add menu item to Cwicly menu
  • Modify WooCommerce default number of products per page
  • Loading animation

Was this helpful?

  1. Miscellaneous

Code Snippets

Here are a few useful code snippets to use with Cwicly

Dynamic menu (Polylang example)

While this is more geared towards Polylang, this can be applied to any type of condition.

Apply a specific menu ID with conditions to all Cwicly Menu blocks or targetted Menu blocks.

Make sure to change the Menu ID values to ones corresponding to menus on your installation.

/**
 * Modify a specific - or not - Cwicly Menu block menu ID based on various conditions.
 * Function using the `render_block_data` filter-hook.
 *
 * @param array         $parsed_block The block being rendered.
 * @param array         $source_block An un-modified copy of $parsed_block, as it appeared in the source content.
 * @param WP_Block|null $parent_block If this is a nested block, a reference to the parent block.
 *
 * @return array
 */
function cc_render_block_data_filter($parsed_block, $source_block, $parent_block)
{

    // Make sure that we are only modifying the Cwicly Menu block and that it has attributes.
    if ($parsed_block['blockName'] === 'cwicly/menu' && isset($parsed_block['attrs'])) {

        // Set conditions to true to target all Cwicly Menu blocks
        $conditions = true;

        /*
        // Optional: target specific menu with block ID
        if (isset($parsed_block['attrs']['id']) && $parsed_block['attrs']['id'] === 'menu-c413s33f') {
        $conditions = true;
        } else {
        $conditions = false;
        }
         */

        if ($conditions) {
            // Default language slug
            $lang_slug = '';
            // Get current language slug if Polylang is installed
            if (function_exists('pll_current_language')) {
                $lang_slug = pll_current_language('slug');
            } else {
                $lang_slug = '';
            }

            // Set menu ID for each language slug (or default)
            if ($lang_slug === 'en') {
                $parsed_block['attrs']['menuSelected'] = "10"; // Menu ID
            } else if ($lang_slug === 'fr') {
                $parsed_block['attrs']['menuSelected'] = "11"; // Menu ID
            } else {
                // Default menu ID
                $parsed_block['attrs']['menuSelected'] = "10"; // Menu ID
            }
        }
    }
    return $parsed_block;
}
add_filter('render_block_data', 'cc_render_block_data_filter', 10, 3);

Classic editor block <p> tags missing

If you don't have any other block on your post than one or multiple Classic Editor blocks, you might notice that no paragraph breaks are applied.

You can add the following code to your WordPress theme's functions.php file or use a custom snippet plugin to automatically apply <p> tags.

/**
 * Registers the apply_wpautop_if_no_blocks function as a filter for the the_content hook, 
 * which means that it will be called for every post or page on your site. 
 * 
 * The function checks if the post has blocks, and if it does not, it applies wpautop to the content.
 */
function cc_apply_wpautop_if_no_blocks( $content ) {
    // Check if the post has blocks
    if ( has_blocks() ) {
      // The post has blocks, so don't apply wpautop
      return $content;
    } else {
      // The post has no blocks, so apply wpautop
      return wpautop( $content );
    }
  }
  add_filter( 'the_content', 'cc_apply_wpautop_if_no_blocks' );

Classic block image styles

The styles for Classic Editor block images aren't retained in the Cwicly Theme. If you still use the Classic Editor and want to apply the default styling that comes with figures and images, add the following CSS snippet to a Cwicly global stylesheet.

/*
 * Default WP Alignment Classes
 *****************************************************************************/

.aligncenter,.alignleft,.alignright {
    display: block;
    padding: 0;
}

.aligncenter {
    float: none;
    margin: .5em auto 1em;
}

.alignright {
    float: right;
    margin: .5em 0 1em 1em;
}

.alignleft {
    float: left;
    margin: .5em 1em 1em 0;
}

.wp-caption {
    padding: 5px 0;
    border: 1px solid #555;
    background: #444;
    text-align: center;
}

.wp-caption img {
    display: inline;
}

.wp-caption p.wp-caption-text {
    margin: 5px 0 0;
    padding: 0;
    text-align: center;
    font-size: 75%;
    font-weight: 100;
    font-style: italic;
    color: #ddd;
}

Add menu item to Cwicly menu

/**
 * Function for `wp_get_nav_menu_items` filter-hook.
 *
 * @param array  $items An array of menu item post objects.
 * @param object $menu  The menu object.
 * @param array  $args  An array of arguments used to retrieve menu item objects.
 *
 * @return array
 */
function cc_cust_get_nav_menu_items_filter($items, $menu, $args)
{
    if (is_admin()) {
        return $items;
    }

    // Only apply changes to specific menu
    // if ($menu->term_id !== 33) {
    //     return $items;
    // }

    $e = new stdClass();

    $e->title = "A new Title";
    $e->url = "/your-url";
    $e->menu_order = 500;
    $e->post_type = "nav_menu_item";
    $e->type = "custom";
    $e->object = "custom";
    $e->object_id = 0;
    $e->db_id = 0;
    $e->menu_item_parent = 0;
    $e->ID = mt_rand();
    $e->xfn = "current";
    $e->target = "";
    $e->post_excerpt = "";
    $e->classes = []; // CSS classes

    $items[] = $e;

    return $items;
}
add_filter('wp_get_nav_menu_items', 'cc_cust_get_nav_menu_items_filter', 10, 3);

Modify WooCommerce default number of products per page

A WooCommerce shop page can have up to 16 products by default. When Inheriting the Query from the URL, use the code snippet below to modify the number of products output for the query.

/**
 * If Inheriting the Query from URL, change the number of products that are displayed per page (shop page, cateogyr page, etc.)
 */
add_filter('loop_shop_per_page', 'cc_loop_shop_per_page', 20);

function cc_loop_shop_per_page($current)
{
    // $cols contains the current number of products per page
    $current = 20; // Change this to your number of products
    return $current;
}

Loading animation

.blockclass::before {
 border-right-color: transparent;
 border-top-color: transparent;
 border-bottom-color: transparent;
}


@keyframes spin {
 100% {
   transform: rotate(360deg);
 }
}

Last updated 2 years ago

Was this helpful?

🗃️