TJ Shortcodes Shortcodes

Below, you’ll find a detailed guide on how to add the TJ Shortcodes Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the TJ Shortcodes Plugin shortcodes not to show or not to work correctly.

Before starting, here is an overview of the TJ Shortcodes Plugin and the shortcodes it provides:

TJ Shortcodes

"TJ Shortcodes is a versatile WordPress plugin that enhances your website functionality. With its unique features, it simplifies content creation by providing a variety of shortcodes for Theme Junkie themes."

★★★★✩ (2) Active Installs: 3000+ Tested with: 6.1.4 PHP Version: false

Included Shortcodes:

[junkie-alert]
[junkie-button]
[junkie-column]
[junkie-dropcap]
[junkie-hightlights]
[junkie-tabs]
[junkie-tab]
[junkie-toggle]

TJ Shortcodes [junkie-alert] Shortcode

The ‘junkie-alert’ shortcode is a part of the theme-junkie-shortcodes plugin. It allows you to create styled alert messages within your content. The shortcode accepts a ‘style’ attribute, defaulting to ‘white’ if not specified. The content within the shortcode is then wrapped in a div with the class ‘junkie-alert’ and the specified style.

Shortcode: [junkie-alert]

Parameters

Here is a list of all possible junkie-alert shortcode parameters and attributes:

style – defines the visual style of the alert box

Examples and Usage

Basic example – Show a simple alert message with default style.

[junkie-alert]This is a basic alert message[/junkie-alert]

Advanced examples

Display an alert message with a different style. In the example below, we are using the ‘red’ style.

[junkie-alert style="red"]This is a red alert message[/junkie-alert]

Another advanced example would be to use nested shortcodes. Here, we are using a shortcode within the junkie-alert shortcode to display a contact form inside the alert message.

[junkie-alert style="green"][contact-form id="2"][/junkie-alert]

Remember, the ‘style’ attribute changes the appearance of the alert box. Different styles can be used as per the requirement, and if no style is specified, the default ‘white’ style will be used.

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-alert] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-alert', 'junkie_alert_shortcode' );

Shortcode PHP function:

function junkie_alert_shortcode( $atts, $content = null ) {

	extract( shortcode_atts( array(
		'style' => 'white'
    ), $atts ) );

   return '<div class="junkie-alert ' . sanitize_html_class( $style ) . '">' . do_shortcode( stripslashes( $content ) ) . '</div>';

}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/alert.php

TJ Shortcodes [junkie-button] Shortcode

The ‘junkie-button’ shortcode from Theme Junkie Shortcodes plugin is used to create customizable buttons. It allows users to define the URL, target, style, size, and type of the button.

Shortcode: [junkie-button]

Parameters

Here is a list of all possible junkie-button shortcode parameters and attributes:

url – Defines the URL that the button will link to.
target – Determines where the linked content will open.
style – Sets the color theme of the button.
size – Specifies how large the button will appear.
type – Determines the button’s shape, either round or square.

Examples and Usage

Basic example – Display a simple button with a predefined URL.

[junkie-button url="http://example.com"]Click me[/junkie-button]

With the above shortcode, a button will be displayed that says “Click me”. When clicked, it will lead to “http://example.com”.

Advanced examples

Creating a button with a custom style, size, and type.

[junkie-button url="http://example.com" style="blue" size="large" type="square"]Click me[/junkie-button]

In this example, the button will be large and square with a blue style. The text on the button will say “Click me” and it will redirect to “http://example.com” when clicked.

Creating a button that opens in a new tab.

[junkie-button url="http://example.com" target="_blank"]Click me[/junkie-button]

This shortcode will create a button that says “Click me”. When clicked, it will open “http://example.com” in a new tab.

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-button] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-button', 'junkie_button_shortcode' );

Shortcode PHP function:

function junkie_button_shortcode( $atts, $content = null ) {

	extract( shortcode_atts( array(
		'url'    => '#',
		'target' => '_self',
		'style'  => 'grey',
		'size'   => 'small',
		'type'   => 'round'
    ), $atts ) );

   return '<a target="' . $target . '" class="junkie-button ' . sanitize_html_class( $size ) . ' ' . sanitize_html_class( $style ) . ' ' . sanitize_html_class( $type ) . '" href="' . esc_url( $url ) . '">' . do_shortcode( wp_filter_post_kses( $content ) ) . '</a>';
}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/button.php

TJ Shortcodes [junkie-column] Shortcode

