I've built an ACF block. As per the documentation, I've created the following via functions.php:
<?php
/**
* Register ACF Blocks
*/
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check function exists
if( function_exists('acf_register_block') ) {
// Gallery block
acf_register_block(array(
'name' => 'gallery',
'title' => __('Gallery'),
'description' => __('A custom gallery block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'formatting',
'icon' => 'format-gallery',
'keywords' => array( 'gallery' ),
'enqueue_assets' => function() {
wp_enqueue_style( 'fancybox-style' );
wp_enqueue_script( 'fancybox-js', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.min.js', array('jquery'), '1.0', true );
}
));
}
}
The 'enqueue_assets' function allows me to enqueue styles and scripts if the block is loaded.
The script loads in the footer as intended. However, the styles also load in the footer.
I've tried registering the style via functions and then enqueing it in the block, but it still loads in the footer. Here's how I'm registering the style.
wp_register_style( 'fancybox-style', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.min.css');
Is there a way within WordPress to force styles to load in the header?
Related
I have added a custom sidebar to my WordPress installation using the following script that also creates a shortcode:
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'gutenbar',
'class' => 'abeng',
'name' => __( 'Abeng sidebar', 'text_domain' ),
'description' => __( 'Sidebar for block', 'text_domain' ),
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
add_shortcode( 'add_sidebar', 'custom_sidebars' );
When I add the [add_sidebar] shortcode to a Gutenberg block the sidebar does not appear. However, when I use a plugin called Sidebar Shortcode [sidebar id="gutenbar"] the sidebar is displayed perfectly. I assume that my shortcode is associated with a specific function and does not need a name or id for the sidebar to be chosen.
I had been thinking that because the sidebar was added using a plugin that allows the insertion of functions available site-wide rather than only in a theme using its functions.php, that was the reason the shortcode did not do its job. But since the sidebar shows in the widgets area and allowed me to add widgets, and now works with this plugin, that's obviously not the issue.
Looking under the hood of the concisely written Sidebar Shortcode, I can't see what I might want to add to make my code functional.
Why am I doing this? I'm using full-width pages for my posts, disabling the theme's default right sidebar (which doesn't play well in a responsive design) but still need to reinsert the sidebar in a column.
Thanks for any help.
With the help of Prashant Singh on the WordPress support forum, I learned that the function that creates the sidebar cannot be used to create a shortcode to place it on a page. The shortcode has to be created calling the WP native function dynamic_sidebar() that gives access to all sidebars (https://developer.wordpress.org/reference/functions/dynamic_sidebar/). Below is the full script that includes cleanup code to allow the correct positioning inside a page.
/**
* Create sidebar and shortcode
*/
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'gutenbar',
'class' => '',
'name' => __( 'Abeng sidebar', 'text_domain' ),
'description' => __( 'Sidebar for block', 'text_domain' ),
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
/* Add the shortcode and allow positioning in page*/
add_shortcode( 'add_sidebar', 'my_custom_sidebar' );
function my_custom_sidebar(){
ob_start();
dynamic_sidebar( 'gutenbar');
$sidebar_left = ob_get_clean();
$html = ' <div class="sidebar-content"> ' . $sidebar_left . ' </div> ';
return $html;
}
I am working on a plugin that bundles multiple custom gutenberg blocks and I am using the #wordpress/scripts npm module to build with webpack. Works great so far, but checking the console when working in the editor gives me errors about blocks being registered already. Currently I have 5 blocks and 4 errors for each, so I assume on each register function call in my plugin PHP all blocks try to register again. Each block has its own src-js file and all get bundled into a single build-js. Furthermore each block has its own register function with add_action in the PHP but the plugins_url is always the same build-js. I believe it's a problem with how my PHP file is handling the registration but I am honestly stuck on how to solve this. I am still struggling with all the changes developing with blocks brings. Maybe anybody has done this already and can point me in the right direction?
Example PHP code with 2 blocks
<?php
/*
Plugin Name: My Blocks Plugin
*/
/* Block 1 */
function register_my_block_1() {
wp_register_script(
'foo-my-block-1',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' )
);
register_block_type( 'foo/my-block-1', array(
'editor_script' => 'foo-my-block-1',
) );
}
add_action( 'init', 'register_my_block_1' );
/* Block 2 */
function register_my_block_2() {
wp_register_script(
'foo-my-block-2',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-i18n' )
);
register_block_type( 'foo/my-block-2', array(
'editor_script' => 'foo-my-block-2',
) );
}
add_action( 'init', 'register_my_block_2' );
It should be enough to define the build-JS with wp_register_script() and all dependencies and then register each block with register_block_type():
function plugin_slug_register_blocks() {
// Register build.js
wp_register_script(
'plugin-slug-blocks',
plugins_url( 'build.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-data' )
);
// Register Block 1
register_block_type( 'plugin-slug/block-name-1', array(
'editor_script' => 'plugin-slug-blocks',
) );
// Register Block 2
register_block_type( 'plugin-slug/block-name-2', array(
'editor_script' => 'plugin-slug-blocks',
) );
}
add_action( 'init', 'plugin_slug_register_blocks' );
Besides editor_script, register_block_type() also accepts style and editor_style as arguments for the CSS files. If it is a dynamic block, you can also pass a render function with render_callback.
I'm building custom tinymce bar buttons for my wp theme, using wp_editor and teeny, but I have a problem. When I add hr and charmap, these buttons not appear in the tinymce bar.
This is the wp_editor configuration:
$settings = array(
'textarea_name' => 'xor_options[' . $editor . ']',
'quicktags' => array( 'buttons' => 'strong,em,del,ul,ol,li,close' ),
'media_buttons' => true,
'wpautop' => false,
'textarea_rows' => 5,
'editor_height' => 200,
'teeny' => true,
'tinymce' => true
);
wp_editor( $xor_output, $xor_editor_id, $settings );
Now I'm using the filter for teeny buttons.
add_filter( 'teeny_mce_buttons', 'xor_editor_buttons', 10, 2 );
function xor_editor_buttons( $buttons, $editor_id ) {
if( $editor_id != 'footer-editor' ) return $buttons;
$buttons = array(
'undo',
'redo',
'formatselect',
'bold',
'italic',
'underline',
'strikethrough',
'blockquote',
'bullist',
'numlist',
'outdent',
'indent',
'alignleft',
'alignright',
'aligncenter',
'alignjustify',
'link',
'unlink',
'hr', // not appears!
'charmap', // not appears!
'removeformat',
'fullscreen'
);
return $buttons;
}
Where is the error in my code or this is a little bug? I'm using Wordpress 4.9. Thanks!
SOLVED
I set on false teeny. Then I set tinymce as array:
'tinymce' => array(
'toolbar1' => $b,
'toolbar2' => '',
'toolbar3' => '',
)
Where $b is all buttons that I need (included hr and charmap). See:
Wordpress Developers
Before you can load the toolbar buttons you need to load the plugins:
https://www.tinymce.com/docs/plugins/hr/
https://www.tinymce.com/docs/plugins/charmap/
You first need to see if the TinyMCE embedded in your WP version includes these plugins (they are in a standard WordPress setup). You then need to add these plugins to the list of loaded plugins. Once they are loaded adding the buttons to the toolbar will work.
I don't know anything about teenymce but (as an example) this is how TinyMCE Advanced loads extra plugins via a WordPress hook:
add_filter( 'tiny_mce_plugins', array( $this, 'tiny_mce_plugins' ), 999 );
(The array is a list of plugin folder names)
I'm using a studiopress theme with backstretch script already included. The site's background image is used but I'm using a content delivery network.
At present the image url is:
mysite.com/media/background-image.jpg
I want it to be:
cdn-url.com/media/background-image.jpg
The reason this matters is the site is hosted in Mid-West, US but has a UK audience. The CDN serves static content from London, UK.
I've posted on studiopress support forum but no reply as yet.
The current functions php code is:
//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {
//* Load scripts only if custom background is being used
if ( ! get_background_image() )
return;
wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );
wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_background_image() ) ) );
}
Can this be altered to get the result I want?
Editing the last line as below works:
wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => 'cdn_url_here' ) );
I want to add a style tag to the head section according to shortcode parameters. I wrote a function for styles and want to call its add_action in a shortcode function.
However, the style is not added in the head. If I call add_action outside of the function, it works successfully.
Please let me know how I can call the statement "add_action" inside a php function, and how I can send parameters to a function to call add_action.
This is my code:
function ag_appearance( $year ){
?>
<style type="text/css">
/*Some style here*/
</style>
<?php
}
add_action( 'wp_head', 'ag_appearance' ); /* this is working */
function dp_agenda( $atts, $content = null ){
extract( shortcode_atts( array(
'year' => '',
'day' => '',
'summit' => '',
'complexity' => '',
'certification' => '',
'event' => '',
'make' => ''
), $atts ) );
add_action( 'wp_head', 'ag_appearance' );
/* this is not working, while i want to call here by $year parameter */
}
I would suggest creating a CSS file containing the style you want to add to the header (appearance.css for example) and placing that in the theme folder so you know where it is (I usually use /css for styles). Then use wp_enqueue_style to set the style in the header when the containing function is called. Sort of like this:
function dp_agenda( $atts, $content = null ){
extract( shortcode_atts( array(
'year' => '',
'day' => '',
'summit' => '',
'complexity' => '',
'certification' => '',
'event' => '',
'make' => ''
), $atts ) );
wp_enqueue_style('appearance',get_stylesheet_directory_uri().'/css/appearance.css');
/* this is not working, while i want to call here by $year parameter */
}
Enqueued styles in WordPress, by default, are placed in the head via wp_head() and scripts are placed wherever you have wp_footer() placed, usually before the </body> tag.
You can also use wp_enqueue_script to pull your javascript files.