Gutenburg block editor styles

New JS file (eg theme/js/editor.js)

wp.domReady( () => {
    wp.blocks.registerBlockStyle( ‘core/paragraph’, [
        {
            name: ‘default’,
            label: ‘Default’,
            isDefault: true,
        },
        {
            name: ‘intro’,
            label: ‘Intro’,
        }
    ]);
} );

 

New editor CSS file (eg theme/my-editor.css)


/* Block editor styles */
p.is-style-intro {font-size:30px!important;line-height:40px!important;} /* seem to need "!important" for font-size & line height */
/* tweaks to make block editor preview look more accurate */
.block-editor-block-preview__content p.is-style-intro {font-size:40px!important;line-height:60px!important; font-weight: bold;} /* little preview */
.block-editor-block-switcher__preview p.is-style-intro {font-size:40px!important;line-height:60px!important;} /* larger pop-out preview */

Functions file additions

/**
 * Gutenberg scripts and styles
 * @link https://www.billerickson.net/block-styles-in-gutenberg/
 *
 * enqueue_block_editor_assets = load in backend only
 * enqueue_block_assets = load in front and backend
 */
function be_gutenberg_scripts() {
    wp_enqueue_script(
        ‘be-editor’,
        get_stylesheet_directory_uri() . ‘/js/editor.js’,
        array( ‘wp-blocks’, ‘wp-dom’ ),
        filemtime( get_stylesheet_directory() . ‘/js/editor.js’ ),
        true
    );
}
add_action( ‘enqueue_block_editor_assets’, ‘be_gutenberg_scripts’ );
function be_gutenberg_styles() {
    wp_enqueue_style(
        ‘be-editor-styles’,
        get_stylesheet_directory_uri() . ‘/my-editor-styles.css’,
        false,
        filemtime( plugin_dir_path( __FILE__ )  . ‘my-editor-styles.css’ )
    );
}
add_action( ‘enqueue_block_editor_assets’, ‘be_gutenberg_styles’ );

 

And style for front end!
p.is-style-intro {font-size: 30px;line-height: 40px;color:magenta;}

Admin dashboard notes and help tab content


// dashboard notes
function add_custom_dashboard_widgets() {
wp_add_dashboard_widget(
'wpexplorer_dashboard_widget', // Widget slug.
'Admin notes', // Title.
'custom_dashboard_widget_content' // Display function.
);
}
add_action( 'wp_dashboard_setup', 'add_custom_dashboard_widgets' );
function custom_dashboard_widget_content() {
echo "

Hello, please remember to stay away from the plugins menu.

Here are some important notes:

  • Datatables The data table ID must be set to the same as the product ID it is linked to.

If you have any need of assistance, please don't hesitate to contact us under:

  • https://www.d2creative.co.uk/
  • 01392 877116

";
}
// add help tab content
function setup_help_tab() {
$screen = get_current_screen();
if ( 'post' == $screen->post_type ) {
get_current_screen()->add_help_tab( array(
'id' => 'post',
'title' => ( 'How to Publish a Blog Post' ),
'content' => '

To publish a blog post, please follow the steps below.

  • Locate big, blue Publish button.
  • Click it.
  • Well done.

',
) );
}
}
// add more here
add_action( 'admin_head', 'setup_help_tab' );

Change “Posts” to “News” in WP Admin menu

function revcon_change_post_label() {
global $menu;
global $submenu;
$menu[5][0] = 'News';
$submenu['edit.php'][5][0] = 'News';
$submenu['edit.php'][10][0] = 'Add News';
$submenu['edit.php'][16][0] = 'News Tags';
}
function revcon_change_post_object() {
global $wp_post_types;
$labels = &$wp_post_types['post']->labels;
$labels->name = 'News';
$labels->singular_name = 'News';
$labels->add_new = 'Add News';
$labels->add_new_item = 'Add News';
$labels->edit_item = 'Edit News';
$labels->new_item = 'News';
$labels->view_item = 'View News';
$labels->search_items = 'Search News';
$labels->not_found = 'No News found';
$labels->not_found_in_trash = 'No News found in Trash';
$labels->all_items = 'All News';
$labels->menu_name = 'News';
$labels->name_admin_bar = 'News';
}

add_action( 'admin_menu', 'revcon_change_post_label' );
add_action( 'init', 'revcon_change_post_object' );

Custom post type with custom taxonomy in permalink

Custom post type

