Free

npx @wordpress/create-block static-block

npm install --save-dev style-loader css-loader sass-loader

if (!is_user_logged_in()){
    wp_redirect(esc_url(site_url('/')));
    exit;
}

function wpflames_localize_files() {
  wp_localize_script('main-js', 'wpflamesData', array(
    'root_url' => get_site_url(),
    'nonce' => wp_create_nonce('wp_rest')
  ));
}
add_action('wp_enqueue_scripts', 'wpflames_localize_files');

This code is a WordPress function named wpflames_localize_files. Its purpose is to provide data to the scripts associated with a WordPress theme or plugin. Here’s a detailed explanation of what it does:

1. wp_localize_script function: This function allows sending data from PHP to JavaScript scripts. In this case, the script named ‘main-js’ receives the data. The wpflamesData is an object that contains two pieces of data:

• 'root_url': Receives the result of get_site_url(), which returns the base URL of the WordPress installation.
• 'nonce': A unique security token created by the wp_create_nonce('wp_rest') function, which can be used in WordPress REST API calls to enhance the security of the site.

1. add_action call: This is part of the WordPress hook system. The wp_enqueue_scripts is a specific event that WordPress triggers when loading scripts and stylesheets. We register our wpflames_localize_files function with this event, so the function runs on every page load.

In summary, this code can be used in a WordPress theme or plugin to make certain PHP-based data accessible to JavaScript, as well as to provide secure methods for using the WordPress REST API.

Initialize package.json

npm init -y

Install wp-cli

npm install wp-cli --save-dev

Install WordPress Scripts for Webpack

npm install @wordpress/scripts --save-dev

Install Sass Loader

npm install sass-loader sass webpack --save-dev

Install MiniCssExtractPlugin

npm install --save-dev mini-css-extract-plugin

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './assets/src/js/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'assets/dist'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
};

package.json

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "dev": "wp-scripts start",
    "devFast": "wp-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Enqueue compiled JavaScript in WordPress

function enqueue_theme_scripts() {
    wp_enqueue_script('main-js', get_template_directory_uri() . '/assets/dist/main.js', array(), '1.0.0', true);
    wp_enqueue_style('style-css', get_template_directory_uri() . '/assets/dist/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_theme_scripts');

// =========================================================================
// ADD FLAG ICON TO THE WORDPRESS NAV MENU
// =========================================================================
function add_custom_menu_item ($items, $args) {
    ob_start();
    $items .= '<li class="menu-item flag">';
        $items .= '<a href="#" target="_blank"><img class="flag" src="'.THEME.'/assets/images/flags/flag-hu.svg" alt=""/></a>';
    $items .= '</li>';
    return $items;
}
add_filter( 'wp_nav_menu_items', 'add_custom_menu_item', 10, 2 );

flag-hu.svg

<svg version="1.1" id="flag-hu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 50 34" style="enable-background:new 0 0 50 34;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#CE2939;}
	.st1{fill:#FFFFFF;}
	.st2{fill:#477050;}
</style>
<rect id="black_stripe" y="0" class="st0" width="50" height="34"/>
<rect id="red_stripe" y="11.3" class="st1" width="50" height="22.7"/>
<rect id="gold_stripe" y="22.7" class="st2" width="50" height="11.3"/>
</svg>

flag-de.svg

<svg version="1.1" id="flag-de" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 50 34" style="enable-background:new 0 0 50 34;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#DD0000;}
	.st1{fill:#FFCE00;}
</style>
<rect id="black_stripe" y="0" width="50" height="34"/>
<rect id="red_stripe" y="11.4" class="st0" width="50" height="22.6"/>
<rect id="gold_stripe" y="22.6" class="st1" width="50" height="11.4"/>
</svg>

// =========================================================================
// Chevron to nav menu has children
// =========================================================================
function parent_menu_dropdown( $item_output, $item, $depth, $args ) {
    
    if ( is_nav_menu( 'Header Menu' ) && ! empty( $item->classes ) && in_array( 'menu-item-has-children', $item->classes ) ) {
        return $item_output . '<svg class="chevron-down" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="#ffffff" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>';
    }
    
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'parent_menu_dropdown', 10, 4 );

1st level sub menu

<ul class="sub-menu-1">

2nd level sub menu

<ul class="sub-menu-2">

<?php

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $submenu_class = 'sub-menu-' . ($depth + 1); 
        $output .= "\n$indent<ul class=\"$submenu_class\">\n";
    }
}

wp_nav_menu(array(
    'theme_location' => 'desktop_menu',
    'menu_class'     => 'desktop-menu',
    'walker'         => new Custom_Walker_Nav_Menu(),
));
<

// Add Google Tag code which is supposed to be placed after opening body tag.
function wpdoc_add_custom_body_open_code() {
	if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { 
		gtm4wp_the_gtm_tag(); 
	} 
}
add_action( 'wp_body_open', 'wpdoc_add_custom_body_open_code' );