I am trying to insert a custom widget area in another widget, but don't know where to start. Do I need to register new widget areas in widget class constructor with unique id's ?
What I am trying to achieve:
Insert a section widget which contains a widget area.
Insert custom widgets into that section with the widget area.
<?php
function dov_load_widget_default( ) {
register_widget( 'section' );
}
add_action( 'widgets_init', 'dov_load_widget_default' );
class section extends WP_Widget {
function __construct( ) {
parent::__construct(
'section',
__( 'Portfolio sections', 'dov_portfolio' ),
array( 'description' => __( 'Default section for widgets', 'dov_portfolio' ) )
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
}
// Widget Backend
public function form( $instance ) {
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array( );
return $instance;
}
}
?>
Don't know if it's the right way but it seems to work.
function dov_load_sidebars( ) {
register_sidebar( array(
'id' => 'portfolio_sections',
'name' => __( 'Portfolio sections', 'dov_portfolio' )
));
$sections = wp_get_sidebars_widgets( );
if( isset( $sections[ 'portfolio_sections' ] ) ) :
$sections = $sections[ 'portfolio_sections' ];
foreach( $sections as $section ) :
register_sidebar( array(
'id' => $section,
'name' => __( 'Portfolio section', 'dov_portfolio' ) . ': ' . $section
));
endforeach;
endif;
}
add_action( 'widgets_init', 'dov_load_sidebars' );
EDIT: After inserting the section widget the widget areas don't refresh. How can I refresh them or should I add them using js ?
Related
I try to get the names of the pages in a loop.
In the widget, the page titles are displayed correctly, but the values are not saved.
How I can save the checked inputs?
Below Full Widget Code:
class Foo_Widget extends WP_Widget {
/** Register widget with WordPress.*/
function __construct() {
parent::__construct(
'foo_widget', // Base ID
esc_html__( 'Widget Title', 'text_domain' ), // Name
array( 'description' => esc_html__( 'A Foo Widget', 'text_domain' ), ) // Args
);
}
/*** Front-end display of widget.*/
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo esc_html__( 'Hello, World!', 'text_domain' );
echo $args['after_widget'];
}
/*** Back-end widget form.*/
public function form( $instance ) {
$mypages = get_pages( array(
'sort_column' => 'post_date',
'sort_order' => 'desc'
) );
foreach( $mypages as $page ) {
$title = $page->post_title;
$slug = $page->post_name;
?>
<p>
<label>
<input type='checkbox' name='the_pages' id='<?php echo $slug ?>' value='<?php echo esc_attr( $title ); ?>'><?php echo esc_attr( $title ); ?>
</label>
</p>
<? } ?>
<?php }
/*** Sanitize widget form values as they are saved.*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = $new_instance[ 'title' ];
return $instance;
}
}
// register Foo_Widget widget
function register_foo_widget() {
register_widget( 'Foo_Widget' );
}
add_action( 'widgets_init', 'register_foo_widget' );
?>
How should update() function looks like ?
This function adds a tab named "Special Page" into "My Account" tab list:
add_filter( 'woocommerce_account_menu_items' , 'jc_menu_panel_nav' );
function jc_menu_panel_nav() {
$items = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => __( 'Addresses', 'woocommerce' ),
'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'edit-account' => __( 'Account Details', 'woocommerce' ),
'special-page' => __( 'Special Page', 'woocommerce' ), // My custom tab here
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $items;
}
That results in this:
But the link points to my-account/special-page/, and naturally gives a 404 error.
How I can assign this URL to a file named special-page.php?
Finally I could solve the problem using a snippet provided for the same people of WooCommerce (There are more tips in that page). For anyone interested, paste all the following code in functions.php:
function my_custom_endpoints() {
add_rewrite_endpoint( 'special-page', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'my_custom_endpoints' );
function my_custom_query_vars( $vars ) {
$vars[] = 'special-page';
return $vars;
}
add_filter( 'query_vars', 'my_custom_query_vars', 0 );
function my_custom_flush_rewrite_rules() {
flush_rewrite_rules();
}
add_action( 'wp_loaded', 'my_custom_flush_rewrite_rules' );
I think this way allows more control to order/renaming the menu:
function my_custom_my_account_menu_items( $items ) {
$items = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
//'downloads' => __( 'Downloads', 'woocommerce' ),
//'edit-address' => __( 'Addresses', 'woocommerce' ),
//'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'edit-account' => __( 'Edit Account', 'woocommerce' ),
'special-page' => 'Special Page',
'customer-logout' => __( 'Logout', 'woocommerce' ),
);
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'my_custom_my_account_menu_items' );
In the following function I included the file to maintain some "order", but it also admits direct code.
Be sure to place the special-page.php file in the myaccount folder.
function my_custom_endpoint_content() {
include 'woocommerce/myaccount/special-page.php';
}
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
Important: Once did this, go to Dashboard > Settings > Permalinks and click "Save Settings" in order to flush rewrite rules (thanks #optimiertes)
Source: Tabbed My Account page
First my-account/special-page/ should be myaccount/special-page/ in woocommerce 2.6+.
This solution is Incomplete and I am still working On…
You can use first this hook:
add_action( 'init', 'add_wc_endpoint' );
function add_wc_endpoint(){
add_rewrite_endpoint( 'special-page', EP_ROOT | EP_PAGES );
}
Then filtering wc_get_templateto call your files when the request match your endpoint:
add_filter( 'wc_get_template', 'custom_vc_endpoint', 10, 5 );
function custom_vc_endpoint($located, $template_name, $args, $template_path, $default_path){
if( $template_name == 'myaccount/special-page.php' ){
global $wp_query;
if(isset($wp_query->query['special-page'])){
$located = get_template_directory() . '/woocommerce/myaccount/special-page.php';
}
}
return $located;
}
If you use a child theme, replace get_template_directory() by get_stylesheet_directory()… Paste this code in function.php file of your active child theme or theme.
To avoid a 404 error "page not found", you will need to refresh rewrite rules adding to your code:
flush_rewrite_rules();
Update: Finally Dario (the OP) found a working solution. Look at his answer.
References:
Tabbed My Account page (Official Woocommerce 2.6+): Creating new endpoints
How to add a new endpoint in woocommerce (old and incomplete)
There is a better way to use a template in your custom page in woocommerce:
function my_custom_endpoint_content() {
wc_get_template( 'myaccount/special-page.php' );
}
add_action( 'woocommerce_account_special-page_endpoint', 'my_custom_endpoint_content' );
this should work without using the wc_get_template filter.
You can add this code to your theme's function.php:
class My_Custom_My_Account_Endpoint {
/**
* Custom endpoint name.
*
* #var string
*/
public static $endpoint = 'special-page';
/**
* Plugin actions.
*/
public function __construct() {
// Actions used to insert a new endpoint in the WordPress.
add_action( 'init', array( $this, 'add_endpoints' ) );
add_filter( 'query_vars', array( $this, 'add_query_vars' ), 0 );
// Change the My Accout page title.
add_filter( 'the_title', array( $this, 'endpoint_title' ) );
// Insering your new tab/page into the My Account page.
add_filter( 'woocommerce_account_menu_items', array( $this, 'new_menu_items' ) );
add_action( 'woocommerce_account_' . self::$endpoint . '_endpoint', array( $this, 'endpoint_content' ) );
}
/**
* Register new endpoint to use inside My Account page.
*
* #see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
*/
public function add_endpoints() {
add_rewrite_endpoint( self::$endpoint, EP_ROOT | EP_PAGES );
}
/**
* Add new query var.
*
* #param array $vars
* #return array
*/
public function add_query_vars( $vars ) {
$vars[] = self::$endpoint;
return $vars;
}
/**
* Set endpoint title.
*
* #param string $title
* #return string
*/
public function endpoint_title( $title ) {
global $wp_query;
$is_endpoint = isset( $wp_query->query_vars[ self::$endpoint ] );
if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
// New page title.
$title = __( 'Special Page', 'woocommerce' );
remove_filter( 'the_title', array( $this, 'endpoint_title' ) );
}
return $title;
}
/**
* Insert the new endpoint into the My Account menu.
*
* #param array $items
* #return array
*/
public function new_menu_items( $items ) {
// Remove the logout menu item.
$logout = $items['customer-logout'];
unset( $items['customer-logout'] );
// Insert your custom endpoint.
$items[ self::$endpoint ] = __( 'Special Page', 'woocommerce' );
// Insert back the logout item.
$items['customer-logout'] = $logout;
return $items;
}
/**
* Endpoint HTML content.
*/
public function endpoint_content() {
include('woocommerce/myaccount/special-page.php');
}
/**
* Plugin install action.
* Flush rewrite rules to make our custom endpoint available.
*/
public static function install() {
flush_rewrite_rules();
}
}
new My_Custom_My_Account_Endpoint();
// Flush rewrite rules on plugin activation.
register_activation_hook( __FILE__, array( 'My_Custom_My_Account_Endpoint', 'install' ) );
If you don't know where is your theme's function.php:
1.Log in to the WordPress Admin interface
2.In the left sidebar, hover over Appearances, then click Theme Editor
3.In the right sidebar, click functions.php
I'm creating custom elements for WPBakery.
I have a folder called vc-elements which contains two files:
hero.php
text-image.php
On the WordPress admin side, I want both elements to be visible. To do this, in functions.php I'm running:
add_action( 'vc_before_init', 'vc_before_init_actions' );
function vc_before_init_actions() {
// Link to VC elements's folder
if( function_exists('vc_set_shortcodes_templates_dir') ){
vc_set_shortcodes_templates_dir( get_template_directory() . 'vc-elements' );
}
}
But in the admin side, neither of the two blocks show?
Previously I had:
function vc_before_init_actions() {
require_once( get_template_directory().'/vc-elements/hero.php' );
}
Which showed the hero block in the admin. But when I added:
function vc_before_init_actions() {
require_once( get_template_directory().'/vc-elements/hero.php' );
require_once( get_template_directory().'/vc-elements/text-image.php' );
}
In the admin side, the hero element is replaced by the text image element - only one shows at one time. Why's this?
Are you building this with a parent or child theme? I'm not sure about your markup.
Usually, when I add a custom module I need to check if the plugin exists..
<?php
/**
* Adds new shortcode "myprefix_say_hello" and registers it to
* the Visual Composer plugin
*
*/
if ( ! class_exists( 'EZ_VC_Product_Widget' ) ) {
class EZ_VC_Product_Widget {
/**
* Main constructor
*/
public function __construct() {
// Registers the shortcode in WordPress
add_shortcode( 'ez_product', array( 'EZ_VC_Product_Widget', 'output' ) );
// Map shortcode to Visual Composer
if ( function_exists( 'vc_lean_map' ) ) {
vc_lean_map( 'ez_product', array( 'EZ_VC_Product_Widget',
'map' ) );
}
}
/**
* Shortcode output
*/
public static function output( $atts, $content = null ) {
// Extract shortcode attributes (based on the vc_lean_map function - see next function)
extract( vc_map_get_attributes( 'ez_product', $atts ) );
// Define output
$product = wc_get_product($id);
if ( $id && $product) {
global $post;
$post = $product->get_post_data();
setup_postdata( $post );
ob_start();
get_template_part('template-parts/product-module');
wp_reset_postdata();
return ob_get_clean();
}
else
return '';
}
/**
* Map shortcode to VC
*
* This is an array of all your settings which become the shortcode attributes ($atts)
* for the output. See the link below for a description of all available parameters.
*
* #since 1.0.0
* #link https://kb.wpbakery.com/docs/inner-api/vc_map/
*/
public static function map() {
return array(
'name' => esc_html__( 'EZ Product', 'shopkeeper' ),
'description' => esc_html__( 'Shortcode outputs a single product.', 'shopkeeper' ),
'base' => 'ez_product',
"icon" => get_stylesheet_directory_uri() . "/vc_extend/ez_shortcode_icon.png",
'params' => array(
array(
'type' => 'autocomplete',
'heading' => esc_html__( 'Select identificator', 'js_composer' ),
'param_name' => 'id',
'description' => esc_html__( 'Input product ID or product SKU or product title to see suggestions', 'js_composer' ),
),
array(
'type' => 'hidden',
// This will not show on render, but will be used when defining value for autocomplete
'param_name' => 'sku',
),
),
);
}
}
}
add_action('vc_before_init', function(){
new EZ_VC_Product_Widget;
});
/**
* #action wp_ajax_vc_get_autocomplete_suggestion - since 4.4 used to
hook ajax requests for autocomplete suggestions
*/
add_action( 'wp_ajax_vc_get_autocomplete_suggestion',
'ez_vc_get_autocomplete_suggestion' );
/**
* #since 4.4
*/
function ez_vc_get_autocomplete_suggestion() {
vc_user_access()->checkAdminNonce()->validateDie()->wpAny(
'edit_posts', 'edit_pages' )->validateDie();
$query = vc_post_param( 'query' );
$shortcode = wp_strip_all_tags( vc_post_param( 'shortcode' ) );
if ( $shortcode == 'ez_product') {
$tag = 'product';//wp_strip_all_tags( vc_post_param( 'shortcode'
)
);
$param_name = vc_post_param( 'param' );
vc_render_suggestion( $query, $tag, $param_name );
exit;
}
}
I am a PHP beginner. I have trouble to making a basic if/then statement on function.
I add a woocommerce product tab 'Food_paring', I want to disable the tab when the field 'food_pairing" is empty/not set.
original code:
add_filter( 'woocommerce_product_tabs', 'new_product_tab' );
function new_product_tab( $tabs ) {
/* Adds the new tab */
$tabs['test_tab'] = array(
'title' => __( 'Food Pairing', 'woocommerce' ),
'priority' => 50,
'callback' => 'food_pairing_tab_content'
);
return $tabs; /* Return all tabs including the new New Custom Product Tab to display */
}
function food_pairing_tab_content() {
/* The new tab content */
echo '<h2>Food Pairing</h2><p id="tab-food-pairing">', get_post_meta( get_the_ID(), 'food_pairing', true ), '</p>';
}
Please check below code. Before add tab check if product meta has value or not global $post; if(get_post_meta($post->ID, 'food_pairing', true )){..}
add_filter( 'woocommerce_product_tabs', 'new_product_tab' );
function new_product_tab( $tabs ) {
global $post;
/* Adds the new tab */
if(get_post_meta($post->ID, 'food_pairing', true ))
{
$tabs['test_tab'] = array(
'title' => __( 'Food Pairing', 'woocommerce' ),
'priority' => 50,
'callback' => 'food_pairing_tab_content'
);
}
return $tabs; /* Return all tabs including the new New Custom Product Tab to display */
}
function food_pairing_tab_content() {
/* The new tab content */
echo '<h2>Food Pairing</h2><p id="tab-food-pairing">', get_post_meta( get_the_ID(), 'food_pairing', true ), '</p>';
}
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
global $woocommerce;
$tabs['desc_tab'] = array(
'title' => __( 'Ingredients', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content' ,
);
return $tabs;
}
function woo_new_product_tab_content() {
// The new tab content
echo '<p>Lorem Ipsum</p>';
echo $prod_id = get_the_ID();
echo'<p>'.get_post_meta($prod_id,'ingredients',true).'</p>';
}
this code is properly working... should try . Good Luck
I'm having problems with adding a custom settings page for wordpress, and more specifically getting the options to save.
The documentation for this seems to be lacking and inconsistent, as different examples and different different functions explain the same thing differently.
The newest example on the wordpress codex uses the sanitize callback function to save options. But the add_settings_field() documentation says that saving the options should happen behind the scenes. Seems wierd to use san callback to save anyways.
I have tried various different approaches, and at one time my code managed to save one of the fields but not all of them.
My current code:
class wwtkSettings {
public function __construct() {
if ( is_admin() ){
add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
add_action( 'admin_init', array( $this, 'page_init' ) );
}
}
public function add_plugin_page(){
add_options_page( 'WWTK Settings', 'WWTK settings', 'manage_options', 'wwtk-settings', array( $this, 'create_admin_page' ) );
}
public function create_admin_page() {
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>WWTK Settings</h2>
<form method="post" action="options.php">
<?php
settings_fields( 'wwtk-setting-group' );
do_settings_sections( 'wwtk-settings' );
?>
<?php submit_button(); ?>
</form>
</div>
<?php
}
public function page_init() {
register_setting( 'wwtk-setting-group', 'wwtk-setting-group', array( $this, 'wwtk_validate_options' ) );
add_settings_section(
'wwtk-settings-section',
'Categories and pages',
array( $this, 'print_section_info' ),
'wwtk-settings'
);
add_settings_field(
'frontpage',
'Frontpage category:',
array( $this, 'create_category_field' ),
'wwtk-settings',
'wwtk-settings-section',
'frontpage'
);
add_settings_field(
'category1',
'Category & page 1',
array( $this, 'create_category_field' ),
'wwtk-settings',
'wwtk-settings-section',
'category1'
);
add_settings_field(
'category2',
'Category & page 2',
array( $this, 'create_category_field' ),
'wwtk-settings',
'wwtk-settings-section',
'category2'
);
add_settings_field(
'category3',
'Category & page 3',
array( $this, 'create_category_field' ),
'wwtk-settings',
'wwtk-settings-section',
'category3'
);
}
//TODO: check if category and page exist. and sanitize!
public function wwtk_validate_options( $input ) {
return $input;
}
public function print_section_info(){
print 'Enter the names of categories that should be displayed on the page with the same name(both must exist):';
}
public function create_category_field($args){
?><input type="text" id="<?php echo $args ?>" name="wwtk-setting-group" value="<?php echo get_option( 'wwtk-setting-group['.$args.']' ); ?>" /><?php
}
}
/* code similar to your example */
class MySettingsPage{
/**
* Holds the values to be used in the fields callbacks
*/
private $options;
/**
* Start up
*/
public function __construct()
{
add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
add_action( 'admin_init', array( $this, 'page_init' ) );
}
/**
* Add options page
*/
public function add_plugin_page()
{
// This page will be under "Settings"
add_options_page(
'Settings Admin',
'My Settings',
'manage_options',
'my-setting-admin',
array( $this, 'create_admin_page' )
);
}
/**
* Options page callback
*/
public function create_admin_page()
{
// Set class property
$this->options = get_option( 'my_option_name' );
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>My Settings</h2>
<form method="post" action="options.php">
<?php
// This prints out all hidden setting fields
settings_fields( 'my_option_group' );
do_settings_sections( 'my-setting-admin' );
submit_button();
?>
</form>
</div>
<?php
}
/**
* Register and add settings
*/
public function page_init()
{
register_setting(
'my_option_group', // Option group
'my_option_name', // Option name
array( $this, 'sanitize' ) // Sanitize
);
add_settings_section(
'setting_section_id', // ID
'My Custom Settings', // Title
array( $this, 'print_section_info' ), // Callback
'my-setting-admin' // Page
);
add_settings_field(
'id_number', // ID
'ID Number', // Title
array( $this, 'id_number_callback' ), // Callback
'my-setting-admin', // Page
'setting_section_id' // Section
);
add_settings_field(
'title',
'Title',
array( $this, 'title_callback' ),
'my-setting-admin',
'setting_section_id'
);
}
/**
* Sanitize each setting field as needed
*
* #param array $input Contains all settings fields as array keys
*/
public function sanitize( $input )
{
if( !is_numeric( $input['id_number'] ) )
$input['id_number'] = '';
if( !empty( $input['title'] ) )
$input['title'] = sanitize_text_field( $input['title'] );
return $input;
}
/**
* Print the Section text
*/
public function print_section_info()
{
print 'Enter your settings below:';
}
/**
* Get the settings option array and print one of its values
*/
public function id_number_callback()
{
printf(
'<input type="text" id="id_number" name="my_option_name[id_number]" value="%s" />',
esc_attr( $this->options['id_number'])
);
}
/**
* Get the settings option array and print one of its values
*/
public function title_callback()
{
printf(
'<input type="text" id="title" name="my_option_name[title]" value="%s" />',
esc_attr( $this->options['title'])
);
}
}
if( is_admin() )
$my_settings_page = new MySettingsPage();