I'm trying to create a widget similar to the text widget but I don't want it to be wrapped and I don't want any divs or formatting added around it. This will be used for javascript right before the closing tag so I'm just trying to have the plain/basic info thats typed into the widget. What else do I need besides what I have below? Did I do this right?
function 123_widgets_init() {
register_sidebar( array(
'name' => __( 'Scripts', '123' ),
'id' => 'sidebar-1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
) );
}
add_action( 'widgets_init', '123_widgets_init' );
Yes , you did right . any text widget can take javascript - if you want to get rid of the divs and p tags and classes - your code should be enough.
you can also use some filters to clean other things .
Actually, I had a code for such a widget - I do not remember from which website I took it (some snippet repository) but it is basically the text widget duplicated with some small changes.
<?php
/*
Plugin Name: Text widget for Javascript
Plugin URI: Unknown
Description: Adds a Text widget with Javascript support - basically empty all divs classes etc.
Version: 3.1
Author: Unknown (code source unknown. compiled by Obmerk99)
Author URI: Unknown
License: GPL2
Network: true
*/
/**********************************************
* Text widget class with small twicks for JS *
**********************************************/
class WP_Widget_Text_For_JS extends WP_Widget {
function __construct() {
$widget_ops = array('classname' => 'widget_text', 'description' => __('Javascript Text Widget'));
$control_ops = array('width' => 400, 'height' => 350);
parent::__construct('text', __('Text'), $widget_ops, $control_ops);
}
function widget( $args, $instance ) {
extract($args);
$title = apply_filters( 'widget_title', empty($instance['title']) ? '' : $instance['title'], $instance, $this->id_base);
$text = apply_filters( 'widget_text', $instance['text'], $instance );
$before_widget = ''; $after_widget =''; $before_title=''; $after_title='';$after_widget=''; //empty all
echo $before_widget;
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
<div class="textwidget"><?php echo $instance['filter'] ? wpautop($text) : $text; ?></div>
<?php
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['text'] = $new_instance['text'];
$instance['filter'] = isset($new_instance['filter']);
return $instance;
}
function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) );
$title = strip_tags($instance['title']);
$text = esc_textarea($instance['text']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>
<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> /> <label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php
}
}
function wp_o99_javascript_text_widget(){
// unregister_widget('WP_Widget_Text'); // Only if you really want to .
register_widget('WP_Widget_Text_For_JS');
}
add_action('widgets_init', 'wp_o99_javascript_text_widget', 1);
?>
Use my plugin Magic Widgets. It has a text widget which doesn’t use the sidebar parameters, and it creates special widget areas in the header and footer of the front-end and back-end views.
You can take the plain widget from GitHub.
There are a lot of steps left to get to where you want
Create a new sidebar-xxx.php file that calls your sidebar you created
Create a widget to drop into that sidebar.
Call get_sidebar('xxx'); where you want it to display the widgets in your sidebar.
When creating the sidebar file or the widget you can exclude adding formatting or wrappers and just echo the input from the widget
http://codex.wordpress.org/Widgets_API
Related
I created widget to add [woocommerce_cart] to my archive product sidebar
Number of product per row is set to 3.
After submit add to cart the number of product per row change to 2 !
Any guidance on that?
Here is my archive product link:
Here is the widget code:
// Creating the widget basket
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__('ابزارک سبد خرید', 'wpb_widget_domain'),
// Widget description
array( 'description' => __( 'سبد خرید اختصاصی ', 'wpb_widget_domain' ), )
);
}
// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before widget arguments are defined by themes
echo $args['before_widget'];
// This is where you run the code and display the output
?>
<div class="header__card-icon" >
<a href="<?php echo wc_get_cart_url(); ?>"title="<?php is_rtl() ? _e( 'نمایش سبد خرید' ) : _e( 'View your shopping cart' ); ?>">
<span class="demo-icon icon-basket-1"> </span>
<?php // if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title']; ?>
</a>
<a class="cart-contents" id="mini-cart-count" href="<?php echo wc_get_cart_url(); ?>" title="<?php is_rtl() ? _e( 'نمایش سبد خرید' ) : _e( 'View your shopping cart'); ?>" ><?php if(WC()->cart->get_cart_contents_count()>0){ echo sprintf( WC()->cart->get_cart_contents_count() );} ?> </a>
</div>
<!--header__card-icon-->
<h3 class="widget-title"> ســبــد خــریــد </h3>
<?php
echo do_shortcode('[woocommerce_cart]');
// after widget arguments are defined by themes
echo $args['after_widget'];
}
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( '', 'wpb_widget_domain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Class wpb_widget ends here
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
i created my own widget code by php programe for wordpress...and i want to add that widget into widget panel..so if i want to show on that widget in my widget panel where i add(means which file in wordpress) my widget code...?
<?php
add_action( 'widgets_init', 'my_widget' );
function my_widget() {
register_widget( 'MY_Widget' );
}
class MY_Widget extends WP_Widget {
function MY_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the authors name ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
//Our variables from the widget settings.
$title = apply_filters('widget_title', $instance['title'] );
$name = $instance['name'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
// Display the widget title
if ( $title )
echo $before_title . $title . $after_title;
//Display the name
if ( $name )
printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $name );
if ( $show_info )
printf( $name );
echo $after_widget;
}
//Update the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//Strip tags from title and name to remove HTML
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
return $instance;
}
function form( $instance ) {
//Set up some default widget settings.
$defaults = array( 'title' => __('Example', 'example'), 'name' => __('Bilal Shaheen', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
//Widget Title: Text Input.
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
//Text Input.
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Your Name:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
//Checkbox.
<p>
<input class="checkbox" type="checkbox" <?php checked( $instance['show_info'], true ); ?> id="<?php echo $this->get_field_id( 'show_info' ); ?>" name="<?php echo $this->get_field_name( 'show_info' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_info' ); ?>"><?php _e('Display info publicly?', 'example'); ?></label>
</p>
<?php
}
}
?>
You can keep it in your theme's functions.php file but it would be better if you keep it in a separate file and then include the file in functions.php like
include('mywidget.php');
Create the file (mywidget.php) and save it in your themes root folder (where functions.php is located), and paste the code in this file, that's it. Keeping the widget code in a different file will keep your functions.php clean and your widget file will be easily readable/editable in it's own file without looking the code in functions.php.
I am writing a widget for showing an image via input the local path of the image. But stuck at the phase of showing image. Probably, the problem exists in the function: widget. I tried many ways, (you can see the code in the widget function), but still not working. Could some one point me the error?
<?php
class oseBadgeWidget extends WP_Widget{
public function oseBadgeWidget(){
$widget_ops = array(
'classname' => 'ose-badge-widget',
'description' => 'Show the OSE Firewall Badget'
);
$control_ops = array(
'width' => 200, 'height' => 250,
);
$this->WP_Widget('ose_Badge_Widget', 'OSE Badge Widget', $widget_ops, $control_ops);
}
public function __construct(){
parent:: __construct(
'ose_Badge_Widget',
'OSE Badge Widget',
array('description' => __('Show the OSE Firewall Badget'), )
);
}
// show the widget appearence
public function form($instance){
if (isset($instance['file_path'])){ $file_path = $instance[ 'file_path' ]; } else { $image_width = __( '', 'text_domain' ); }
?>
<p>
<label for="<?php echo $this->get_field_id('file_path' ); ?>"><?php _e( 'File Path:' ); ?></label>
<input class="file_path" id="<?php echo $this->get_field_id( 'file_path' ); ?>" name="<?php echo $this->get_field_name( 'file_path' ); ?>" type="text" value="<?php echo esc_attr( $file_path ); ?>" />
</p>
<?php
}
public function update($new_instance, $old_instance){
$instance['file_path'] = strip_tags( $new_instance['file_path'] );
return $instance;
}
// find the image from the input path, and show it
public function widget($args, $instance){
extract($args);
if ($instance['file_path'] != ''){$file_path = $instance['file_path'];} else { $file_path = '';}
$handle = opendir($file_path);
$file = readdir($handle);
echo $before_widget;
echo '<img src= "picture/'.$file.'" border = "0" />';
echo $after_widget;
//$handle = opendir(dirname(realpath(__FILE__)).'/picture/');
//$file = readdir($handle);
//echo '<img src= "picture/'.$file.'" border = "0" />';
}
}
add_action( 'widgets_init', create_function( '', 'register_widget( "oseBadgeWidget" );' ) );
?>
Put this code in a text widget and move the widget to where you want it to display.
<img src="URL OF IMAGE" alt="TEXT WHEN HOVERING OVER IT">
You can add further code such as width and height to alter the size of it as well.
I'm very new to coding Wordpress plugins/widgets (this is my first time!). I've built a very basic Wordpress plugin which consists of 2 text inputs and a select field. The text inputs work fine however the select box doesn't appear to be saving when I hit the "Save" button.
Here is my plugin code:
<?php
/* Plugin Name: Sidebar Box
Plugin URI: http://www.website.com
Description: Displays contact box in sidebar
Version: 1.0
Author: JM
Author URI: N/A
*/
// use widgets_init action hook to execute custom function
add_action( 'widgets_init', 'jm_box_widget' );
//register our widget
function jm_box_widget() {
register_widget( 'jm_box_widget_my_info' );
}
//boj_widget_my_info class
class jm_box_widget_my_info extends WP_Widget {
//process the new widget
function jm_box_widget_my_info() {
$widget_ops = array(
'classname' => 'jm_box_widget_class',
'description' => 'Sidebar Box Widget.'
);
$this->WP_Widget( 'jm_box_widget_my_info', 'Box Widget', $widget_ops );
}
//build the widget settings form
function form($instance) {
$defaults = array( 'title' => 'Box Page Widget', 'description' => '', 'boxtype' => '' );
$instance = wp_parse_args( (array) $instance, $defaults );
$title = $instance['title'];
$description = $instance['description'];
$boxtype = $instance['boxtype'];
?>
<p>Title: <input class="widefat" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /></p>
<p>Description: <textarea class="widefat" name="<?php echo $this->get_field_name( 'description' ); ?>" / ><?php echo esc_attr( $description ); ?></textarea></p>
<p>Sex:
<select id="<?php echo $this->get_field_id( 'boxtype' ); ?>" name="<?php echo $this->get_field_name( 'boxtype' ); ?>" class="widefat" style="width:100%;">
<option <?php if ( 'box1' == $instance['format'] ) echo 'selected="selected"'; ?> value="box1">box1</option>
<option <?php if ( 'box2' == $instance['format'] ) echo 'selected="selected"'; ?> value="box2">box2</option>
</select>
</p>
<?php
}
//save the widget settings
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['description'] = strip_tags( $new_instance['description'] );
$instance['boxtype'] = ( $new_instance['boxtype'] );
return $instance;
}
//display the widget
function widget($args, $instance) {
extract($args);
echo $before_widget;
$title = apply_filters( 'widget_title', $instance['title'] );
$description = empty( $instance['description'] ) ? ' ' : $instance['description'];
$boxtype = empty( $instance['boxtype'] ) ? ' ' : $instance['boxtype'];
echo '<div class="sidebar-box" id="' . $boxtype . '" onmouseover="this.style.cursor=\'pointer\'" onmouseup="window.location=\'' . $boxtype . '\'">
<h3>' . $title . '</h3>
<p>' . $description . '</p>
</div>';
echo $after_widget;
}
}
?>
I can't for the life of me workout why it's not saving.
Any help would be greatly appreciated.
Thanks,
James
Somewhere along the line you must have changed $instance['format'] to $instance['boxtype'] but not in the form. The options need changing.
<option <?php if ('box1' == $boxtype )
I have found the code for Custom Menu Widget under /wp-includes/default-widgets.php. What I want to do is add a static image on top of the Menu UL. I already made the list vertically and I'd like to put one image on top after the widget title and before the list, but I have little knowledge with PHP.
Here is the code for the custom menu widget:
`/**
* Navigation Menu widget class
*
* #since 3.0.0
*/
class WP_Nav_Menu_Widget extends WP_Widget {
function __construct() {
$widget_ops = array( 'description' => __('Use this widget to add one of your custom menus as a widget.') );
parent::__construct( 'nav_menu', __('Custom Menu'), $widget_ops );
}
function widget($args, $instance) {
// Get menu
$nav_menu = ! empty( $instance['nav_menu'] ) ? wp_get_nav_menu_object( $instance['nav_menu'] ) : false;
if ( !$nav_menu )
return;
$instance['title'] = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
echo $args['before_widget'];
if ( !empty($instance['title']) )
echo $args['before_title'] . $instance['title'] . $args['after_title'];
wp_nav_menu( array( 'fallback_cb' => '', 'menu' => $nav_menu ) );
echo $args['after_widget'];
}
function update( $new_instance, $old_instance ) {
$instance['title'] = strip_tags( stripslashes($new_instance['title']) );
$instance['nav_menu'] = (int) $new_instance['nav_menu'];
return $instance;
}
function form( $instance ) {
$title = isset( $instance['title'] ) ? $instance['title'] : '';
$nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
// Get menus
$menus = get_terms( 'nav_menu', array( 'hide_empty' => false ) );
// If no menus exists, direct the user to go and create some.
if ( !$menus ) {
echo '<p>'. sprintf( __('No menus have been created yet. Create some.'), admin_url('nav-menus.php') ) .'</p>';
return;
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('nav_menu'); ?>"><?php _e('Select Menu:'); ?></label>
<select id="<?php echo $this->get_field_id('nav_menu'); ?>" name="<?php echo $this->get_field_name('nav_menu'); ?>">
<?php
foreach ( $menus as $menu ) {
$selected = $nav_menu == $menu->term_id ? ' selected="selected"' : '';
echo '<option'. $selected .' value="'. $menu->term_id .'">'. $menu->name .'</option>';
}
?>
</select>
</p>
<?php
}
}
Sample Picture
Do NOT ever edit core files... EVER! /slaps wrist.
If you want to do this, you could add some padding ( ~100px) to the top of the first <li> or the bottom the title. Then set a background to the div like
.custom-menu { background: url(your-image.png) center 5px no-repeat; } /*note no-repeat*/
or if you want the image clickable, dismiss everything I just told you and:
make a new first menu item in the custom menu menu. Grab the class for that specific one and add similar styles to it
.the-li-you-want { width: 200px; height: 100px; text-indent: -999px; /*hide the text on it*/ background: url(your-image.png) no-repeat; }