This question already has answers here:
How can I call a WordPress shortcode within a template?
(3 answers)
Closed 4 years ago.
I have a functions file within a wordpress site that contains various functions that are called up by their relevant hook when a page on the website is rendered.
A particular function is working fine but I have now added a shortcode relating to the Wordpress Plugin "Collapse-O-Matic" with in the function's code. When the page is rendered the shortcode shows up as the shortcode itself in Square brackets! I presume there is something I'm not understanding about how to render the result of a shortcode and wondered if someone was able to explain to me how to do this correctly.
The shortcode is [expand title="Open" swaptitle="Close"]Target Content[/expand] and I have placed it in this function as follows (please note this is not all the code inside the function):
<ul class="admin">
<?php
// loop through rows (sub repeater)
while( have_rows('item_list_details') ): the_row()
// display each item as a list
?>
<?php
$date = new DateTime(get_sub_field('date'));
$now = new DateTime(Date('Y-m-d'));
$diff = $now->diff($date);
if ($diff->days > $latest): //Use $diff->days and not $diff->d
?>
<li class='research'>
<?php else: ?>
<li class='researchLatest'>
<?php endif;?>
<div class='itemTitle'>
<?php $link = get_sub_field('link_url'); if( $link ): ?>
<a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>" title="<?php echo $link['title']; ?>">
<?php endif; ?>
<?php the_sub_field('link_name'); ?>
<?php $link = get_sub_field('link_url'); if( $link ): ?>
</a>
<?php endif; ?><p class='alert'> - <strong>NEW</strong></p>
</div>
<br/>
<div class="itemDescription">
[expand title="Open" swaptitle="Close"]<?php the_sub_field('link_description'); ?>[/expand]
</div>
</li>
<?php endwhile; ?>
</ul>`
As you can see there is a php expression inside the shortcode (<?php the_sub_field('link_description'); ?>) but hope it is still possible to make this render correctly.
The function you are looking for is do_shortcode().
Generally, it's simply a matter of doing:
echo do_shortcode('[shortcode]whatever[/shortcode]');
Additionally, you are using the_sub_field() from ACF, which output directly and doesn't return anything, so you can’t pass its result to do_shortcode().
You could use get_sub_field() instead, and capture the output, and then pass everything to do_shortcode().
E.g.:
$linkDescription = get_sub_field('link_description');
$renderedShortcode = do_shortcode("[expand title="Open" swaptitle="Close"]$linkDescription[/expand]");
echo $renderedShortcode;
If you need to check if the shortcode exists before using, you have shortcode_exists() available.
E.g.
if (shortcode_exists('expand')) {
echo do_shortcode("[expand title="Open" swaptitle="Close"]$linkDescription[/expand]");
}
else {
echo $linkDescription;
}
Documentation:
get_sub_field()
do_shortcode()
shortcode_exists()
inside your code you have to use the wordpress function do_shortcode( $string )
<?php echo do_shortcode("[expand title=\"Open\" swaptitle=\"Close\"]".get_sub_field('link_description')."[/expand]") ?>
you can actually pass whole blocks mixed with html and shortcodes into this function, it will return a string with everything rendered out.
this works also obviously
$output=do_shortcode("[expand title=\"Open\" swaptitle=\"Close\"]".get_sub_field('link_description')."[/expand]");
edit: fixed get_sub_field according yivi's input
Related
I am trying to achieve an outcome that combines two plugins in WordPress.
Basically, I am using Easing Slider Pro and Advanced Custom Fields. When the website owner edits a page, I want them to be able to add a slideshow by simply entering the slideshow ID into an Advanced Custom Field called 'slider'.
This is how one would normally add the PHP to display a slideshow:
<?php if ( function_exists('easingsliderpro') ) { easingsliderpro( 5 ); } ?>
The 5 is an example of a slideshow ID that can be changed.
Here is the PHP for the advanced custom field:
<?php if( get_field('slider') ): ?><?php the_field('slider'); ?><?php endif; ?>
Both of these work fine by themselves. But I want a way to combine these two pieces of code so that in the page editor the website manager only has to enter the ID of the slideshow. I don't know a lot about PHP and I am often confused by it, but this was my initial attempt:
<?php if( get_field('slider') ): ?>
<div id="sliderframe"><?php if ( function_exists('easingsliderpro') ) { easingsliderpro( <?php the_field('slider'); ?> ); } ?></div>
<?php endif; ?>
It didn't work, I am assuming because you're not allowed to have PHP code within PHP code. Is there any workaround that anyone knows that could make this achievable?
Many thanks.
Am I crazy? Can't you just:
AHA!
I think I see the confusion: the_field echoes the value out, so it gets passed to easingsliderpro() as just true, and displays the value.
You need to use a function that returns the value, so you can pass it to the next function.
In this case, it's get_field():
<?php if( get_field('slider') ): ?>
<div id="sliderframe">
<?php
if ( function_exists('easingsliderpro') ) :
easingsliderpro( get_field('slider') );
endif;
?>
</div>
<?php endif; ?>
See more in the documentation:
http://www.advancedcustomfields.com/resources/functions/get_field/
You shouldn't put php open close tags within a php open/close tag.
For your code above, this is valid:
<div id="sliderframe"><?php if ( function_exists('easingsliderpro') ) {
easingsliderpro(the_field('slider'));
} ?></div>
Someone explain to me what either the server or browser is doing here:
Integrated a wordpress blogs last 3 posts to display on home page of non wordpress site and simply was going to apply some inline CSS styling to the post:
<?php
$posts = get_posts('numberposts=3&order=ASC&orderby=post_title');
foreach ($posts as $post) : setup_postdata( $post );
echo '<span style="color:blue;font-size:10px;">'.the_date().'</span><br>';
the_title();
the_excerpt();
endforeach;
?>
The styling does not occur because the echo line is being rendered by the browser/server/god/chaos or whatever AFTER the the_date() variable????
Actual rendered code:
<div id="blog-box">
November 11, 2013<span style="color:blue;font-size:10px;"></span><br>Hello world!<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
Sorry if I'm missing something obvious but i don't get why this is not surrounding the date with the span code being echoed.
Thanks.
the_date() has a built in echo.
Try this
echo '<span style="color:blue;font-size:10px;">';
the_date();
echo '</span><br>';
This may be a simple one for you PHP experts out there. I need to give a certain <h1> to a post else show the page/post title.
I have this so far, it works if it is on a single post page, but when I am on a different page it just shows 'the_title' instead of the page title. I think its basically about calling a php function inside an already open php tag, if that makes sense. Here is the code:
<?php
if ( is_single() ) {
echo 'News';
} else {
echo the_title();
}
?>
The Wordpress tag for the page title is <?php the_title ?>
You are echoing 'the_title' as a string, you need to actually execute the function like so:
if ( is_single() ) {
echo '<h1>News</h1>';
} else {
echo '<h1>' . the_title() . '</h1>';
}
Note the closing quote to halt the string, and the . to concatenate the WordPress function the_title(), and then another to join the ending <h1> tag.
A cleaner way is to add the tags inside the function itself, like this:
<?php the_title('<h1>', '</h1>'); ?>
No need for 'echo'.
What I'm trying to do is to add some HTML tags to my Joomla! module titles. I will need something like this
Some <b>Title</b>
but when I save !Joomla trims the titles and remove all HTML tags.
I've check the administrator/com_content, which I think should be responsible for inserting the database data, but I couldn't find the answer there.
Can anyone help me with this headache?
Check out ../templates/system/html/modules.php
You can style your module structure in HTML.
function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".otherClass {}";
$css .= ".yourClass {}";
$doc->addStyleDeclaration($css);
?>
<div>
<?php if ($module->showtitle != 0) : ?>
<h1><?php echo $module->title; ?></h1>
<?php endif; ?> // post your title
</div>
<div>
<?php echo $module->content; ?> // post your module content
</div>
<?php
}
Then call your styled module in index.php:
<jdoc:include type="modules" name="right" style="myCustomModule" />
So I found the solutions. It includes both of the previous answers, so I'm putting a new one here with the correct code.
First of all I need to say, that this solution works only for a fixed amount of words (last one, two, etc.) I need only to have the last one, so I will post an example code with one word.
First as SMacFadyen sad I needed to create a new module structure in my template html folder: /templates/system/html/modules.php file.
Note: If you don't want to add this new module styling to all templates, but just on one of them you need to put the module.php in your template's html folder.
The provided by SMacFadyen looks like this:
function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".otherClass {}";
$css .= ".yourClass {}";
$doc->addStyleDeclaration($css);
?>
<div>
<?php if ($module->showtitle != 0) : ?>
<h1><?php echo $module->title; ?></h1>
<?php endif; ?> // post your title
</div>
<div>
<?php echo $module->content; ?> // post your module content
</div>
<?php
}
Then expired by the comments of Hanny I've added some php code to match the last word of the title and to store it in a new varibale.The code looks like this:
$wrap_tag = 'b';
$html_title = preg_replace("~\W\w+\s*$~", '<'.$wrap_tag.'>'.'\\0'.'</'.$wrap_tag.'>', $module->title);
Note: the $wrap_tag variable stores the tag you want. You can put b, em, u and etc. to have different result.
The last thing was to replace the displayed title, so I've replaced this code:
<h1><?php echo $module->title; ?></h1>
with this one:
<h1><?php echo $html_title; ?></h1>
The final result was this:
function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".otherClass {}";
$css .= ".yourClass {}";
$wrap_tag = 'b';
$html_title = preg_replace("~\W\w+\s*$~", '<'.$wrap_tag.'>'.'\\0'.'</'.$wrap_tag.'>', $module->title);
$doc->addStyleDeclaration($css);
?>
<div>
<?php if ($module->showtitle != 0) : ?>
<h1><?php echo $html_title; ?></h1>
<?php endif; ?> // post your title
</div>
<div>
<?php echo $module->content; ?> // post your module content
</div>
<?php
}
Thanks to everybody for the help.
The Gantry framework can help you accomplish what you want (1st word styled one way, 2nd word styled another) - but it's a lot of overhead just accomplish that one task you're looking for. Ultimately you'll have to create a template override for your template, and then do some creative editing with php in order to get it to display that way.
There's no quick and easy way to get that done. You'll have to do some php coding on the backend and edit the template (use an override so you don't hack core files). Ultimately you'll probably have to code the php to pull apart the title, and apply formatting to each pulled apart word (or string of words as the case may be) using CSS.
Hope that helps.
I am trying to get a link together using 2 variables but the output is the link and title but no html / clickable link appearing.
I'm getting something link this:
http://www.mydomain.com/post1/post_title_here
Here is the code:
echo ''.the_title().'';
Can anyone help please?
Thanks
UPDATE:
Here's the whole block of code:
<div id="MyBlock1">
<?php
$query = new WP_Query('posts_per_page=5');
while( $query ->have_posts() ) : $query ->the_post();
echo '<li>';
echo ''.the_title().'';
echo '</li>';
endwhile;
wp_reset_postdata();
?>
</div>
That's because the wordpress functions the_permalink() and the_title() display the respective outcomes already they need not be echoed. If you want functions that return the values, you have to use get_permalink() and get_the_title() instead.
So either do:
<div id="MyBlock1">
<?php
$query = new WP_Query('posts_per_page=5');
while( $query ->have_posts() ) : $query ->the_post();
echo '<li>';
echo ''.get_the_title().'';
echo '</li>';
endwhile;
wp_reset_postdata();
?>
</div>
or
<div id="MyBlock1">
<?php
$query = new WP_Query('posts_per_page=5');
while( $query ->have_posts() ) : $query ->the_post();
echo '<li><a href="';
the_permalink();
echo '">';
the_title();
echo '</a></li>';
endwhile;
wp_reset_postdata();
?>
</div>
Both will work.
Here's a checklist for debugging:
1.) Is the_title() returning an empty string? (You can check by looking at the html source)
2.) Are you echoing this inside of the body tag?
3.) Is this being echoed in a hidden html element?
echo ''.the_title().'';
In this sort of situation, you'll want to use get_permalink instead of the_permalink and get_the_title instead of the_title.
echo ''.get_the_title().'';
WordPress the_* functions do a direct echo call, whereas the get_* functions return a value that you can use for further processing, like the concatenation you're doing.
(also note the inconsistent naming conventions - this can be a pain)
You could use the corresponding get_* versions:
echo '' . get_the_title() . '';
See the codex reference for more
You need to absolutely make sure that .the_title(). is definately bieng set a value. If it isn't, then there will be no displayed HTML as there is no text for the anchor tag. Just a thought (i've done it many times, try print_f(); ing the the_title(). Hope it helped.