// Case studies custom post type
// based on https://wisdmlabs.com/blog/add-taxonomy-term-custom-post-permalinks-wordpress/
add_action('init', 'projects_cpt');
function projects_cpt() {
$labels = array(
'name' => 'Case studies',
'singular_name' => 'Case study',
'add_new' => 'Add New',
'add_new_item' => 'Add New Case study',
'edit_item' => 'Edit Case study',
'new_item' => 'New Case study',
'all_items' => 'All Case studies',
'view_item' => 'View Case study',
'search_items' => 'Search Case studies',
'not_found' => 'No Case studies found',
'not_found_in_trash' => 'No Case studies found in Trash',
'parent_item_colon' => '',
'menu_name' => 'Case studies'
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'taxonomies' => array('industrytype'),
'rewrite' => array('slug' => 'industries/%casestudycategory%/case-studies', 'with_front' => false),
//Adding custom rewrite tag
'capability_type' => 'post',
//'has_archive' => 'projectsarchives',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title', 'editor', 'author', 'thumbnail', 'excerpt'),
);
register_post_type('casestudy', $args);

$labels = array(
‘name’ => ‘Case study Categories’,
‘singular_name’ => ‘Case studies’,
‘search_items’ => ‘Search Case study Categories’,
‘all_items’ => ‘All Case study Categories’,
‘parent_item’ => ‘Parent Case study Category’,
‘parent_item_colon’ => ‘Parent Case study Category:’,
‘edit_item’ => ‘Edit Case study Category’,
‘update_item’ => ‘Update Case study Category’,
‘add_new_item’ => ‘Add New Case study Category’,
‘new_item_name’ => ‘New Case study Category’,
);

$args = array(
‘hierarchical’ => true,
‘rewrite’ => array(‘slug’ => ‘case-studies’),
‘show_in_nav_menus’ => true,
‘show_admin_column’ => true,
‘labels’ => $labels
);

register_taxonomy(‘casestudycategory’, ‘casestudy’, $args);

unset($labels);
unset($args);
}

add_filter(‘post_type_link’, ‘projectcategory_permalink_structure’, 10, 4);
function projectcategory_permalink_structure($post_link, $post, $leavename, $sample) {
if (false !== strpos($post_link, ‘%casestudycategory%’)) {
// get all terms
$casestudycategory_type_term = get_the_terms($post->ID, ‘casestudycategory’);

if (!empty($casestudycategory_type_term)){
// find primary term
$primarycat = ‘x’;
$primarray = get_post_meta($post->ID,’_yoast_wpseo_primary_casestudycategory’);
foreach ( $casestudycategory_type_term as $term ) {
if( $primarray[0] == $term->term_id ) {
// this is a primary category
$primarycat = $term->slug;
}
}
if ($primarycat == ‘x’) {
$primarycat = array_pop($casestudycategory_type_term)->slug;
}
$post_link = str_replace(‘%casestudycategory%’, $primarycat, $post_link);
} else {
$post_link = str_replace(‘%casestudycategory%’, ‘uncategorized’, $post_link);
}
}
return $post_link;
}
// redirect automatic-casestudy-archive pages to actual pages
function custom_event_rewrite_one() {
add_rewrite_rule(    ‘^industries/([^/]+)/case-studies/?$’,
‘index.php?pagename=industries%2F$matches[1]%2Fcase-studies’,
‘top’);
add_rewrite_rule(    ‘^industries/([^/]+)/?$’,
‘index.php?pagename=industries%2F$matches[1]’,
‘top’);
}
add_action(‘init’,’custom_event_rewrite_one’);

Shortcode to display list of custom posts

// shortcode to list case studies with option to filter by casestudy category [listcasestudies cscat="automotive"]
function cdk_get_casestudies( $atts ) {

$atts = shortcode_atts( array(
‘cscat’ => ”
), $atts );

$args = [
‘post_type’      => ‘casestudy’,
‘posts_per_page’ => ‘-1’,
‘order’          => ‘DESC’,
‘orderby’        => ”,
];

if ( $atts[‘cscat’] ) {
$args[‘tax_query’] = [
[
‘taxonomy’ => ‘casestudycategory’,
‘field’    => ‘slug’,
‘terms’     => array( sanitize_title( $atts[‘cscat’] ) )
]
];
}

$the_query2 = new WP_Query( $args );
$output2 = ”;

if ( $the_query2->have_posts() ) {
while ( $the_query2->have_posts() ) {
$the_query2->the_post();

$terms = get_the_terms( get_the_ID(), ‘casestudycategory’ );
$all_cats = array();

$primarycat = ‘x’;
$primarray = get_post_meta(get_the_ID(),’_yoast_wpseo_primary_casestudycategory’);

if ( $terms && !is_wp_error( $terms ) ) {
foreach ( $terms as $term ) {
$all_cats[] = $term->name . ‘(‘.$term->term_id.’)’;

if( $primarray[0] == $term->term_id ) {
// this is a primary category
$primarycat = $term->slug;
}
}
}
$all_cats_str = join( “, “, $all_cats );
$first_cat_slug = $terms[0]->slug;
if ($primarycat == ‘x’) {
$primarycat = $first_cat_slug;
}

if ( $atts[‘cscat’] ) { // display for specific category
$output2 .= ‘<p> * <a href=”‘ . get_permalink() .'”>’. get_the_title() .'</a></p>’;
} else {
$output2 .= ‘<p> * <a href=”‘ . get_permalink() .'”>’. get_the_title() .'</a></p>’;
}
$output2 .= ‘<p>primary cat = ‘.$primarycat.’
<br>all = ‘.$all_cats_str.'</p>’;
}
wp_reset_postdata();
} else {
$output2 .= ‘<p>No case studies…</p>’;
}

return $output2;

}
add_shortcode(‘listcasestudies’, ‘cdk_get_casestudies’);

