how to create multiple shortcodes in Wordpress and selectively position them anywhere in a custom template page file - wordpress

In my functions file I have this:
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
add_shortcode( 'caption', 'caption_shortcode' );
In the CMS page editor I have this:
[caption]My Caption[/caption]
This page is utilizing a custom template file template-mypage.php. My question is: I would like to create multiple short codes types within the CMS such as:
[caption1]My Caption[/caption1]
[caption2]My Caption[/caption2]
[caption3]My Caption[/caption3]
then in my template-mypage.php... I would like to selectively choose where to place [caption1], [caption2], [caption3]... for example [caption1] will go somewhere on the top... [caption2] in the middle and [caption3] towards the bottom of the template-mypage.php, all seperated by some huge chunks of HTML content. I do not want to write any HTML within the WP CMS... all HTML should be written in the template-mypage.php.
Currently I believe WP limits shortcode output to come out of the_content(); Is it possible to do something like the_content_of_caption1(), the_content_of_caption2(), the_content_of_caption3()?
Thanks please let me know!

this product does this perfectly
http://wordpress.org/plugins/multiple-content-blocks/

Related

Wordpress shortcode is being inserted before content

I know we have have to return the shortcode but I'm trying to use custom templates and the shortcode is being inserted before the content in the wysiwyg editor when its actually at the end of the content:
Here is my shortcode:
add_shortcode('test_temp', 'temp_handler');
function temp_handler($atts) {
ob_start();
load_template(TEMPLATES_PATH . templates/test.php');
return ob_get_contents();
}
here is what test.php looks like:
<div class="testDiv">Here is my test template</div>
What else can I do so the short code is not inserted before the content?
Try this:
add_shortcode('test_temp', 'temp_handler');
function temp_handler($atts) {
ob_start();
load_template(TEMPLATES_PATH . templates/test.php');
$ret = ob_get_contents();
ob_end_clean();
return $ret;
}
Your idea to use output buffering to load template files is a good idea and a common practice for Wordpress shortcodes. However, it looks odd to me that you don't end the output buffering anywhere in your provided code, ob_end_clean(), which leads me to believe that your output buffering is just not setup perfectly.
Generally speaking, Wordpress will run your function and replace your shortcode tag with the output. If the output of your function is instead showing up somewhere else on the page (particularly if it is showing up above the area where it should be) then your function must be outputting content as Wordpress is running it (in your case, it must not be output buffering as expected).
Note: The load_template function uses require_once by default, which means you'll only be able to use your shortcode once on the page. Instead, I recommend using: load_template(TEMPLATES_PATH . templates/test.php', false);

Single Page Navigation Menu Dynamically Generated

hHi all! I have posted this question on the WP support forums, but the community doesn't seem to be as active as stack's, so I am taking a chance here!
I am looking for a plugin that would automatically create a navigation menu (through the use of shortcodes for example) on a long single page documentation page.
The long page is divided into sections. I can imagine using a shortcode at the beginning of every section, and this will create a menu that would be displayed in a sidebar for example (called through a second shortcode perhaps, or a widget)
Any thoughts? Advice?
Thanks!
Use [section]Section Title[/section] shortcodes, then [section_navigation] where you want the navigation links output.
This works, but with a massive caveat -- that [section_navigation] needs to be in your post/page after the other [section] shortcodes... otherwise it generates an empty list.
You should be ok to use it in your theme by putting <?php echo do_shortcode("[section_navigation]");?> in sidebar.php. It will work as long as get_sidebar() is after the_content() in your theme templates (it usually is).
This to go in functions.php
$whit_sections = "";
// [section]My Section Title[/section]
function whit_section_shortcode( $atts, $title = null ) {
// $content is the title you have between your [section] and [/section]
$id = urlencode(strip_tags($title));
// strip_tags removes any formatting (like <em> etc) from the title.
// Then urlencode replaces spaces and so on.
global $whit_sections;
$whit_sections .= '<li>'.$title.'</li>';
return '<span id="'.$id.'">'.$title.'</span>';
}
add_shortcode('section', 'whit_section_shortcode');
// [section_navigation]
function whit_section_navigation_shortcode( $atts, $title = null ) {
global $whit_sections;
return '<ul class="section-navigation">'.$whit_sections.'</ul>';
}
add_shortcode('section_navigation', 'whit_section_navigation_shortcode');

Wordpress : Add a custom field directly above the title input field (w/o modifiying core files)?

Does anyone know of a way to add an input field (or any type of html for the matter) directly above (or below) the title input field on the post edit page ?
I'm looking of a way to do this without modifying core files (I'm doing this as part of a plug-in which creates a custom post-type).
I'm not aware of any available wp hooks in that area of the edit-form-advanced.php file which could help out. I really hope some has come up with a genius workaround !
Since version 3.5 wordpress introduced new hooks for the add/edit post screen called edit_form_after_title and edit_form_after_editor. So now i think we can easily add new html element after wordpress input title and input content.
just use filter like this on your functions.php
add_action( 'edit_form_after_title', 'my_new_elem_after_title' );
function my_new_elem_after_title() {
echo '<h2>Your new element after title</h2>';
}
add_action( 'edit_form_after_editor', 'my_new_elem_after_editor' );
function my_new_elem_after_editor() {
echo '<h2>Your new element after content</h2>';
}
You're on the right track; pursue the add_action('admin_head') point of entry. What you want can specifically be done with a bit of JavaScript + jQuery (which is built into WP). To display the input field above the title input field, do something like this:
add_action('admin_head', 'my_admin_head_in_posts');
function my_admin_head_in_posts() {
?>
jQuery('#post').before(
'<div id="id_my_field" class="updated below-h2">' +
'<input type="text" name="my_field" value="lol" />' +
'</div>'
);
<?php
}
And you should be seeing something like this:

Adding custom tags in Wordpress

I'm creating a new WP theme and I would like to allow the user to insert a divider in between paragraphs or images he/she is entering, for a post/page.
I want the output to be something like:
<div class="divider"></div>
But I don't want the user to have to enter HTML in the WYSIWYG editor. Is it possible to ask them to enter something like:
<-- break -->
and then translate that to the div markup on display?
Thanks.
Build a function in your theme's functions.php file like this:
function add_div( $content ) {
$content = str_replace( '<!-- break -->', '<div class="divider"></div>', $content );
return $content;
}
then add the following to the theme:
add_filter( "the_content", "add_div" );
The function uses PHP's string replace function to find the text you want your users to input and replace it with the text you want to render, the add_filter() function uses Wordpress's content filter to apply your function to the content of each post after it is read from the database, but before it is rendered to the browser.
This will work in PHP4 and up, which is still the official level of support for Wordpress.

Inserting Wordpress Plugin content to posts

I am trying to learn more about Wordpress and creating plugins. I have seen an existing plugin use a technique where you can add a 'reference' to it within your posts and WP will parse it and replace it with the plugins own content. The example i am referring to is the NextGen gallery which uses the following code
[nextgen id=9]
I have tried searching for how this technique works but trying to find something that you don't know the name of is pretty difficult!
Can anyone point me towards some resources about how to use this feature of WP?
The technique is called shortcodes.
add_shortcode('my-content','my_plugin_shortcode');
function my_plugin_shortcode($atts, $content = null) {
$atts = shortcode_atts($my_default_atts,$atts); // $atts is now an associate array
$my_content = 'This is some content.';
return $my_content;
}
Then, if you have a post with the following content:
Hey, here is some content.
[my-content]
You will get the following output when the post is displayed:
Hey, here is some content. This is
some content.
If you passed a shortcode like [my-content id="9" test="test"], then the $atts variable in the above function would be like the following array declaration
$atts = array('id'=>9, 'test'=>'test');
The $content variable only has content when you use matching shortcodes around some text:
[my-content]This is some test
content.[my-content]

Resources