The Theme Junkie Shortcodes plugin’s ‘junkie-column’ shortcode is used to create customizable columns in a WordPress post or page. This shortcode allows the user to specify the size of the column (‘one-third’ by default) and whether it’s the last column in a row. If marked as ‘last’, it adds a ‘clearfix’ div, ensuring proper layout flow.

Shortcode: [junkie-column]

Parameters

Here is a list of all possible junkie-column shortcode parameters and attributes:

column – Determines the width of the column, default is one-third.
last – If set to true, it adds a clearing div after the column.

Examples and Usage

Basic example – Utilizes the shortcode to create a column with default parameters.

[junkie-column]

Advanced examples

Creating a half column using the ‘column’ parameter, and setting ‘last’ to true to indicate it’s the last column in a row. This will add a ‘junkie-clearfix’ div after the column to clear any floats.

[junkie-column column="one-half" last="true"]

Creating a one-third column, and setting ‘last’ to false. This indicates that this is not the last column in the row, so no ‘junkie-clearfix’ div will be added after the column.

[junkie-column column="one-third" last="false"]

Creating a two-thirds column and not specifying the ‘last’ parameter. Since ‘last’ defaults to false, this will be treated as if it’s not the last column in the row.

[junkie-column column="two-thirds"]

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-column] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-column', 'junkie_column_shortcode' );

Shortcode PHP function:

function junkie_column_shortcode( $atts, $content = null ) {

	extract( shortcode_atts( array(
		'column' => 'one-third',
		'last'   => false
	), $atts ) );

	$last_class = '';
	$last_div   = '';
	if ( $last ) {
		$last_class = ' junkie-column-last';
		$last_div   = '<div class="junkie-clearfix"></div>';
	}

	return '<div class="junkie-' . sanitize_html_class( $column ) . esc_attr( $last_class ) . '">' . do_shortcode( stripslashes( $content ) ) . '</div>' . $last_div;

}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/column.php

TJ Shortcodes [junkie-dropcap] Shortcode

The ‘junkie-dropcap’ shortcode from Theme Junkie Shortcodes plugin is designed to stylize the first letter of a paragraph. This shortcode wraps the initial letter in a span with a specific class, allowing for custom styling. The ‘letter’ attribute can be used to specify the letter to be stylized.

Shortcode: [junkie-dropcap]

Parameters

Here is a list of all possible junkie-dropcap shortcode parameters and attributes:

letter – the character to be displayed as a drop cap

Examples and Usage

Basic example – A simple usage of the ‘junkie-dropcap’ shortcode would be to highlight the first letter of a paragraph. The ‘letter’ attribute is used to specify the letter to be highlighted.

[junkie-dropcap letter="A"]

Advanced examples

It’s possible to use the ‘junkie-dropcap’ shortcode within other shortcodes. This allows for more complex formatting. For example, you could use the ‘junkie-dropcap’ shortcode within a ‘junkie-box’ shortcode to create a highlighted initial letter within a boxed text.

[junkie-box color="blue"][junkie-dropcap letter="A"] Your text here. [/junkie-box]

Additionally, you can use the ‘junkie-dropcap’ shortcode within a ‘junkie-column’ shortcode to create a highlighted initial letter within a column of text. This can be useful for creating visually distinct sections of text on a page.

[junkie-column size="one-half" position="first"][junkie-dropcap letter="A"] Your text here. [/junkie-column]

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-dropcap] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-dropcap', 'junkie_dropcap_shortcode' );

Shortcode PHP function:

function junkie_dropcap_shortcode( $atts, $content = null ) {

	extract( shortcode_atts( array(
		'letter' => ''
    ), $atts ) );

   return '<span class="junkie-dropcap">' . do_shortcode( wp_filter_post_kses( $content ) ) . '</span>';

}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/dropcap.php

TJ Shortcodes [junkie-hightlights] Shortcode

The Theme-Junkie-Shortcodes plugin shortcode ‘junkie-hightlights’ is a handy tool for highlighting text. It wraps the content within a span element and applies a CSS class for styling. The shortcode accepts an optional ‘color’ attribute, defaulting to ‘green’ if not specified. The content passed within it is sanitized and returned wrapped in a span, ready for styling.

Shortcode: [junkie-hightlights]

Parameters

Here is a list of all possible junkie-hightlights shortcode parameters and attributes:

color – Determines the color of the highlighted text.

Examples and Usage

