I have been working on wordpress website. Few days back i changed theme. My previous them was supporting wordpress shortcode. I was using [box type=”shadow”] to creates a shadow box. E.g
[box type=”shadow”] Lorem Ipsum is simply dummy text of the printing and typesetting industry.[/box] and outuput had been displaying like shown in image below
I don't want to use any plugin for this. I wanna do this with pure code.
The shortcode is quiet popular in WordPress.
Here is how it works.
function boxShow($atts, $content = null ){
//default values
$option = shortcode_atts( array(
'type' => '',
), $atts );
ob_start();
$class = $option[ 'type' ] ? 'shadow' : 'normal';
//HTML goes here
?>
<div class="box <?php echo $class; ?>"><?php echo $content; ?></box>
<?php
$output = ob_get_clean();
return $output;
}
add_shortcode( 'box', 'boxShow' );
You can control the design with the class defined with the type of box.
You can use on text editor with this format
[box type="shadow"]Your content here[/box]
If you want to use as a code level use this format:
<?php echo do_shortcode( '[box type="shadow"]this is text[/box]' ); ?>
For more understanding about WordPress Shortcode API
If you don't want to use a plugin you can write the code direct into the functions.php within your theme folder.
// functions.php
function boxShow($atts, $content = null){
return '<div class="box">'.$content.'</div>';
}
add_shortcode('box',boxShow);
After this you can add the shortcode within your Pages:
[box]Text[/box]
Look into this guide for more infos: https://speckyboy.com/getting-started-with-wordpress-shortcodes-examples/
