The following is the code from WooCommerce to Add Extra Tabs:
My Question is, how to insert a video link, or an iframe in the tab content.
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'New Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
// The new tab content
echo '<h2>New Product Tab</h2>';
echo '<p>Here\'s your tab content.</p>';
}
How to insert anchor text, or iframe inside "Tab Content"
Any Help would appreciated..
Cheers
If you just want to show a static video iframe in your tab content, then simply add iframe/video tag in your tab content callback function likes
function woo_new_product_tab_content() {
// The new tab content
echo '<h2>See the video</h2>';
echo '<div><iframe width="100%" height="315" src="paste your video link here" frameborder="0" allowfullscreen></iframe></div>'; }
Or if your wants dynamic video link for each product then you must have to store video link in respective product meta first. And then echo get_post_meta for video on above 'src' attr.
Related
My controller
public function actionIndex()
{
return $this->render('index');
}
In the view I call a series of widgets. All the logic inside the widgets, they do not have any input parameters. In each block for every widget I want to add a button to update the widget inside this block.
<?= Html::a("Обновить", ['???'], ['class' => 'btn btn-sm btn-default', 'data-pjax' => '#formsection']) ?>
I put widget in pjax
<?php Pjax::begin(['id' => 'formsection', 'linkSelector' => '#chart a']); ?>
<div class="chart" id="chart" style="height: 200px; position: relative;">
<?= Chart::widget(); ?>
</div>
<?php Pjax::end(); ?>
How to assign a specific block to a button?
As i understand the chart is drawn via some values from the database which are frequently updated and you want those changes to be reflected in the chart when you click the reload button.
If the above is correct then you should use $.pjax.reload simply to reload the section bind the click event to the button
$this->registerJs('
jQuery(document).on("click", "#my-button", function(event){
$.pjax.reload({container:"#formsection",timeout:1000})
}
);
');
Hope that helps.
Pjax for Alerts
There is alert.php included in layout file above $content. This is as below :
<?php Pjax::begin(['id'=> 'new-alert','enablePushState' => false]); ?>
<?= \odaialali\yii2toastr\ToastrFlash::widget([
'options' => [
'positionClass' => 'toast-bottom-full-width',
//'progressBar' => true,
'timeOut' => 6000,
'extendedTimeOut' => 2000
]
]);?>
<?php Pjax::end(); ?>
And to get flash messages in ajax , there are calls to below container
$.pjax.reload({container:'#new-alert'});
This results in showing of alert messages but also sends an Ajax request to URL whichever page is open. Can we trigger request to "/site/toast" on ajax calls which can renderAjax the above widget inplace of making ajax request on current url ?
Since there are no html "a" tag well as neither any "form" tag here inside widget generated html, Is this correct use of pjax ?
http://localhost:8081/about-us?_pjax=%23new-alert
Pjax for form
Also if we wrap an Active Form inside Pjax, how can we make sure that none of A tags or nested Form trigger a Pjax request except the container form ?
I have removed call for pjax from PHP and made alert as below -
<div id="new-alert">
<?= \odaialali\yii2toastr\ToastrFlash::widget([
'options' => [
'positionClass' => 'toast-bottom-full-width',
//'progressBar' => true,
'timeOut' => 6000,
'extendedTimeOut' => 2000
]
]); ?>
</div>
Instead I am making pjax call from javascript as below -
$.pjax({url: encodeURI(baseUri + "site/toast"), container: '#new-alert', push: false})
public function actionToast()
{
if(Yii::$app->request->getHeaders()->has('X-PJAX'))
{
return $this->renderAjax('//common/alert');
}
else
{
return $this->redirect(Yii::$app->request->referrer);
}
}
$.pjax.reload was previously retrieving additional toasts if there were some for current url as well. Above solution only gets toasts related to ajax.
I create a custom plugin that has a wp_editor on the admin, now when I put some html tags in the editor in Text view tab like <br> and click on the Visual tab.. the <br> converts into <p> </p> when I back to Text tab.
this is my php code:
$html_value = '<h1>test</h1><br> ....';
$settings = array( 'textarea_name' => 'al_srms_fileform_content', 'media_buttons' => true, 'wpautop' => false );
wp_editor($html_value, 'mycustomeditor0pdf', $settings );
this is what happening:
I put <br> tag by Text tab.
I click Visual to display the result.
I click back the Text tab and the <br> is gone and replaced by <p> </p>
is there a way the when putting a <br> it remains <br> ?
I hope this will assist you. You don't need to install the suggested plug-in, though. Just add this mini plugin and you're set:
<?php
defined( 'ABSPATH' ) OR exit;
/* Plugin Name: TinyMCE break instead of paragraph */
function mytheme_tinymce_settings( $tinymce_init_settings ) {
$tinymce_init_settings['forced_root_block'] = false;
return $tinymce_init_settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );
Now when you press enter, <br> tag will be inserted instead of creating new paragraph. But beware, if you create two consecutive newlines, the text will still be split to paragraph as a result of wpautop filter applied to your post content. You need to remove this filter first and create a new filter that will replace all newlines with <br> tags. Add something like this to your functions.php to display the <br> tags in your template:
remove_filter ( 'the_content', 'wpautop' );
add_filter ( 'the_content', 'add_newlines_to_post_content' );
function add_newlines_to_post_content( $content ) {
return nl2br( $content );
}
The problem you are running into is the result of the wpautop filter function in your Themes functions.php file.
To disable this function add the following to lines to your functions.php file located in your themes directory:
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
Reference: https://codex.wordpress.org/Function_Reference/wpautop (Wordpress Codex)
I have a code in wordpress which generates a horizontal menu. The code is
<? php wp_nav_menu (array ('theme_location' => 'header-menu'));?>
I would like to have a drop down instead, and tried the following code but its not working.
<select name="blog-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">Navigering</option><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?></select>
What is wrong? I get an empty drop down list.
i was able to meet the similar requirement by using this WordPress function wp_dropdown_pages($args);
the drop down options contain the page id as value so i used them to redirect user through jquery. my jquery code looks as follows:
$("nav select").change(function() {
var pageID = $(this).find("option:selected").val();
window.location = siteurl + '?p=' + pageID;
});
here siteurl contains my home page URL(which is WordPress blog URL)
u can keep some div like below in the footer.php
<div id="wordpress_blog_url" style="display:none;"><?php bloginfo('template_url'); ?></div>
and then
var siteurl = $('#WordPress').html();
It's empty in your browser but inspect the code (or read the html source).
The wp_nav_menu function create an ul>li>a tags.
http://codex.wordpress.org/Function_Reference/wp_nav_menu.
The option tag needs something like this :
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
How to create new wordpress widgets for my themes ?
If you want to create a widget. Navigate to your plugins folder and create a blank file named as “sample.php” in “Sample” folder..
Copy below code and paste in sample.php file.
<?php
/*
Plugin Name: Widget
Description: Widget Description
*/
// Creating the widget
// Create a class named as "sample_widget" that is a child class of "WP_Widget".
class sample_widget extends WP_Widget
{
//Constructor of class
public function __construct()
{
parent::__construct(
// Id of our widget.
'sample_widget',
// This is the widget name that will be visible to user
__('Sample Widget'),
// Description of our widget
array(
'description' => __('Description of our widget.')
));
}
// Creating widget front-end
// This is where the action happens
// Creating function named as "widget", receiving two parameters.
public function widget($args, $instance)
{
/*Getting and assigning our widget title to wordpress hook "widget_title"
and passing its value to "$title" */
$title = apply_filters('widget_title', $instance['title']);
// Area, that is before the widget is diplayed
echo $args['before_widget'];
// Checking "$title" is empty or not
if (!empty($title)) /* If "$title" is not empty, below code will execute.
$args['before_title'] -> Displaying content before our widget title
$title -> Display our widget title
$args['after_title'] -> Displaying content after our widget title */ {
echo $args['before_title'] . $title . $args['after_title'];
}
// Displaying text of our widget
echo __('Hello, this is our widget text!');
// Displaying content after our widget
echo $args['after_widget'];
}
// This function naming our widget title
public function form($instance)
{
// If title is already set.
if (isset($instance['title'])) {
// $title is getting already assigned title
$title = $instance['title'];
}
// Otherwise our default title will be "Widget title"
else {
$title = __('Widget title');
}
?>
<!-- These are the settings and user interface that an admin will see -->
<p>
<!-- Already set title will be displayed at the top of our widget in admin panel -->
<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
}
// This function will replace old title with new title of our widget
public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
}
// Function to register and load our newly widget
function sample_widget_load()
{
// Registering our widget named as "sample_widget"
register_widget('sample_widget');
}
// Calling our newly created function named as "sample_widget_load" to register our widget
add_action('widgets_init', 'sample_widget_load');
?>
This is my favourite tutorial about that:
http://justintadlock.com/archives/2009/05/26/the-complete-guide-to-creating-widgets-in-wordpress-28
I'm using it as a base to all my widgets.
Basically, the widget is a plugin, but you extend the class WP_Widget. It's quite easy, just follow that tutorial.
Also this is helpful http://codex.wordpress.org/Widgets_API
Good luck!
This is more a question for google than stackoverflow. You'll find tons of tutorials and examples on the web.
Widget API on wordpress site:
http://codex.wordpress.org/Widgets_API
Example of tutorial:
http://justintadlock.com/archives/2009/05/26/the-complete-guide-to-creating-widgets-in-wordpress-28
Another one:
http://www.lonewolfdesigns.co.uk/create-wordpress-widgets/