I've been using "tiny_mce_before_init" in WordPress to add my own custom styles to the style dropdown in the editor.
Everything has been working fine but now I need to add a style that doesn't just add one element but two. Do you know if that's possible?
Here's how I'm adding single elements:
<?php
add_filter('tiny_mce_before_init', 'my_tinymce_styles');
function my_tinymce_styles ($init) {
$styles = array(
array(
'title' => 'Small',
'inline' => 'small',
'wrapper' => false
),
array(
'title' => 'Bar',
'block' => 'div',
'classes' => 'bar',
'wrapper' => true
)
# Etc...
);
# Insert the array, JSON ENCODED, into 'style_formats'
$init['style_formats'] = json_encode($styles);
return $init;
}
And this works as expected. The user selects some text, chooses "Bar" from the "Styles" dropdown and the text is wrapped in <div class="bar">...</div>.
However, now I need to do that same but add <div class="section"><div class="inner">TEXT_HERE</div></div> - how can I do that?
Related
I need to change the position, color, background-image of elements inside each repeater separately.
My widget code is here:
$repeater->add_control(
'clock_gy_minute_hand_position', array(
'label' => __('Minute Hand Position', 'origami-clock'),
'type' => Controls_Manager::DIMENSIONS,
'default' => array('isLinked' => false),
'size_units' => ['px'],
'allowed_dimensions' => ['top', 'left'],
'selectors' => [
'{{WRAPPER}} .clock' => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left:
{{LEFT}}%;',
],
)
)
);
when got the data of each repeater by looping, It's applied the CSS position of each clock hand to the same position. It applies the last repeater item's position to all the elements. I need to identify each repeater element uniquely.
I see some article says like this
'{{WRAPPER}} .clock'.$item['_id'] => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left:{{LEFT}}%;',
Unfortunately, this also not working for me.
selector should be
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} .clock' => 'background-color: {{VALUE}};',
]
add this class to your repeated item
elementor-repeater-item-' . $item['_id']
Hope this will work for you
I am following this example to create a container for some shortcode that would allow me to wrap multiple sub page builder elements.
https://kb.wpbakery.com/docs/developers-how-tos/nested-shortcodes-container/
If I used the example code it works as expected and allows me to add elements inside the new container, but when I apply the code to my shortcode I do not get the option to add the inner elements. I guessing it something to do with the shortcode https://wordpress.org/plugins/infusionsoft-official-opt-in-forms/
Here is my code
//Register "container" content element. It will hold all your inner (child) content elements
vc_map( array(
"name" => __("InfusionSoft Blocker", "zzone"),
"base" => "inf_infusionsoft_locked",
"as_parent" => array('except'), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
"content_element" => true,
"show_settings_on_create" => true,
"is_container" => true,
"params" => array(
// add params same as with any other content element
array(
"type" => "textfield",
"heading" => __("Optin ID", "zzone"),
"param_name" => "optin_id",
"value" => 'optin_1',
"description" => __("Example: optin_1", "my-text-domain")
)
),
"js_view" => 'VcColumnView'
) );
//Your "container" content element should extend WPBakeryShortCodesContainer class to inherit all required functionality
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
class WPBakeryShortCode_InfusionSoft_Blocker extends WPBakeryShortCodesContainer {
}
}
When you extend WPBakeryShortCodesContainer you have to name the class as WPBakeryShortCode_[shortcode_base]
So you code should look like this:
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
class WPBakeryShortCode_inf_infusionsoft_locked extends WPBakeryShortCodesContainer {}
}
Tip: "as_parent" => array('except') will show every shortcode. If you don't want your shortcode to nest itself, set "as_parent" => array('except' => 'inf_infusionsoft_locked')
I wish to add our own service menu above the WordPress administration bar in the administration area. I do not wish to hack the WordPress system, but I cannot find a hook.
Is there a method?
You can add extra menu items in your administrator menu bar instead of removing/replacing the menu bar.
Below is an example which will insert one menu item with two sub menu items. Just paste the code in your functions.php and log in to your WordPress as admin. If everything goes right then you can see an extra menu in your administrator bar. To accomplish this, WordPress provided the admin_bar_menu hook:
add_action('admin_bar_menu', 'my_custom_menu', 1000);
function my_custom_menu()
{
global $wp_admin_bar;
if(!is_super_admin() || !is_admin_bar_showing()) return;
// Add Parent Menu
$argsParent=array(
'id' => 'myCustomMenu',
'title' => 'Services',
'href' => false
);
$wp_admin_bar->add_menu($argsParent);
// Add Sub Menus
$argsSub1=array(
'parent' => 'myCustomMenu',
'title' => 'Visit Heera IT',
'href' => 'http://heera.it',
'meta' => array('target' => '_blank')
);
$wp_admin_bar->add_menu($argsSub1);
$argsSub2=array(
'parent' => 'myCustomMenu',
'title' => 'Visit StackOverflow',
'href' => 'http://stackoverflow.com/',
'meta' => array('target' => '_blank')
);
$wp_admin_bar->add_menu($argsSub2);
}
For more details, you can visit Codex.
You can also accomplish this using a plugin that allows you to easily customize the content and appearance of the WordPress Admin Bar. Here are a few plugins to consider:
Plugin #1
Plugin #2
Plugin #3
$wp_admin_bar->add_menu(array
(
"parent" => "bba_booking_bank",
"id" => "bba_booking_bank_location",
"title" => $bba_location_providers_wizard_setup,
"href" => admin_url("admin.php?page=booking_bank"),
));
$wp_admin_bar->add_menu(array
(
"parent" => "bba_booking_bank",
"id" => "bba_booking_bank_calendar",
"title" => $bba_booking_bank_calendar,
"href" => admin_url("admin.php?page=bba_booking_calendar"),
)
);
I've read several tutorials for adding custom styles to the WYSIWYG (TinyMCE) editor. None of them seem to work in the newest version(s) of Wordpress. I'm using v3.3.2. The instructions from the codex work, but in a limited way...
NOTE: To be 100% clear, I'm trying to add a "Styles" dropdown which the author can use to apply my custom styles to the text. (Please don't confuse my question with how to style the editor its self, using editor-style.css... )
I managed to get the code working, but only using the commented-out line in my_mce_before_init(). The problem with this version is that it adds the class with a generic <span>. I'm trying to use the more powerful version of the code (as shown below), but something isn't quite right. The styles drop-down box appears, but it's blank. If I click it the first item is says "Styles" but does nothing. I suspect there's something off about my array. Hopefully someone more knowledgeable than me can set me straight.
Here's the relevant code in my theme's functions.php...
Here's how I add the button:
// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');
Here's how I add the styles (it works when I uncomment the ):
//Define the actual styles that will be in the box
function my_mce_before_init($init_array)
{
// add classes using a ; separated values
//$init_array['theme_advanced_styles'] = "Section Head=section-head;Sub Section Head=sub-section-head";
$temp_array['theme_advanced_styles'] = array(
array(
'title' => 'Section Head',
'block' => 'h3',
'classes' => 'section-head'
),
array(
'title' => 'Sub Section Head',
'block' => 'h4',
'classes' => 'sub-section-head'
)
);
$styles_array = json_encode( $temp_array['theme_advanced_styles'] );
// THIS IS THE PROBLEM !!!! READ BELOW
$init_array['theme_advanced_styles'] = $styles_array;
return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
UPDATE: I figured it out (see my answer below). Before you scroll down, notice in the code above, theme_advanced_styles is the wrong key. It should be style_formats when defining the custom styles in the way that I'm doing. I suspect this is a common mistake.
It seems you're using this (awesome) tutorial: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
Worked great for me so I compared your code with mine: it seems you lack a
'wrapper' => true
as a fourth parameter to each sub-array. This is needed for adding a class on a parent element of your selection (it can broaden your selection) and not creating a new element around your exact selection before adding it a class.
Thus if you select part of a paragraph or part of 2 paragraphs, it'll select the whole paragraph(s) (not so sure about the 2 paragraphs thing, please test :) but at least it won't create inline element around your exact selection).
From the documentation (above link):
wrapper [optional, default = false]
if set to true, creates a new block-level element
around any selected block-level elements
My customization:
$style_formats = array(
array(
'title' => 'Column',
'block' => 'div',
'classes' => 'col',
'wrapper' => true
),
array(
'title' => 'Some div with a class',
'block' => 'div',
'classes' => 'some_class',
'wrapper' => true
),
array(
'title' => 'Title with other CSS',
'selector' => 'h3',
'classes' => 'other_style'
),
array(
'title' => 'Read more link',
'selector' => 'a',
'classes' => 'more'
)
);
Hope it works for you
AHA!
I found the problem: the two different versions of defining the custom classes must be added to different keys in the settings array.
This version...
"Section Head=section-head;Sub Section Head=sub-section-head";
...needs to be the value of 'theme_advanced_styles'.
Whereas this version...
$style_formats = array(
array(
'title' => 'Column',
'block' => 'div',
'classes' => 'col',
'wrapper' => true
),
);
...needs to be the value of 'style_formats' in the TinyMCE settings array.
I had changed to the second style but hadn't noticed the different key for the array.
Wordpress provides a function for adding a custom stylesheet to the editor: http://codex.wordpress.org/Function_Reference/add_editor_style
I have programatically added a "markup" element to a Drupal form. When it renders on the page, the element appears in the wrapper for the submit button. Clarification: It should appear between the 'field_school_name_value' element and the 'distance' element. I have set the weights of every element in hopes that that would force the layout to be right, but it doesn't seems to help. What am I doing wrong?
<?php
function abq_misc_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'views_exposed_form') {
$state_select = array(
'#attributes' => array(
'style' => 'width:10em;',
),
'#default_value' => 'All',
'#multiple' => FALSE,
'#options' => array_merge(array('All' => 'State'), location_get_provinces()),
'#title' => NULL,
'#type' => 'select',
'#weight' => 0,
);
$form['province'] = $state_select;
$school = &$form['field_school_name_value'];
$school['#attributes'] = array(
'size' => 15,
);
$school['#weight'] = 1;
// THIS GUY
$form['divider'] = array(
'#type' => 'item',
'#markup' => '<div>–or–</div>',
'#weight' => 2,
);
$form['distance']['#weight'] = 3;
$search_distance = &$form['distance']['search_distance'];
$search_distance['#attributes'] = array(
'placeholder' => 'miles',
'size' => '5',
);
$search_distance['#prefix'] = 'Within';
$search_distance['#suffix'] = 'of';
unset($search_distance['#title']);
$search_distance['#weight'] = 0;
$postal_code = &$form['distance']['postal_code'];
unset($postal_code['#title']);
$postal_code['#attributes'] = array(
'placeholder' => 'Zip Code',
'size' => '5',
);
$postal_code['#weight'] = 1;
hide($form['distance']['search_units']);
$form['submit']['#weight'] = 4;
}
}
I'm not sure why that's happening, there's no good reason for your element to be rendered inside the wrapper for the submit button.
An easy fix, though, would be to use the #prefix attribute on the submit button which would guarantee that your markup was rendered immediately before the wrapper for the submit button:
$form['submit']['#prefix'] = '<div>–or–</div>';
UPDATE
Just to address your edit, I think the same solution can apply if you set the #prefix of the distance element instead:
$form['distance']['#prefix'] = '<div>–or–</div>';
It's possible that there's some extra formatting done by another module that implements hook_form_alter which happens to run after yours, messing up your good work. By applying the prefix to the distance element you'll be ensuring it comes immediately before the field_school_name_value element.
I should mention that I've had problems with exactly this when taking a reference to an array member of the provided $form (which you're doing with $school = &$form['field_school_name_value'];). As an extra sanity check I'd recommend changing that bit of code to this and see if it helps (try this before the other suggestion above as it might just fix it):
$form['field_school_name_value']['#attributes'] = array('size' => 15);
$form['field_school_name_value']['#weight'] = 1;
instead of
$school = &$form['field_school_name_value'];
$school['#attributes'] = array(
'size' => 15,
);
$school['#weight'] = 1;
Although this is an almost 7 years old issue, I just run this problem.
Here is the solution: https://www.drupal.org/project/views/issues/2070533
First, you should declare your markup in your form_alter hook but the '#printed' key must be declared in your defining array. Then you should implement the template_preprocess_views_exposed_form() function in your module or in theme. Here you can render the required form element by drupal_render and add it to $variables. And finally you can print out the variable in the theme (as custom variable or among widgets).
But the simpliest version: clone the views-exposed-form.tpl.php to the template directory of your theme, name it as is suggested (eg. views-exposed-form--news.tpl.php) and print your linebreak where you want.