I'm trying to extend the default gallery widget in wordpress (v5.1.1) for a child theme. The widget shows up in the "Widgets" section of the dashboard, but the form fields never show up to edit the widget settings. Below shows the behavior with the default gallery widget, and then my widget (called "Extended Gallery").
What I did: I copied and pasted the content of /wp-includes/widgets/class-wp-widget-media-gallery.php into a file in my child theme called extended-gallery.php. The two files are the exact same except for at the beginning of extended-gallery.php where I changed the class name and handle.
see class-wp-widget-media-gallery.php
changes I made in extended-gallery.php:
class Extended_Gallery extends WP_Widget_Media {
/**
* Constructor.
*
* #since 4.9.0
*/
public function __construct() {
parent::__construct(
'media_gallery_extended',
__( 'Extended Gallery' ),
array(
'description' => __( 'Displays an image gallery.' ),
'mime_type' => 'image',
)
);
In functions.php, I register extended-gallery.php
<?php
//custom widgets
require_once("extended-gallery.php");
add_action("widgets_init", "custom_widgets_init");
function custom_widgets_init(){
register_widget("Extended_Gallery");
}
// add custom style
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
How do I get the settings fields for my custom widget to work the same way as the default gallery widget? If I add additional fields, will it screw it up?
Your question is about creating a new plugin on wordpress.
You should 'register' your widgets. Like as following.
add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
And you should activate your new plugin.
Good luck.
Related
I need to have color picker settings filed in my plugin. I have registered a field and its saving value in the database correctly. But, in the admin area the picker user interface is not correct I think.
It should look like this:
https://ibb.co/7XRHqqL
But in my case it's looking like this:
https://ibb.co/vHvqmd0
Here is the code I have for registering the field
add_settings_field( 'iconBg', 'Background Color', array( $this, 'bg_settings_field' ), 'wpfyscroller-settings-page', 'wpfyscrollersection' );
register_setting( 'wpfyscrollerfields', 'iconBg', array('sanitize_callback'=>'sanitize_hex_color', 'default'=> '#000000') );
//Callback function
function bg_settings_field() { ?>
<input type="text" name="iconBg" value="<?php echo get_option('iconBg') ?>" class="cpa-color-picker" >
<?php }
Here is the code for enqueueing js
add_action('admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
function enqueue_admin_js() {
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( '/assets/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), '', true );
}
NOTE: My 'jquery' dependency already loaded with another script.
Here is the JS code:
(function ($) {$(function () {
// Add Color Picker to all inputs that have 'color-field' class
$(".cpa-color-picker").wpColorPicker();});})(jQuery);
Not sure what mistake I did, any help will be apricated.
Thanks
You can try the below code and hopefully work it. Your issue was on enqueue js.
/**
* Enqueue style & scripts for color picker
*
* #return void
*/
function enqueue_admin_js() {
// wp-color-picker
wp_enqueue_style( 'wp-color-picker' );
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( '/assets/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), '', true );
}
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
I am developing my first WordPress plugin for a simple quotation
I created settings pages at admin section those are working fine as I have not used any special css.
I have also created a public page where I have used bootstrap5 and fontawsome
but when it loads all its CSS is broken as default wordpress theme css also getting applied on it. it might be fixed for a specific theme, but is the theme is changed again it will be broken with new theme.
How can I handle this?
add_filter('the_content', array($this,'public_page'));
function public_page($content) {
if(is_page()){
$public_page_slug = get_option("alam_calc_slug",'alam-calc');
$current_page = sanitize_post( $GLOBALS['wp_the_query']->get_queried_object() );
$slug = $current_page->post_name;
if( is_singular() &&
is_main_query() &&
$slug == $public_page_slug
) {
//this file has my custom page content including bootstrap.css.js and fontawsome
require_once dirname(__FILE__).'\inc\index.php';
return;
}
}
return $content;
}///end public_page()
You need to use the wp_enqueue_scripts action hook to load the custom styles on your front end.
Usage:
/**
* Load custom CSS and JavaScript.
*/
add_action( 'wp_enqueue_scripts', 'wpdocs_my_enqueue_scripts' );
function wpdocs_my_enqueue_scripts() : void {
// Enqueue my styles.
wp_enqueue_style( 'wpdocs-bootstrap-style', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css' );
wp_enqueue_style( 'wpdocs-datatables-bootstrap-style', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css' );
// Enqueue my scripts.
wp_enqueue_script( 'wpdocs-bootstrap-bundle-script', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js', array(), null, true );
wp_enqueue_script( 'wpdocs-datatables-bootstrap-script', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js', array(), null, true );
wp_enqueue_script( 'wpdocs-jquery-datatables-script', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js', array(), null, true );
}
In previous when I develop WP shortcode then I load the CSS style depend on the shortcode params like this.
function test_shortcode( $atts ) {
$a = shortcode_atts( array(
'foo' => 'something',
), $atts );
echo "<style>";
.shortcode_unique_id {
//some css property depend on shortcode
}
echo "</style>";
}
But now it did not allow to add any style tag in the body otherwise it will show w3 validation error. We need to load style in the head tag.
Please anyone tell me how to load CSS style depend on shortcode params when calling the shortcode.
Advance Thanks
You can use wp_register_style and wp_enqueue_style to use style which is dependent on shortcode.
Main difference between wp_enqueue_* and respective wp_register_* functions, is that the first adds scripts/styles to the queue, the second prepares scripts/styles to be added.
The typical scenario of using both functions is when you want to register scripts/styles on theme init, and then enqueue them wherever necessary e.g.
add_action('init', 'my_register_styles');
function my_register_styles() {
wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
wp_register_style( 'style2', get_template_directory_uri() . '/style2.css' );
wp_register_style( 'style3', get_template_directory_uri() . '/style3.css' );
}
/*This is you shortcode function*/
function test_shortcode( $atts ) {
$a = shortcode_atts( array(
'foo' => 'something',
), $atts );
wp_enqueue_style( 'style1' );
wp_enqueue_style( 'style2' );
wp_enqueue_style( 'style3' );
}
I have the following pieces of code that I use to include styles and java-scripts on a settings page within the WordPress admin area. I have a class with a singleton that I use to initiate my admin pages. I stripped everything except the needed pieces of code to make it more readable.
The problem that I'm having is that by using the set-up below is that the style-sheets on the settings page are placed at the bottom of the page instead of in the head of the page. I can get it in the header by using other action hooks, but that would defeat the purpose. As far as I know the set-up I used is the same setup as is described with the wp_enqueue_style command.
There is a small hint with the command "wp_enqueue_style() can now be called mid-page (in the HTML body). This will load styles in the footer.". If that is true that would mean that the 'admin_print_scripts-*' hook is called somewhere mid-page instead of at the start en doing so places the css in the footer.
Any thoughts on that. an I doing something wrong ?
Thanks for your time.
This is how the singleton class is called within the functions.php file
theme::instance( );
This is part of the class that I used to create the admin pages
class theme {
static public function instance( )
{
is_null( self::$instance ) AND self::$instance = new self;
return self::$instance;
}
public function __construct()
{
add_action( 'admin_menu', array( $this, 'initMenu' ), 10, 0 );
add_action( 'admin_init', array( $this, 'registerAssets' ), 10, 0 );
}
public function registerAssets( )
{
// Styles
wp_register_style( 'cen', 'style.css', array( ), '1.0' );
wp_register_style( 'cen-settings', 'settings.css', array( 'cen' ), '1.0' );
// Scripts
wp_register_script( 'cen', 'settings.js', array( 'jquery' ), '1.0', true );
}
public function initMenu( )
{
// Index page
$index =add_menu_page( 'Cen', 'Cen', 'manage_options', 'cen-index', function (){ require_once( get_template_directory( ) . '/pages/index.php' ); }, get_template_directory_uri() . '/images/icons/logo_16.png', "110.00" );
// Settings page
$settings =add_submenu_page( 'cen-index', 'Cen - Settings', 'cen' ), 'Settings', 'manage_options', 'cen-settings', function (){ require_once( get_template_directory( ) . '/pages/settings.php' ); } );
// Add action for assets on the settings page
add_action( 'admin_print_scripts-' . $settings, array( $this, 'initSettingsPage' ));
}
public function initSettingsPage( )
{
// Styles used
wp_enqueue_style( 'cen' );
wp_enqueue_style( 'cen-settings' );
// Scripts used
wp_enqueue_script( 'jquery-ui-tabs' );
wp_enqueue_script( 'cen' );
}
}
The action hook admin_print_scripts you're using is used to add inline script so it's strongly recommended to use admin_enqueue_scripts to enqueue scripts/styles in the admin.
Try it. Hope it works!
I now use the add_submenu_page() function, but I don't want the edit page to appear in the admin menu.
I want to access the edit page from a list (another page) directly. But I need the slug as a hook_suffix.
I have in my-edit.php
/* Set up the administration functionality. */
add_action( 'admin_menu', 'my_edit_setup' );
function my_edit_setup() {
...
/* Add Edit Actionlist page. */
$myplugin->my_edit = add_submenu_page( 'myplugin', esc_attr__( 'Edit', 'myplugin' ), esc_attr__( 'Edit', 'myplugin' ), 7, 'my-edit', 'my_edit' );
...
In admin.php I have:
function my_admin_enqueue_style( $hook_suffix ) {
$pages = array(
'admin_page_projects',
'...my-edit'
);
if ( in_array( $hook_suffix, $pages ) ) {
wp_enqueue_style( 'myplugin-admin', trailingslashit( MYPLUGIN_URI ) . 'css/admin.css', false, '20110525', 'screen' );
You see I need the $hook_suffix, but I can't find out how to get this, without creating the admin menu item.
Example of how to create an invisible sub menu (it gets attached to the Dashboard, index.php) and the correspondent $hook_suffix.
The page can be accessed through http://example.com/wp-admin/index.php?page=sample_page_hidden.
add_action( 'admin_menu', 'admin_menu_so_11593510' );
add_action( 'admin_enqueue_scripts', 'admin_enqueue_scripts_so_11593510' );
function admin_menu_so_11593510()
{
add_submenu_page(
null, // doesn't shows up in the menu, submenu is attached to "index.php"
'Test',
'Test',
'edit_pages',
'sample_page_hidden',
'menu_options_so_11593510'
);
}
function menu_options_so_11593510() { echo 'Hello!'; }
function admin_enqueue_scripts_so_11593510( $hook_suffix )
{
if ( 'dashboard_page_sample_page_hidden' == $hook_suffix ) {
wp_enqueue_script( 'swfobject' );
}
}