I have a 100+ qustion form. I want to break it up into several tabs using TabSet in silverstripe.
I can create a form using:
$form = Form::create(
$this,
__FUNCTION__,
FieldList::create(
FieldGroup::create(
//...)));
And I can create the tabset:
$tabset = new TabSet(
$name = "TheTabSetName",
new Tab(
$title='Contact Information',
new HeaderField("A header"),
new LiteralField("Lipsum","Lorem ipsum dolor sit amet enim.")
),
new Tab(
$title='Education Experience',
new HeaderField("A second header"),
new LiteralField("Lipsum","Ipsum dolor sit amet enim.")
),
new Tab(
$title='Appointments',
new HeaderField("A second header"),
new LiteralField("Lipsum","Ipsum dolor sit amet enim.")
),
new Tab(
$title='Professional',
new HeaderField("A second header"),
new LiteralField("Lipsum","Ipsum dolor sit amet enim.")
),
new Tab(
$title='Document Upload',
new HeaderField("A second header"),
new LiteralField("Lipsum","Ipsum dolor sit amet enim.")
)
);
return $tabset;
If this needs to be one form with one dataobject how do I break up the form into the separate tabs?
In order to add the TabSet to the Form you just need to add the tab set to the field list.
FieldList::create($tabset)
Is this what you needed? Or do you need to find a way of adding the 100+ fields to the form from the dataobject?
Related
I want to learn more about elementor theme development. I have set up header.php, footer.php and index.php and created a new page via wordpress admin. I added a new widget, which show correctly in my editor, but when i publish the page, my global elementor styles are not applied. I tried searching the documentation and googling, but found nothing. I assume i need to call some elementor function to make this work. What am i missing?
For example: --e-global-color-primary is undefined
Here are my files:
header.php
<!DOCTYPE HTML>
<html>
<head>
</head>
<body <?php body_class(); ?>>
<?php wp_head(); ?>
footer.php
<?php wp_footer(); ?>
</body>
</html>
index.php
<?php get_header(); ?>
<?php the_content(); ?>
<?php get_footer(); ?>
I have done some extra research on this. It is a bug in elementor and is not fixed yet. I ended up doing a workaround. It is provided below if anyone needs it.
add_action('the_content', 'load_elementor_style');
function load_elementor_style($content) {
[
$primary_color,
$secondary_color,
$text_color,
$accent_color
] = get_elementor_colors();
[
$primary_font,
$primary_font_weight,
$secondary_font,
$secondary_font_weight,
$text_font,
$text_font_weight,
$accent_font,
$accent_font_weight
] = get_elementor_fonts();
$content .= sprintf(
'
<style>
:root {
--e-global-color-primary: %s !important;
--e-global-color-secondary: %s;
--e-global-color-text: %s;
--e-global-color-accent: %s;
--e-global-typography-primary-font-family: %s;
--e-global-typography-primary-font-weight: %s;
--e-global-typography-secondary-font-family: %s;
--e-global-typography-secondary-font-weight: %s;
--e-global-typography-text-font-family: %s;
--e-global-typography-text-font-weight: %s;
--e-global-typography-accent-font-family: %s;
--e-global-typography-accent-font-weight: %s;
}
</style>
',
$primary_color,
$secondary_color,
$text_color,
$accent_color,
$primary_font,
$primary_font_weight,
$secondary_font,
$secondary_font_weight,
$text_font,
$text_font_weight,
$accent_font,
$accent_font_weight
);
return $content;
}
If you look at your browser developer tools inspector and take a look at .elementor-kit-X {...} (where X is a number set by elementor) at the bottom of your CSS declarations, you'll see all of the specified __globals__, which includes your font families as well.
Take this control as an example:
// Circle Color
$this->add_control(
'list_circle_color', [
'label' => __('Circle Color', 'vs-elementor-elements'),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => __('', 'vs-elementor-elements'),
'frontend_available' => true,
'label_block' => true,
'placeholder' => __('E.g. #11a0c0', 'vs-elementor-elements'),
]
);
Next, add this near the top of your protected function render(){...}: echo'<pre>';print_r($settings);echo'</pre>';
Go into edit mode, and specify a non-global color for your list_circle_color control. Then save. Now refresh your page.
You will see your data printed on the page resembling the following:
(
[control_item1] => 6000
[control_item2] => Lorem ipsum
[list_circle_color] => #AFE039
[control_itemETC] => Dolor Sit Amet
)
You see list_circle_color set to #AFE039.
Now go back and edit your color again, but this time select an Elementor global color. Then save. New refresh your page.
You will see your data printed on the page resembling the following:
(
[control_item1] => 6000
[control_item2] => Lorem ipsum
[__globals__] => Array
(
[list_circle_color] => globals/colors?id=13c6ce9
)
[list_circle_color] =>
[control_itemETC] => Dolor Sit Amet
)
Now how to work with this? Recall from above I mentioned that Elementor stores your globals inside .elementor-kit-N {...}? Here is a reference at w3schools.
But how do you get the value set by globals/colors?id=13c6ce9? You can do this using PHP's str_replace, as in the following:
$list_circle_color_global = $setting['__globals__']['list_circle_color'];
$list_circle_color_global = str_replace('globals/colors?id=','--e-global-color-',$list_circle_color_global);
This will give you the var with the full property ending that you need, as in:
--e-global-color-13c6ce9
Now assign either via an internal spreadsheet in your widget, or as an inline style:
.mycircle{ background-color: <?php echo 'var(' . $list_circle_color_global . ')'; ?>; }
Lastly, how do you check to see if you are using a global or a non-globally set color value? Check __globals__ and list_circle_color using a simple if condition:
$circlecolor = $list_circle_color_global ? 'var(' . $list_circle_color_global . ')' : $list_circle_color;
** $list_circle_color should be set when you're specifying your variables. I excluded that before. When you specified $list_circle_color_global initially above, you would also create $list_circle_color = $settings['list_circle_color'];
I have use WordPress editor but I don't want to remove all extra <p></p> and <br> tags.
How to stop removing p & br tags in wordpress editor without any plugins
Anyone please help.
Recently I tried to solve same issue and found this https://www.leighton.com/blog/stop-tinymce-in-wordpress-3-x-messing-up-your-html-code
A solution that works
After making do with a setup that was marginally better than the out-of-the-box way of working for 6 months, we found that the JavaScript modification method above no longer worked due to changes in the core TinyMCE.js file introduced with recent versions of WordPress 3.x, and that there had been an easy, clean and highly effective solution under our noses all the time that essentially replicates our old JavaScript method but using PHP and WordPress hooks to change the parameters TinyMCE uses when it is initiated.
This short bit of PHP code should be put into your themes functions.php file
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
… and voila! no more messing with your source code when saving or switching views
I have a solution how to stop removing <br> tags or double (<br><br>) line breaks.
Make changes to your file /wp-content/themes/your_theme_name/functions.php
Add 2 lines to the top of your functions.
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
This will turn off wpautopop function.
Make changes in file /wp-includes/formatting.php in function wpautop.
A) Change function wpautop( $pee, $br = true) to function wpautop( $pee, $br = false).
This will additionally turn off wpautopop function from all places.
B) Change $pee = preg_replace('|<br\s*/?>\s*<br\s*/?>|', "\n\n", $pee); to
$pee1 = $pee;
$pee = preg_replace('|<br\s*/?>\s*<br\s*/?>|', "\n\n", $pee);
$pee = $pee1;
This will prevent the system from removing double <br> tags. (I know the code is strange but simple //$pee doesn't help here because of ?> tag).
C) Change $pee = preg_replace("/\n\n+/", "\n\n", $pee); to //$pee = preg_replace("/\n\n+/", "\n\n", $pee);
This will prevent the system from removing multiple line breaks.
D) Change this:
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee);
to that:
//$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee);
This will prevent the system from removing line breaks after the opening or before the closing block element tag like <div>, <article>, etc.
E) Change this:
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
to that:
//$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
Pretty the same: This will prevent the system from removing line breaks after the opening or before the closing block element tag like <div>, <article>, etc.
F) Change this:
$pee = preg_replace('!<br />(\s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)!', '$1', $pee);
to that:
// $pee = preg_replace('!<br />(\s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)!', '$1', $pee);
This will prevent the system from removing <br> at the end of the block.
G) Change this:
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*<br />!', "$1", $pee);
to that:
//$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*<br />!', "$1", $pee);
This will prevent the system from removing <br> after an opening or closing block tag.
Hope it will help! And read comments in this file – they will help you to understand what you need to turn on or turn off.
I've had the same problem and i've been using the no breaking space tag to 'fix' it. The content in my text tab of the editor will look something like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus placerat risus, vel suscipit nibh cursus sed. Donec sit amet urna maximus enim malesuada eleifend et sit amet nibh.
Fusce accumsan justo id orci suscipit pulvinar. In feugiat dolor id blandit luctus. Phasellus placerat enim felis, quis elementum risus ultricies sagittis.
So another nested shortcodes problem.
I have two shortcodes : [slide] and [prg]. They're both enclosing shortcodes. [prg] is nested into [slide]. But [prg] isn't interpreted.
The two shortcodes work well separately.
I know the do_shortcode() function but it seems not working, I don't know why.
Here's the code I've write :
add_action( 'init', 'register_shortcodes');
function make_slide($atts, $content = null) {
extract(shortcode_atts(array(
'num' => 1,
), $atts));
$post_title = get_the_title($post->ID);
$wrap = '<div class="slide slide-'.$num.'"><h1 class="h2-like projet_title">'.$post_title.'</h1>'.$content.'</div>';
return $wrap;
}
function wrap_paragraph($atts, $content = null)
{
$content = do_shortcode($content); //I've tried several solutions but none've worked.
return '<p>'.$content.'</p>';
}
function register_shortcodes(){
add_shortcode('slide', 'make_slide');
add_shortcode('prg', 'wrap_paragraph');
}
And here's the content of my post (a custom post type) in the html editor :
[slide num="1"]<img title="4a6c2a605946a_1080x733" src="http://localhost:8888/labs/noway/wordpress_1/wp-content/uploads/2012/09/4a6c2a605946a_1080x733-460x312.jpg" alt="4a6c2a605946a_1080x733" width="460" height="312" />
[prg]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.[/prg][/slide]
I've read several posts on this site and other ones such as sitepoint.com and speckyboy.com, as well as the wordpress codex but the answers doesn't work for me.
Perhaps it's just because i'm not implementing shortcodes the right way in my function.php file?
If anybody can help me ? I really want to understand what makes it not working. Thanks a lot in advance.
Sorry for my bad english, I hope I'm understandable.
EDIT
I've stupidely validated my comment before finishing it, so there it is :
Hi #maiorano and thanks a lot for your help, it worked perfectly.
However even if your code is really good, I can't use it as it is because I need to get the pictures directly from the media library, with as less as possible human intervention in the MCE editor. But it has made me learn a godd way to go.
Also I've tested to use do_shortcode into the top-level shortcode, but it produced a weird result : my < p > was deported outside of the < div > so I was confused.
So it appears that what was blocking me was a combination of that top-level do_shortcode-ish and perhaps the fact that my add_shortcode() were declared after the shortcodes.
The problem is that your top-level shortocde "[slide]" is not executing do_shortcode() on its content. A few pointers:
I would advise including your image attributes as shortcode attributes, as it reduces the amount of markup and provides you the ability to define defaults.
You also don't need to define your shortcodes within an 'init' callback. It can be done in global scope:
add_shortcode('slide', 'make_slide');
add_shortcode('prg', 'wrap_paragraph');
function make_slide($atts, $content = null)
{
extract(shortcode_atts(array(
'num' => 1,
'title' => false,
'src' => get_bloginfo('stylesheet_directory').'/images/notfound.jpg', //Default image if none provided
'alt' => false,
'width' => false,
'height' => false,
), $atts));
$title = $title ? " title=\"$title\"" : '';
$alt = $alt ? " alt=\"$alt\"" : '';
$width = $width ? " width=\"$width\"" : '';
$height = $height ? " height=\"$height\"" : '';
$img = "<img src=\"$src\"".$title.$alt.$width.$height." />";
$post_title = get_the_title($post->ID);
$wrap = '<div class="slide slide-'.$num.'"><h1 class="h2-like projet_title">'.$post_title.'</h1>'.$img.do_shortcode($content).'</div>';
return $wrap;
}
function wrap_paragraph($atts, $content = null)
{
$content = do_shortcode($content); //This is fine if you plan on nesting shortcode within this callback
return '<p>'.$content.'</p>';
}
Using this, I was able to add the content:
[slide num="1" title="4a6c2a605946a_1080x733" src="http://localhost:8888/labs/noway/wordpress_1/wp-content/uploads/2012/09/4a6c2a605946a_1080x733-460x312.jpg" alt="4a6c2a605946a_1080x733" width="460" height="312"][prg]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.[/prg][/slide]
And get:
<div class="slide slide-1"><h1 class="h2-like projet_title">Hello world!</h1><img width="460" height="312" alt="4a6c2a605946a_1080x733" title="4a6c2a605946a_1080x733" src="http://localhost:8888/labs/noway/wordpress_1/wp-content/uploads/2012/09/4a6c2a605946a_1080x733-460x312.jpg"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p></div>
I have created 3 tabs in my blackberry application.The first tab allows the user to select a particular date range and search for entries.The search button is on first tab.The results are fetched from a sqlite database and displayed on grid view of third tab.
This is the main code i have used for creating tabs:
// setup the tab model with 3 tabs
PaneManagerModel model = new PaneManagerModel();
model.enableLooping( true );
// setup the first tab
VerticalFieldManager vfm = new VerticalFieldManager(
Field.USE_ALL_HEIGHT | Field.USE_ALL_WIDTH |
Manager.NO_VERTICAL_SCROLL | Manager.NO_HORIZONTAL_SCROLL );
LabelField lbl = new LabelField( "Content for tab 1", Field.FOCUSABLE );
vfm.add( lbl );
MyLabelField myLbl = new MyLabelField( "Tab 1" );
NullField nullFld = new NullField( Field.FOCUSABLE );
HorizontalFieldManager hfm = new HorizontalFieldManager();
hfm.add( nullFld );
hfm.add( myLbl );
Pane pane = new Pane( hfm, vfm );
model.addPane( pane );
// setup the second tab
vfm = new VerticalFieldManager(
Field.USE_ALL_HEIGHT | Field.USE_ALL_WIDTH |
Manager.NO_VERTICAL_SCROLL | Manager.NO_HORIZONTAL_SCROLL );
lbl = new LabelField( "Content for tab 2", Field.FOCUSABLE );
vfm.add( lbl );
myLbl = new MyLabelField( "Tab 2" );
nullFld = new NullField( Field.FOCUSABLE );
hfm = new HorizontalFieldManager();
hfm.add( nullFld );
hfm.add( myLbl );
pane = new Pane( hfm, vfm );
model.addPane( pane );
//Setup the third tab
vfm = new VerticalFieldManager(
Field.USE_ALL_HEIGHT | Field.USE_ALL_WIDTH |
Manager.NO_VERTICAL_SCROLL | Manager.NO_HORIZONTAL_SCROLL );
lbl = new LabelField( "Content for tab 3", Field.FOCUSABLE );
vfm.add( lbl );
myLbl = new MyLabelField( "Tab 3" );
nullFld = new NullField( Field.FOCUSABLE );
hfm = new HorizontalFieldManager();
hfm.add( nullFld );
hfm.add( myLbl );
pane = new Pane( hfm, vfm );
model.addPane( pane );
At present the results are properly getting displayed in third tab.But they are not on button click of fist tab.
I have included my SELECT statement in the third tab content.Instead i want to display the third tab results only after i click on search from the first tab.Till then i want my third tab to be disabled or rather inactive.
Anyone having any idea on this please share.Thanks.
You cau call PaneManagerView.jumpTo(int,int).
I am writing a wordpress plugin and I want to hide posts/pages which contain a specific string in their title.
For example, I want to hide all the posts/pages where the title contains: [something123]
show this post/page "Lorem Ipsum"
hide this post/page "Lorem Ipsum [something123]"
hide this post/page "Hello World [something123]"
show this post/page "Hello World"
In your theme directory find loop.php
In it there should be a line like this
<?php while ( have_posts() ) : the_post(); ?>
pseudocode:
if (get_the_title() contains "") { endwhile; }
http://codex.wordpress.org/Function_Reference/get_the_title
You could also use a filter:
http://codex.wordpress.org/Plugin_API/Filter_Reference/posts_where
Although I don't feel like writing one for you =). Maybe somebody else will.