Elementor addons

https://livemeshelementor.com/posts-carousel/
posts carosel

https://www.elementoraddons.com/elements-addon-elements/background-image-slider/
Background image slider

Animate loading background image

button.alm-load-more-btn::after {position: absolute;padding: 0; margin: 0; line-height: 1; height: 24px; width: 24px; content: url(http://ceramicx.d2test.co.uk/wp-content/uploads/2019/08/load-more_trans-bg4.png);}
button.alm-load-more-btn.loading::after { animation: spin 700ms infinite linear; }

Keep mega menu open to style

/* mega menu - force menu 213 to stay open
#mega-menu-wrap-primary #mega-menu-primary[data-effect="fade_up"] li.mega-menu-item#mega-menu-item-213 > ul.mega-sub-menu { opacity: 1; transform: translate(0, 0); }
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item#mega-menu-item-213 > ul.mega-sub-menu { visibility: visible !important; }
end force menu 213 open */

Shortcode to display child or sibling pages

/* shorcode for menu [wpb_childpages]
Show children (1 level), if no children show sibbings (unless top level page)
*/
function wpb_list_child_pages() {
global $post;
$children = get_pages( array( 'child_of' => $post->ID ) );
if ( is_page() && count( $children ) > 0 ) {
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0&depth=1' ); // shows children
} else {
if ($post->post_parent == 0) { // $post->post_parent = 0 for top level (no parents) - don't show other top level pages!
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0&include=' . $post->ID ); // shows just this page
} else {
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' ); // shows siblings
}
}
if ( $childpages ) {
$string = '

    ' . $childpages . '

';
}

return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');

Make shortcode dynamic in Elementor

Problem adding shortcode with static value to template (which is used for all post or products etc) eg

[premmerce_get_bundles_by_main_product_id id="X"]

Create new shortcode, in corporating original shortcode:

function so_extend_frequent_bought_shortcode() {
global $product;
$id = $product->get_id();

return do_shortcode( '[premmerce_get_bundles_by_main_product_id id="' . $id . '"]');
}
add_shortcode( 'my_new_shortcode', 'so_extend_frequent_bought_shortcode' );

Similarily, to add dynamic Javascript to elementor product template:

// shortcode to add tab-click js to product pages
function redraw_data_table_shortcode( $atts ) {
global $product;
$id = $product->get_id();
$output = '
';
return $output;
}
add_shortcode( 'redrawdatatable', 'redraw_data_table_shortcode' );

News custom post type

// News custom post type
function cw_post_type_news() {

$supports = array(
'title', // post title
'editor', // post content
'author', // post author
'thumbnail', // featured images
'excerpt', // post excerpt
'custom-fields', // custom fields
//'comments', // post comments
'revisions', // post revisions
//'post-formats', // post formats
);

$labels = array(
'name' => _x('News', 'plural'),
'singular_name' => _x('News', 'singular'),
'menu_name' => _x('News', 'admin menu'),
'name_admin_bar' => _x('News', 'admin bar'),
'add_new' => _x('Add new', 'add new'),
'add_new_item' => __('Add new News'),
'new_item' => __('New News'),
'edit_item' => __('Edit News'),
'view_item' => __('View News'),
'all_items' => __('All News'),
'search_items' => __('Search News'),
'not_found' => __('No news found.'),
);

$args = array(
'supports' => $supports,
'labels' => $labels,
'public' => true,
'query_var' => true,
'rewrite' => array('with_front' => false, 'slug' => 'information/media/in-the-press'), // with_front=false do not use same slug as blog
'has_archive' => true,
'hierarchical' => false,
);
register_post_type('news', $args);
}
add_action('init', 'cw_post_type_news');