WordPress, Genesis Framework and Storefront customization tutorials

Home » Other

Other

WP Admin Inline CSS

// =========================================================================
// WPADMIN Inline CSS
// =========================================================================
function admin_inline_css() {
    echo '<style>
        .updraftmessage.error.updraftupdatesnotice.updraftupdatesnotice-updatesexpired {
            display: none;
        }
    </style>';
}
add_action('admin_head', 'admin_inline_css');
// =========================================================================
// Add Custom Link to WPAdminBar - WP Migrate
// =========================================================================
add_action('admin_bar_menu', function($wp_admin_bar) {
    $wp_admin_bar->add_node([
        'id'    => 'wp_migrate_admin_bar_menu',
        'title' => 'WP Migrate',
        'href'  => '/wp-admin/tools.php?page=wp-migrate-db-pro',
    ]);
}, 999);

Duplicate Posts

<?php
function duplicate_post_as_draft(){
    global $wpdb;
    if (! (isset($_GET['post']) || isset($_POST['post']) || (isset($_REQUEST['action']) && 'duplicate_post_as_draft' == $_REQUEST['action']))) {
        wp_die('No post to duplicate has been supplied!');
    }

    $post_id = (isset($_GET['post']) ? $_GET['post'] : $_POST['post']);
    $post = get_post($post_id);

    $current_user = wp_get_current_user();
    $new_post_author = $current_user->ID;

    if (isset($post) && $post != null) {
        $args = array(
            'comment_status' => $post->comment_status,
            'ping_status'    => $post->ping_status,
            'post_author'    => $new_post_author,
            'post_content'   => $post->post_content,
            'post_excerpt'   => $post->post_excerpt,
            'post_name'      => $post->post_name,
            'post_parent'    => $post->post_parent,
            'post_password'  => $post->post_password,
            'post_status'    => 'draft',
            'post_title'     => $post->post_title,
            'post_type'      => $post->post_type,
            'to_ping'        => $post->to_ping,
            'menu_order'     => $post->menu_order
        );

        $new_post_id = wp_insert_post($args);

        $taxonomies = get_object_taxonomies($post->post_type);
        foreach ($taxonomies as $taxonomy) {
            $post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));
            wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
        }

        $post_meta_infos = $wpdb->get_results("SELECT meta_key, meta_value FROM $wpdb->postmeta WHERE post_id=$post_id");
        if (count($post_meta_infos)!=0) {
            $sql_query = "INSERT INTO $wpdb->postmeta (post_id, meta_key, meta_value) ";
            foreach ($post_meta_infos as $meta_info) {
                $meta_key = $meta_info->meta_key;
                $meta_value = addslashes($meta_info->meta_value);
                $sql_query_sel[]= "SELECT $new_post_id, '$meta_key', '$meta_value'";
            }
            $sql_query.= implode(" UNION ALL ", $sql_query_sel);
            $wpdb->query($sql_query);
        }

        wp_redirect(admin_url('edit.php?post_type='.$post->post_type));
        exit;
    } else {
        wp_die('Post creation failed, could not find original post: ' . $post_id);
    }
}
add_action('admin_action_duplicate_post_as_draft', 'duplicate_post_as_draft');

function duplicate_post_link($actions, $post) {
    if (current_user_can('edit_posts')) {
        $actions['duplicate'] = '<a href="' . wp_nonce_url('admin.php?action=duplicate_post_as_draft&post=' . $post->ID, basename(__FILE__), 'duplicate_nonce') . '" title="Duplicate this item" rel="permalink">Duplicate</a>';
    }
    return $actions;
}
add_filter('post_row_actions', 'duplicate_post_link', 10, 2);
add_filter('page_row_actions', 'duplicate_post_link', 10, 2);

Add Custom Block Icon to WordPress Block

editor.svg

.editor-block-list-item-create-block-BLOCK-NAME
{
	.block-editor-block-types-list__item-icon{
		background: url('../../assets/images/block-icon.svg') no-repeat;
		height: 24px;
		width: 24px;
		display: block;
		margin: auto;
		padding: 0;
		.block-editor-block-icon.has-colors{
			.dashicon.dashicons.dashicons-smiley{
				&::before{
					content: '';
				}
			}
		}
	}
}

wp_localize_script

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.

Webpack and @wordpress/scripts

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 WordPress Nav Menu

// =========================================================================
// 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>

Add chevron to nav menu has children

// =========================================================================
// 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 );

Nav Walker – custom sub-menu class

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(),
));
<

GTM4WP

// 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' );

Internationalization

Define the text domain in the style.css of the theme.

/*!
Theme Name: WPFlames
Text Domain: wpflames
Theme URI: http://gaborflamich.com/
Author: Gabor Flamich

You should use escaping functions for sanitizing data:

<h1><?php esc_html_e( 'Front Page', 'wpflames' ); ?></h1>

Instead of this

<h1>Front Page</h1>

Generating POT file with WP-CLI

wp i18n make-pot wpflames-theme

Load textdomain in functions.php

// =========================================================================
// Load textdomain for internationalization
// =========================================================================
function wpflames_load_theme_textdomain() {
    load_theme_textdomain( 'wpflames', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'wpflames_load_theme_textdomain' );

Poedit

You can also use Poedit locally for translating.

POT (Portable Object Template) files

This file contains the original strings (in English) in your plugin/theme

#: plugin-name.php:123
msgid "Page Title"
msgstr ""

PO (Portable Object) files

You can take the POT file and translate the msgstr sections in your own language. The result is a PO file with the same format as a POT, but with translations and some specific headers. There is one PO file per language.

MO (Machine Object) files

MO file is a “compiled” version of the PO file.