Basic example – A simple usage of the ‘junkie-hightlights’ shortcode to highlight text with the default green color.

[junkie-hightlights]Your text here[/junkie-hightlights]

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-hightlights] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-hightlights', 'junkie_hightlights_shortcode' );

Shortcode PHP function:

function junkie_hightlights_shortcode( $atts, $content = null ) {

	extract( shortcode_atts( array(
		'color' => 'green'
    ), $atts ) );

   return '<span class="junkie-hightlights ' . sanitize_html_class( $color ) . '">' . do_shortcode( wp_filter_post_kses( $content ) ) . '</span>';

}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/hightlights.php

TJ Shortcodes [junkie-tabs] Shortcode

The Theme Junkie Shortcodes plugin’s ‘junkie-tabs’ shortcode creates tabbed content on your WordPress site. It extracts tab titles from the content and outputs them in a tabbed format.

Shortcode: [junkie-tabs]

Examples and Usage

Basic example – The shortcode allows you to create tabs within your content. Each tab is defined by the ‘tab’ shortcode and its title is set using the ‘title’ attribute.

[junkie-tabs]
[tab title="First Tab"]This is the content of the first tab.[/tab]
[tab title="Second Tab"]This is the content of the second tab.[/tab]
[/junkie-tabs]

Advanced examples

Adding more tabs to the content and using HTML within the tab content. The tabs will be displayed in the order they are defined. The content of each tab can include HTML, such as paragraphs, images, and links.

[junkie-tabs]
[tab title="First Tab"]This is the content of the first tab.
[/tab]
[tab title="Second Tab"]This is the content of the second tab.
Link[/tab]
[tab title="Third Tab"]This is the content of the third tab.
Bold Text[/tab]
[/junkie-tabs]

Using the shortcode to create nested tabs. Each set of tabs must be wrapped in the ‘junkie-tabs’ shortcode. The nested tabs will be displayed within the tab that contains them.

[junkie-tabs]
[tab title="First Tab"]This is the content of the first tab.[/tab]
[tab title="Second Tab"]This is the content of the second tab.
[junkie-tabs]
[tab title="Nested Tab 1"]This is the content of the first nested tab.[/tab]
[tab title="Nested Tab 2"]This is the content of the second nested tab.[/tab]
[/junkie-tabs]
[/tab]
[/junkie-tabs]

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-tabs] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-tabs', 'junkie_tabs_shortcode' );

Shortcode PHP function:

function junkie_tabs_shortcode( $atts, $content = null ) {

	$defaults = array();
	extract( shortcode_atts( $defaults, $atts ) );

	STATIC $i = 0;
	$i++;

	// Extract the tab titles for use in the tab widget.
	preg_match_all( '/tab title="([^\"]+)"/i', $content, $matches, PREG_OFFSET_CAPTURE );

	$tab_titles = array();
	if( isset( $matches[1] ) ){ $tab_titles = $matches[1]; }

	$output = '';

	if( count( $tab_titles ) ) {
	    $output .= '<div id="junkie-tabs-'. $i .'" class="junkie-tabs"><div class="junkie-tab-inner">';
		$output .= '<ul class="junkie-nav junkie-clearfix">';

		foreach( $tab_titles as $tab ){
			$output .= '<li><a href="#junkie-tab-'. sanitize_title( $tab[0] ) .'">' . $tab[0] . '</a></li>';
		}

	    $output .= '</ul>';
	    $output .= do_shortcode( $content );
	    $output .= '</div></div>';
	} else {
		$output .= do_shortcode( $content );
	}

	return $output;
}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/tab.php

TJ Shortcodes [junkie-tab] Shortcode

The Theme Junkie Shortcodes plugin uses the ‘junkie-tab’ shortcode to create a tabbed content section. The ‘junkie-tab’ shortcode takes a title attribute and the content enclosed within the shortcode. It generates a div element with the ID as ‘junkie-tab-‘ followed by the sanitized title. The content is processed for any nested shortcodes and included within the div. This allows for organized, tabbed content display on your page.

Shortcode: [junkie-tab]

Parameters

Here is a list of all possible junkie-tab shortcode parameters and attributes:

title – Sets the label of the tab element

Examples and Usage

Basic Example – Showcases a simple usage of the ‘junkie-tab’ shortcode, with a single attribute defining the tab title.

[junkie-tab title="Tab 1"]Content for Tab 1 goes here[/junkie-tab]

Advanced Examples

Example 1: Demonstrates the usage of the ‘junkie-tab’ shortcode with multiple tabs. Each tab has a unique title and its own content.

[junkie-tab title="Tab 1"]Content for Tab 1 goes here[/junkie-tab]
[junkie-tab title="Tab 2"]Content for Tab 2 goes here[/junkie-tab]

Example 2: Illustrates the use of the ‘junkie-tab’ shortcode with nested shortcodes. In this case, content within each tab is generated by another shortcode (e.g. [post-list]).

[junkie-tab title="Latest Posts"][post-list][/junkie-tab]
[junkie-tab title="Popular Posts"][post-list orderby="comment_count"][/junkie-tab]

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-tab] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-tab', 'junkie_tab_shortcode' );

Shortcode PHP function:

function junkie_tab_shortcode( $atts, $content = null ) {

	$defaults = array( 'title' => __( 'Tab', 'tj-shortcodes' ) );
	extract( shortcode_atts( $defaults, $atts ) );

	return '<div id="junkie-tab-'. sanitize_title( $title ) .'" class="junkie-tab">' . do_shortcode( stripslashes( $content ) ) . '</div>';

}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/tab.php

TJ Shortcodes [junkie-toggle] Shortcode

The Theme Junkie Shortcodes plugin’s ‘junkie-toggle’ shortcode is used to create toggle sections on a webpage. It allows content to be hidden or shown on a user’s command. The ‘title’ attribute sets the title for the toggle section, while the ‘state’ attribute determines whether the section is open or closed by default.

Shortcode: [junkie-toggle]

Parameters

Here is a list of all possible junkie-toggle shortcode parameters and attributes:

title – Defines the title of the toggle section.
state – Determines whether the toggle section is open or closed by default.

Examples and Usage

Basic example – A simple usage of the junkie-toggle shortcode, where the title is set to ‘My Title’ and the state is set to ‘open’. This will create a toggle section with the title ‘My Title’ that is initially open.

[junkie-toggle title="My Title" state="open"]Your content goes here...[/junkie-toggle]

Advanced examples

Using the junkie-toggle shortcode with a custom title and state. In this example, we have a title of ‘Advanced Usage’ and the state is set to ‘closed’. This will create a toggle section with the title ‘Advanced Usage’ that is initially closed.

[junkie-toggle title="Advanced Usage" state="closed"]Your advanced content goes here...[/junkie-toggle]

Using the junkie-toggle shortcode with nested shortcodes. Here we have a title of ‘Nested Shortcodes’ and the state is set to ‘open’. Inside the toggle section, we have another shortcode ‘[junkie-alert]’ which will be processed and displayed within the toggle section.

[junkie-toggle title="Nested Shortcodes" state="open"][junkie-alert type="info"]This is an alert inside a toggle section.[/junkie-alert][/junkie-toggle]

PHP Function Code

In case you have difficulties debugging what causing issues with [junkie-toggle] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'junkie-toggle', 'junkie_toggle_shortcode' );

Shortcode PHP function:

function junkie_toggle_shortcode( $atts, $content = null ) {

    extract( shortcode_atts( array(
		'title' => __( 'Title goes here', 'tj-shortcodes' ),
		'state' => 'open'
    ), $atts ) );

	return "<div data-id='" . $state . "' class=\"junkie-toggle\"><span class=\"junkie-toggle-title\">" . esc_attr( $title ) . "</span><div class=\"junkie-toggle-inner\">" . do_shortcode( stripslashes( $content ) ) . "</div></div>";

}

Code file location:

theme-junkie-shortcodes/theme-junkie-shortcodes/shortcodes/toggle.php

Conclusion

Now that you’ve learned how to embed the TJ Shortcodes Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.

TJ Shortcodes Shortcodes

TJ Shortcodes [junkie-alert] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-button] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-column] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-dropcap] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-hightlights] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-tabs] Shortcode

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-tab] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-toggle] Shortcode

Parameters

Examples and Usage

PHP Function Code

Conclusion

Comments

Leave a Reply Cancel reply

TJ Shortcodes Shortcodes

TJ Shortcodes [junkie-alert] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-button] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-column] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-dropcap] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-hightlights] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-tabs] Shortcode

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-tab] Shortcode

Parameters

Examples and Usage

PHP Function Code

TJ Shortcodes [junkie-toggle] Shortcode

Parameters

Examples and Usage

PHP Function Code

Conclusion

Related Shortcodes

Comments

Leave a Reply Cancel reply