Below, you’ll find a detailed guide on how to add the StagTools 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 StagTools Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the StagTools Plugin and the shortcodes it provides:
"StagTools is a versatile WordPress plugin designed to enhance website functionality. It offers an array of tools for customization, content management, and overall site optimization."
- [stag_one_third]
- [stag_one_third_last]
- [stag_two_third]
- [stag_two_third_last]
- [stag_one_half]
- [stag_one_half_last]
- [stag_one_fourth]
- [stag_one_fourth_last]
- [stag_three_fourth]
- [stag_three_fourth_last]
- [stag_one_fifth]
- [stag_two_fifth]
- [stag_two_fifth_last]
- [stag_three_fifth]
- [stag_three_fifth_last]
- [stag_four_fifth]
- [stag_four_fifth_last]
- [stag_one_sixth]
- [stag_one_sixth_last]
- [stag_five_sixth]
- [stag_five_sixth_last]
- [stag_button]
- [stag_alert]
- [stag_divider]
- [stag_intro]
- [stag_tabs]
- [stag_tab]
- [stag_toggle]
- [stag_dropcap]
- [stag_image]
- [stag_video]
- [stag_icon]
- [stag_map]
- [stag_social]
- [stag_columns]
StagTools [stag_one_third] Shortcode
The Stagtools ‘stag_one_third’ shortcode is a functional tool that helps in creating a responsive layout. It divides the content area into three equal parts. This shortcode wraps the content within a div container having the class ‘stag-column stag-one-third’, thus allocating it one-third of the total width.
Shortcode: [stag_one_third]
Examples and Usage
Basic Example – Utilizing the ‘stag_one_third’ shortcode to display content within a one-third column layout.
[stag_one_third]Your content goes here[/stag_one_third]Advanced Examples
Using the ‘stag_one_third’ shortcode to display multiple content sections in a one-third column layout. This example showcases how you can nest multiple ‘stag_one_third’ shortcodes to create a three column layout.
[stag_one_third]Content for first column[/stag_one_third]
[stag_one_third]Content for second column[/stag_one_third]
[stag_one_third]Content for third column[/stag_one_third]Further, you can also nest other shortcodes within the ‘stag_one_third’ shortcode. This example illustrates how to nest a hypothetical ‘button’ shortcode within the ‘stag_one_third’ shortcode.
[stag_one_third][button id="1"]Click Me[/button][/stag_one_third]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_third] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_third', 'stag_one_third' );Shortcode PHP function:
function stag_one_third( $atts, $content = null ) {
return '<div class="stag-column stag-one-third">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_third_last] Shortcode
The Stagtools plugin shortcode, ‘stag_one_third_last’, is designed to create a responsive layout. It divides the content into thirds, placing the specified content in the last third.
Shortcode: [stag_one_third_last]
Examples and Usage
Basic example – A simple usage of the ‘stag_one_third_last’ shortcode to display content in a one-third width column at the end of a row.
[stag_one_third_last]Your content goes here...[/stag_one_third_last]Advanced examples
Using the ‘stag_one_third_last’ shortcode to display nested shortcodes. This allows for more complex layouts and content structures.
[stag_one_third_last][another_shortcode param1="value1" param2="value2"]Nested shortcode content...[/another_shortcode][/stag_one_third_last]Using the ‘stag_one_third_last’ shortcode multiple times to create a row of three one-third width columns. The ‘stag_one_third_last’ shortcode is used for the last column in the row to ensure correct styling and layout.
[stag_one_third]First column content...[/stag_one_third]
[stag_one_third]Second column content...[/stag_one_third]
[stag_one_third_last]Third column content...[/stag_one_third_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_third_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_third_last', 'stag_one_third_last' );Shortcode PHP function:
function stag_one_third_last( $atts, $content = null ) {
return '<div class="stag-column stag-one-third stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_two_third] Shortcode
The Stagtools plugin shortcode ‘stag_two_third’ is designed to create a div container that occupies two-thirds of the available space. This shortcode wraps the content within a div class named ‘stag-column stag-two-third’. It’s useful for responsive column layouts.
Shortcode: [stag_two_third]
Examples and Usage
Basic example – The stag_two_third shortcode is used to create a two-third column in your WordPress content. It takes the content you provide and wraps it in a div with the class “stag-column stag-two-third”.
[stag_two_third]Your content here[/stag_two_third]Advanced examples
1. Embedding another shortcode within the stag_two_third shortcode. This allows you to use any other shortcode and have it displayed within a two-third column.
[stag_two_third][another_shortcode][/stag_two_third]2. Using multiple stag_two_third shortcodes to create a layout. You can use multiple stag_two_third shortcodes to create a layout with multiple two-third columns. Just remember that you need to close each shortcode before starting a new one.
[stag_two_third]Your first two-third column content here[/stag_two_third]
[stag_two_third]Your second two-third column content here[/stag_two_third]3. Adding additional HTML within the stag_two_third shortcode. You can add additional HTML within the stag_two_third shortcode. This can be useful if you want to add additional styling or elements within the two-third column.
[stag_two_third]Your content here
[/stag_two_third]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_two_third] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_two_third', 'stag_two_third' );Shortcode PHP function:
function stag_two_third( $atts, $content = null ) {
return '<div class="stag-column stag-two-third">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_two_third_last] Shortcode
The StagTools plugin shortcode, ‘stag_two_third_last’, is designed to create a two-thirds width section on your webpage. This shortcode wraps the content within a div element, assigning it specific class names for styling. It ensures the content occupies two-thirds of the available space and is placed last in the layout. After the content, a clear div is added to prevent float issues.
Shortcode: [stag_two_third_last]
Examples and Usage
Basic example – Utilize the stag_two_third_last shortcode to create a two-thirds width column at the end of a row.
[stag_two_third_last]Your content here[/stag_two_third_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_two_third_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_two_third_last', 'stag_two_third_last' );Shortcode PHP function:
function stag_two_third_last( $atts, $content = null ) {
return '<div class="stag-column stag-two-third stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_half] Shortcode
The Stagtools ‘stag_one_half’ shortcode is a functional tool that divides your page content into two equal halves. This shortcode wraps the content within a div element with a class ‘stag-column stag-one-half’, effectively splitting the width of the content area into two equal parts.
Shortcode: [stag_one_half]
Examples and Usage
Basic example – Displays content within a half-width column using the ‘stag_one_half’ shortcode.
[stag_one_half]Your content goes here[/stag_one_half]Advanced examples
Using the shortcode to display a content block with custom HTML. The content will be wrapped in a half-width column.
[stag_one_half]<h2>Your Title Here</h2><p>Your paragraph here.</p>[/stag_one_half]Using the shortcode to display multiple content blocks within a half-width column. Each block of content will be wrapped in its own div for easy styling.
[stag_one_half]<div>Your first block of content here.</div><div>Your second block of content here.</div>[/stag_one_half]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_half] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_half', 'stag_one_half' );Shortcode PHP function:
function stag_one_half( $atts, $content = null ) {
return '<div class="stag-column stag-one-half">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_half_last] Shortcode
The Stagtools plugin shortcode ‘stag_one_half_last’ is used to structure content in a half-page layout on your webpage. This shortcode divides the content area into two equal parts. This shortcode wraps the content within a div class, creating a half-page column. It’s the last column, hence the ‘last’ in its name. It also clears any floating elements, ensuring a clean layout.
Shortcode: [stag_one_half_last]
Examples and Usage
Basic example – The basic usage of the ‘stag_one_half_last’ shortcode involves embedding any content within the shortcode itself. This content is then displayed within a styled div on your WordPress site.
[stag_one_half_last] Your content goes here. [/stag_one_half_last]Advanced examples
1. Embedding a Contact Form: In this example, we are using the ‘stag_one_half_last’ shortcode to embed a contact form. The form is first loaded by its ID, and if not found, it will try to load by title.
[stag_one_half_last] [contact-form-7 id="123" title="Contact form 1"] [/stag_one_half_last]2. Displaying a Custom Message: This example shows how you can use the ‘stag_one_half_last’ shortcode to display a custom message that is styled with the ‘stag-column stag-one-half stag-column-last’ CSS classes.
[stag_one_half_last] [/stag_one_half_last]3. Embedding a Shortcode within the Shortcode: In this advanced example, we are embedding a shortcode within the ‘stag_one_half_last’ shortcode. This allows you to combine the functionality of multiple shortcodes.
[stag_one_half_last] [another_shortcode parameter="value"] [/stag_one_half_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_half_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_half_last', 'stag_one_half_last' );Shortcode PHP function:
function stag_one_half_last( $atts, $content = null ) {
return '<div class="stag-column stag-one-half stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_fourth] Shortcode
The ‘stag_one_fourth’ shortcode is part of the Stagtools plugin. It creates a div element with classes ‘stag-column’ and ‘stag-one-fourth’. This shortcode allows for easy creation of a quarter-width column in your WordPress layout. It’s perfect for designing responsive grid layouts.
Shortcode: [stag_one_fourth]
Examples and Usage
Basic example – A simple usage of the stag_one_fourth shortcode to divide content into fourths.
[stag_one_fourth]Your content here[/stag_one_fourth]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_fourth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_fourth', 'stag_one_fourth' );Shortcode PHP function:
function stag_one_fourth( $atts, $content = null ) {
return '<div class="stag-column stag-one-fourth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_fourth_last] Shortcode
The StagTools plugin shortcode ‘stag_one_fourth_last’ is a layout tool. It creates a one-fourth width column at the end of a row in your webpage. This shortcode wraps content within a div class, ensuring it occupies one-fourth of the available space. It also adds a ‘clear’ div, preventing layout issues.
Shortcode: [stag_one_fourth_last]
Examples and Usage
Basic example – The given shortcode displays content in a one-fourth column format on your page. The ‘stag_one_fourth_last’ attribute represents the last column in a row.
[stag_one_fourth_last] Your content goes here. [/stag_one_fourth_last]Advanced examples
Using the shortcode to display a list of items in a one-fourth column format. Each item is wrapped in the ‘stag_one_fourth_last’ shortcode to ensure it appears in its own column. The ‘clear’ div at the end ensures that the next content starts on a new line, maintaining the layout structure.
[stag_one_fourth_last] Item 1 [/stag_one_fourth_last]
[stag_one_fourth_last] Item 2 [/stag_one_fourth_last]
[stag_one_fourth_last] Item 3 [/stag_one_fourth_last]
[stag_one_fourth_last] Item 4 [/stag_one_fourth_last]
Another advanced usage can be to display images in a one-fourth column layout. The ‘img’ tag is used within the ‘stag_one_fourth_last’ shortcode to display the image in the specified column.
[stag_one_fourth_last] 
[/stag_one_fourth_last]
[stag_one_fourth_last] 
[/stag_one_fourth_last]
[stag_one_fourth_last] 
[/stag_one_fourth_last]
[stag_one_fourth_last] 
[/stag_one_fourth_last]
Please note that the content within the shortcode tags can be text, HTML, or another shortcode depending on your needs.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_fourth_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_fourth_last', 'stag_one_fourth_last' );Shortcode PHP function:
function stag_one_fourth_last( $atts, $content = null ) {
return '<div class="stag-column stag-one-fourth stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_three_fourth] Shortcode
The ‘stag_three_fourth’ shortcode from the StagTools plugin allows you to create a section that occupies three-fourths of your webpage’s width. The PHP function ‘stag_three_fourth’ wraps the content within a div class named ‘stag-column stag-three-fourth’, effectively styling the enclosed content.
Shortcode: [stag_three_fourth]
Examples and Usage
Basic example – The shortcode below is a simple usage of the ‘stag_three_fourth’ shortcode. It wraps the content within a div with the class ‘stag-column stag-three-fourth’.
[stag_three_fourth]Your content here[/stag_three_fourth]Advanced examples
Using the shortcode with nested content and additional shortcodes. The ‘stag_three_fourth’ shortcode is used to wrap around another shortcode, ‘stag_one_fourth’. This creates a layout where one section takes up three-fourths of the available space and the other section takes up one-fourth.
[stag_three_fourth][stag_one_fourth]Your content here[/stag_one_fourth][/stag_three_fourth]Using the shortcode with HTML content. The ‘stag_three_fourth’ shortcode is used to wrap around a paragraph of text, which is formatted with HTML tags for additional styling.
[stag_three_fourth]This is a blue paragraph.
[/stag_three_fourth]Using the shortcode with a combination of nested shortcodes and HTML content. The ‘stag_three_fourth’ shortcode is used to wrap around a ‘stag_one_fourth’ shortcode, which itself wraps around a paragraph of text.
[stag_three_fourth][stag_one_fourth]This is a blue paragraph.
[/stag_one_fourth][/stag_three_fourth]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_three_fourth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_three_fourth', 'stag_three_fourth' );Shortcode PHP function:
function stag_three_fourth( $atts, $content = null ) {
return '<div class="stag-column stag-three-fourth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_three_fourth_last] Shortcode
The StagTools shortcode ‘stag_three_fourth_last’ creates a responsive layout column that spans three-fourths of the available width and is positioned last in the row.
Shortcode: [stag_three_fourth_last]
Examples and Usage
Basic example – The shortcode [stag_three_fourth_last] is used to create a div section that takes up three-fourths of the available width and is the last column in a row. It is used without any parameters or attributes.
[stag_three_fourth_last]Your content here[/stag_three_fourth_last]Advanced examples
Using the shortcode to display a piece of content or a widget that needs to take up three-fourths of the available width on the page. In this example, we’re using the shortcode to embed a video into our page. The video will take up three-fourths of the width, and it will be the last item in its row.
[stag_three_fourth_last]
[/stag_three_fourth_last]Another advanced use of the shortcode is to display a custom HTML code that needs to take up three-fourths of the available width on the page. In this example, we’re using the shortcode to display a custom HTML code.
[stag_three_fourth_last]
<div class="custom-class">
This is some custom HTML code.
</div>
[/stag_three_fourth_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_three_fourth_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_three_fourth_last', 'stag_three_fourth_last' );Shortcode PHP function:
function stag_three_fourth_last( $atts, $content = null ) {
return '<div class="stag-column stag-three-fourth stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_fifth] Shortcode
The Stagtools plugin shortcode ‘stag_one_fifth’ is used to divide webpage content into five equal parts. This shortcode wraps the content within a div element with a class of ‘stag-column stag-one-fifth’, rendering it as one-fifth of the total width.
Shortcode: [stag_one_fifth]
Examples and Usage
Basic example – A simple use of the ‘stag_one_fifth’ shortcode to display content within a one-fifth column layout.
[stag_one_fifth]Your content goes here[/stag_one_fifth]Advanced examples
Using the ‘stag_one_fifth’ shortcode to create a five-column layout with different content in each column. Each shortcode represents one column, and the content within the shortcode tags will be displayed within that column.
[stag_one_fifth]Column 1 content[/stag_one_fifth]
[stag_one_fifth]Column 2 content[/stag_one_fifth]
[stag_one_fifth]Column 3 content[/stag_one_fifth]
[stag_one_fifth]Column 4 content[/stag_one_fifth]
[stag_one_fifth]Column 5 content[/stag_one_fifth]
Another advanced example would be to nest shortcodes within the ‘stag_one_fifth’ shortcode. In this example, we are using an imaginary ‘button’ shortcode within the ‘stag_one_fifth’ shortcode to display a button within the one-fifth column layout.
[stag_one_fifth][button url="http://example.com"]Click me[/button][/stag_one_fifth]Please note that the ‘button’ shortcode is not a part of the StagTools plugin and is used here only for illustrative purposes.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_fifth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_fifth', 'stag_one_fifth' );Shortcode PHP function:
function stag_one_fifth( $atts, $content = null ) {
return '<div class="stag-column stag-one-fifth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_two_fifth] Shortcode
The StagTools ‘stag_two_fifth’ shortcode is a functional tool that allows users to divide content into five sections, taking up two-fifths of the space. When implemented, it wraps the content within a div tag, designating it as two-fifths of the total width.
Shortcode: [stag_two_fifth]
Examples and Usage
Basic Example – A simple usage of the ‘stag_two_fifth’ shortcode that wraps the content into a div with class ‘stag-column stag-two-fifth’.
[stag_two_fifth]Your content goes here[/stag_two_fifth]Advanced Examples
Adding more parameters to the shortcode can further customize the output. In the following example, we add a custom class to the div by passing a ‘class’ attribute to the shortcode.
[stag_two_fifth class="my-custom-class"]Your content goes here[/stag_two_fifth]In the next example, we are nesting shortcodes. This allows us to wrap multiple sections of content in the ‘stag_two_fifth’ div. Note that the ‘stag_two_fifth’ shortcode must be registered to support nested shortcodes for this to work.
[stag_two_fifth]Content for first section[/stag_two_fifth]
[stag_two_fifth]Content for second section[/stag_two_fifth]Remember to replace ‘Your content goes here’ with the actual content you want to display or with another shortcode if you want to nest them.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_two_fifth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_two_fifth', 'stag_two_fifth' );Shortcode PHP function:
function stag_two_fifth( $atts, $content = null ) {
return '<div class="stag-column stag-two-fifth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_two_fifth_last] Shortcode
The Stagtools plugin shortcode, ‘stag_two_fifth_last’, is designed to create a responsive layout. It generates a two-fifth column that aligns at the end of a row. This shortcode wraps the content within a div class, ensuring it fits perfectly in a responsive design. It also clears any floating elements, maintaining a clean layout.
Shortcode: [stag_two_fifth_last]
Examples and Usage
Basic example – The basic usage of the ‘stag_two_fifth_last’ shortcode allows you to divide your content into two-fifth sections. This is particularly useful for creating multi-column layouts in your WordPress posts or pages.
[stag_two_fifth_last]Your content goes here[/stag_two_fifth_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_two_fifth_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_two_fifth_last', 'stag_two_fifth_last' );Shortcode PHP function:
function stag_two_fifth_last( $atts, $content = null ) {
return '<div class="stag-column stag-two-fifth stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_three_fifth] Shortcode
The Stagtools plugin shortcode ‘stag_three_fifth’ is designed to create a div element with the class ‘stag-column stag-three-fifth’. This shortcode allows you to divide your content into a layout of 3/5th width. It’s useful for designing responsive and flexible page layouts.
Shortcode: [stag_three_fifth]
Examples and Usage
Basic example – The basic usage of the stag_three_fifth shortcode is to create a div with the class of “stag-column stag-three-fifth”. The content within this div is processed by the do_shortcode function, which means you can nest other shortcodes within it.
[stag_three_fifth]Your content here[/stag_three_fifth]Advanced examples
Utilizing the stag_three_fifth shortcode to display a gallery by referencing its ID. The gallery will be wrapped within a div with the class of “stag-column stag-three-fifth”.
[stag_three_fifth][/stag_three_fifth]Using the stag_three_fifth shortcode to display a contact form by referencing its ID. The form will be wrapped within a div with the class of “stag-column stag-three-fifth”.
[stag_three_fifth][contact-form-7 id="987"][/stag_three_fifth]Embedding a YouTube video within the stag_three_fifth shortcode. The video will be wrapped within a div with the class of “stag-column stag-three-fifth”.
[stag_three_fifth][/stag_three_fifth]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_three_fifth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_three_fifth', 'stag_three_fifth' );Shortcode PHP function:
function stag_three_fifth( $atts, $content = null ) {
return '<div class="stag-column stag-three-fifth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_three_fifth_last] Shortcode
The StagTools plugin shortcode ‘stag_three_fifth_last’ is used to create a responsive layout. It divides the content into a three-fifth grid structure. . This shortcode wraps the content within a div class, ensuring that the content takes up three-fifths of the available width.
Shortcode: [stag_three_fifth_last]
Examples and Usage
Basic example – A simple usage of the ‘stag_three_fifth_last’ shortcode to display content within a three-fifth column layout.
[stag_three_fifth_last]Your content goes here[/stag_three_fifth_last]Advanced examples
Embedding another shortcode within the ‘stag_three_fifth_last’ shortcode. This allows for more complex layouts and content types within the three-fifth column structure.
[stag_three_fifth_last][another_shortcode parameter="value"]Your content goes here[/another_shortcode][/stag_three_fifth_last]Using HTML within the ‘stag_three_fifth_last’ shortcode. This allows for more advanced formatting and styling of the content within the three-fifth column layout.
[stag_three_fifth_last]This is some red text.
[/stag_three_fifth_last]Please note that the actual output of these examples may vary based on the specific settings and styles of your WordPress theme. Always ensure to test your shortcodes thoroughly to ensure they are displaying as expected.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_three_fifth_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_three_fifth_last', 'stag_three_fifth_last' );Shortcode PHP function:
function stag_three_fifth_last( $atts, $content = null ) {
return '<div class="stag-column stag-three-fifth stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_four_fifth] Shortcode
The Stagtools plugin shortcode ‘stag_four_fifth’ is designed to create a div element with the class of ‘stag-column stag-four-fifth’. This shortcode makes it easy to structure content in a responsive four-fifth column layout.
Shortcode: [stag_four_fifth]
Examples and Usage
Basic example – The basic usage of the ‘stag_four_fifth’ shortcode is to wrap the content that needs to be displayed in a ‘stag_four_fifth’ div. This can be used to style a particular section of your webpage.
[stag_four_fifth]Your content goes here[/stag_four_fifth]Advanced examples
Embedding another shortcode within the ‘stag_four_fifth’ shortcode. This example shows how to use the ‘stag_four_fifth’ shortcode to wrap around another shortcode. Here, the ‘contact-form-7’ shortcode is used as an example. The ‘id’ attribute in the ‘contact-form-7’ shortcode is used to specify the ID of the contact form that needs to be displayed.
[stag_four_fifth][contact-form-7 id="123" title="Contact form 1"][/stag_four_fifth]Using ‘stag_four_fifth’ shortcode with HTML content. This example demonstrates how to use the ‘stag_four_fifth’ shortcode with HTML content. The HTML tags are used to further style the content that is wrapped by the ‘stag_four_fifth’ shortcode.
[stag_four_fifth]Your Heading
Your paragraph here
[/stag_four_fifth]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_four_fifth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_four_fifth', 'stag_four_fifth' );Shortcode PHP function:
function stag_four_fifth( $atts, $content = null ) {
return '<div class="stag-column stag-four-fifth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_four_fifth_last] Shortcode
The Stagtools shortcode, ‘stag_four_fifth_last’, is designed to create a responsive column that occupies four-fifths of the page width. This shortcode wraps content within a ‘div’ element, applying the classes ‘stag-column’, ‘stag-four-fifth’ and ‘stag-column-last’. This results in a column that takes up 80% of the container width, with the ‘stag-column-last’ class clearing any floats, ensuring proper layout flow.
Shortcode: [stag_four_fifth_last]
Examples and Usage
Basic example – The basic usage of the ‘stag_four_fifth_last’ shortcode is to create a div section that occupies four-fifths of the available width. The content of this section is defined within the shortcode.
[stag_four_fifth_last]Your content goes here[/stag_four_fifth_last]Advanced examples – The ‘stag_four_fifth_last’ shortcode can be used in combination with other shortcodes. In the following example, we have nested a ‘contact_form’ shortcode within the ‘stag_four_fifth_last’ shortcode. This will display a contact form that occupies four-fifths of the available width.
[stag_four_fifth_last][contact_form id="1" title="Contact Us"][/stag_four_fifth_last]Another advanced usage of the ‘stag_four_fifth_last’ shortcode is to nest it within another ‘stag_four_fifth_last’ shortcode. This will create a section within a section, both occupying four-fifths of the available width of their parent section.
[stag_four_fifth_last]Outer content [stag_four_fifth_last]Inner content[/stag_four_fifth_last] More outer content[/stag_four_fifth_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_four_fifth_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_four_fifth_last', 'stag_four_fifth_last' );Shortcode PHP function:
function stag_four_fifth_last( $atts, $content = null ) {
return '<div class="stag-column stag-four-fifth stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_sixth] Shortcode
The Stagtools ‘stag_one_sixth’ shortcode is a handy tool for page layout. It generates a column that occupies one-sixth of the page width. This shortcode can be used to organize content into a neat, visually appealing grid.
Shortcode: [stag_one_sixth]
Examples and Usage
Basic example – The following shortcode is a basic example of the stag_one_sixth shortcode. It will return a div with the class “stag-column stag-one-sixth” and the content that is passed within the shortcode.
[stag_one_sixth]Your content goes here[/stag_one_sixth]Advanced examples
1. Using the shortcode to display a styled text block. The content within the shortcode will be wrapped in a div with the class “stag-column stag-one-sixth”.
[stag_one_sixth]Styled Content[/stag_one_sixth]2. Using the shortcode to display a styled image. The image tag within the shortcode will be wrapped in a div with the class “stag-column stag-one-sixth”.
[stag_one_sixth]
[/stag_one_sixth]3. Using the shortcode to display a list. The list within the shortcode will be wrapped in a div with the class “stag-column stag-one-sixth”.
[stag_one_sixth]- Item 1
- Item 2
[/stag_one_sixth]4. Using the shortcode to display a combination of elements. The elements within the shortcode will be wrapped in a div with the class “stag-column stag-one-sixth”.
[stag_one_sixth]Title
Paragraph
[/stag_one_sixth]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_sixth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_sixth', 'stag_one_sixth' );Shortcode PHP function:
function stag_one_sixth( $atts, $content = null ) {
return '<div class="stag-column stag-one-sixth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_one_sixth_last] Shortcode
The Stagtools plugin shortcode ‘stag_one_sixth_last’ is designed to create a column layout on your page. This shortcode generates a one-sixth width column at the end of a row. By wrapping content within this shortcode, it is placed inside this column. The ‘stag-column-last’ class indicates it’s the last column in the row.
Shortcode: [stag_one_sixth_last]
Examples and Usage
Basic example – A simple usage of the ‘stag_one_sixth_last’ shortcode to display content within a one-sixth column layout.
[stag_one_sixth_last]Your content goes here[/stag_one_sixth_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_one_sixth_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_one_sixth_last', 'stag_one_sixth_last' );Shortcode PHP function:
function stag_one_sixth_last( $atts, $content = null ) {
return '<div class="stag-column stag-one-sixth stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_five_sixth] Shortcode
The Stagtools ‘stag_five_sixth’ shortcode is a layout tool. It creates a content section that spans five-sixths of the available width. . This is handy for designing responsive layouts, giving flexibility to your page structure.
Shortcode: [stag_five_sixth]
Examples and Usage
Basic example – The shortcode ‘stag_five_sixth’ can be used to create a div section that occupies five-sixth of the available width on a page. This is particularly useful for designing page layouts and organizing content.
[stag_five_sixth]Your content goes here[/stag_five_sixth]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_five_sixth] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_five_sixth', 'stag_five_sixth' );Shortcode PHP function:
function stag_five_sixth( $atts, $content = null ) {
return '<div class="stag-column stag-five-sixth">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_five_sixth_last] Shortcode
The Stagtools plugin shortcode ‘stag_five_sixth_last’ is used to create a layout structure. It generates a div element that occupies five-sixths of the available width.
Shortcode: [stag_five_sixth_last]
Examples and Usage
Basic example – The shortcode ‘stag_five_sixth_last’ is used to create a div element with specific classes. This shortcode doesn’t require any parameters/atts.
[stag_five_sixth_last]Your content here[/stag_five_sixth_last]Advanced examples
The ‘stag_five_sixth_last’ shortcode can be nested within other shortcodes to create more complex structures. In the example below, we are using the ‘stag_one_sixth’ shortcode in conjunction with our ‘stag_five_sixth_last’ shortcode to create a row divided into 1/6 and 5/6 columns.
[stag_one_sixth]Your content for one sixth column here[/stag_one_sixth]
[stag_five_sixth_last]Your content for five sixth column here[/stag_five_sixth_last]Moreover, shortcode ‘stag_five_sixth_last’ can also be used to wrap around other shortcodes. This can be useful when you want to apply the specific classes of ‘stag_five_sixth_last’ to the output of other shortcodes. In the following example, we are wrapping the ‘contact-form’ shortcode with our ‘stag_five_sixth_last’ shortcode.
[stag_five_sixth_last][contact-form id="1"][/stag_five_sixth_last]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_five_sixth_last] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_five_sixth_last', 'stag_five_sixth_last' );Shortcode PHP function:
function stag_five_sixth_last( $atts, $content = null ) {
return '<div class="stag-column stag-five-sixth stag-column-last">' . do_shortcode( $content ) . '</div><div class="clear"></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_button] Shortcode
The Stag Button shortcode is a customizable feature that allows the creation of buttons with different styles, sizes, and types. It can also incorporate icons. This shortcode takes attributes like URL, target, style, size, type, icon, and icon_order. The ‘url’ attribute sets the button link, ‘target’ determines whether the link opens in a new tab or the same, ‘style’ sets the button color, ‘size’ and ‘type’ define the button’s size and shape. The ‘icon’ attribute allows adding an icon to the button, and ‘icon_order’ sets its position, either before or after the button text. The shortcode returns an ‘a’ HTML element with the class ‘stag-button’, styled and sized as per the attributes.
Shortcode: [stag_button]
Parameters
Here is a list of all possible stag_button shortcode parameters and attributes:
url– the link where the button will direct users totarget– determines how the link opens, in the same or a new tabstyle– sets the color scheme of the buttonsize– specifies the size of the button (small, medium, large)type– indicates the button shape, can be either round or squareicon– allows for an icon to be added to the buttonicon_order– decides the icon placement, before or after the button text
Examples and Usage
Basic example: A simple button with a link to a specific URL.
[stag_button url="https://example.com" /]Advanced examples:
Creating a button with a specific style, size, and opening in a new tab.
[stag_button url="https://example.com" target="_blank" style="blue" size="large" /]Adding an icon to the button, with the icon appearing before the button text.
[stag_button url="https://example.com" icon="star" icon_order="before"]Click Me[/stag_button]Creating a rounded button with an icon appearing after the button text.
[stag_button url="https://example.com" type="round" icon="arrow" icon_order="after"]Learn More[/stag_button]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_button] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_button', 'stag_button' );Shortcode PHP function:
function stag_button( $atts, $content = null ) {
$args = shortcode_atts(
array(
'url' => '#',
'target' => '_self',
'style' => 'grey',
'size' => 'small',
'type' => 'round',
'icon' => '',
'icon_order' => 'before',
),
$atts,
'purchase_link'
);
$button_icon = esc_attr( $args['icon'] );
$size = esc_attr( $args['size'] );
$style = esc_attr( $args['style'] );
$type = esc_attr( $args['type'] );
$class = " stag-button--{$size}";
$class .= " stag-button--{$style}";
$class .= " stag-button--{$type}";
if ( ! empty( $button_icon ) ) {
if ( 'before' === $args['icon_order'] ) {
$button_content = stag_icon( array( 'icon' => $button_icon ) );
$button_content .= do_shortcode( $content );
} else {
$button_content = do_shortcode( $content );
$button_content .= stag_icon( array( 'icon' => $button_icon ) );
}
$class .= " stag-icon--{$args['icon_order']}";
} else {
$button_content = do_shortcode( $content );
}
return '<a target="' . esc_attr( $args['target'] ) . '" href="' . esc_url( $args['url'] ) . '" class="stag-button' . esc_attr( $class ) . '">' . $button_content . '</a>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_alert] Shortcode
The Stagtools plugin shortcode ‘stag_alert’ is designed to create alert messages with customizable styles on your WordPress site. It takes ‘style’ as an attribute, allowing you to choose the alert’s visual theme. The default style is ‘white’. The content within the shortcode is displayed within the alert box. This shortcode is an effective tool to draw user attention to specific content.
Shortcode: [stag_alert]
Parameters
Here is a list of all possible stag_alert shortcode parameters and attributes:
style– Determines the color theme of the alert box
Examples and Usage
Basic example – The following shortcode displays an alert with default style which is white.
[stag_alert]Your content here[/stag_alert]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_alert] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_alert', 'stag_alert' );Shortcode PHP function:
function stag_alert( $atts, $content = null ) {
$args = shortcode_atts(
array(
'style' => 'white',
),
$atts,
'stag_alert'
);
return '<div class="stag-section stag-alert stag-alert--' . esc_attr( $args['style'] ) . '">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_divider] Shortcode
The StagTools ‘stag_divider’ shortcode is a simple yet effective tool for content organization. It creates a horizontal line, or divider, in your content. This shortcode allows customization through the ‘style’ attribute, enabling you to change the appearance of the divider. The default style is ‘plain’, but this can be modified to suit your design needs.
Shortcode: [stag_divider]
Parameters
Here is a list of all possible stag_divider shortcode parameters and attributes:
style– Defines the visual design of the divider line
Examples and Usage
Basic example – A simple usage of the stag_divider shortcode with the default style parameter.
[stag_divider /]Advanced examples
Example 1: Using the stag_divider shortcode with a custom style parameter. This will change the appearance of the divider according to the style specified.
[stag_divider style="dashed" /]Example 2: Using the stag_divider shortcode with multiple style parameters. This will apply multiple styles to the divider.
[stag_divider style="dashed, double" /]Remember, the style parameter in the stag_divider shortcode accepts a string value. You can pass any valid CSS border-style value to it. If you pass multiple values separated by a comma, the styles will be applied in the order they are specified.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_divider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_divider', 'stag_divider' );Shortcode PHP function:
function stag_divider( $atts, $content = null ) {
$args = shortcode_atts(
array(
'style' => 'plain',
),
$atts,
'stag_divider'
);
return '<hr class="stag-section stag-divider stag-divider--' . esc_attr( $args['style'] ) . '">';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_intro] Shortcode
The StagTools ‘stag_intro’ shortcode is a versatile tool that allows you to add introductory text sections to your WordPress site. This shortcode creates a new section with the class ‘stag-section stag-intro-text’. It wraps the content within this section, ensuring it’s properly formatted with ‘wpautop’ function. This function changes double line-breaks in the text into HTML paragraphs, enhancing readability.
Shortcode: [stag_intro]
Examples and Usage
Basic example – The shortcode ‘stag_intro’ can be utilized to introduce a section with a specific class. This class can be styled separately in CSS to give it a unique appearance.
[stag_intro]Welcome to our website![/stag_intro]Advanced examples
The ‘stag_intro’ shortcode can also be used to nest other shortcodes within it. This allows for more complex content structures. For instance, you could include a contact form within the introductory section.
[stag_intro][contact-form-7 id="123" title="Contact form 1"][/stag_intro]Additionally, you can use the ‘stag_intro’ shortcode to wrap around a block of text, creating a distinct section on your page. This is useful for highlighting important information or creating a visually distinct area on your page.
[stag_intro]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, orci vel suscipit cursus, sem lorem laoreet dolor, eu condimentum nisl erat ac ligula. Nunc vitae sem id mi bibendum condimentum.[/stag_intro]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_intro] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_intro', 'stag_intro' );Shortcode PHP function:
function stag_intro( $atts, $content = null ) {
return '<section class="stag-section stag-intro-text">' . wpautop( do_shortcode( $content ) ) . '</section>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_tabs] Shortcode
The StagTools Tabs shortcode creates a tabbed content area in your post or page. It fetches tab titles from the content and displays them in a neat, organized manner. This shortcode allows for the customization of tab styles. It uses the ‘stag-shortcode-scripts’ for dynamic functionality. If no tab titles are found, it simply renders the content.
Shortcode: [stag_tabs]
Parameters
Here is a list of all possible stag_tabs shortcode parameters and attributes:
style– Determines the appearance of the tabs, default is ‘normal’
Examples and Usage
Basic example – The basic usage of the ‘stag_tabs’ shortcode involves using the shortcode with no additional parameters. This will generate a tabbed section with the default ‘normal’ style.
[stag_tabs]Tab Content Here[/stag_tabs]Advanced examples
Customizing the ‘stag_tabs’ shortcode to change the tab style. This example shows how you can use the ‘style’ parameter to change the appearance of the tabs. The ‘style’ parameter accepts any valid CSS class name.
[stag_tabs style="custom"]Tab Content Here[/stag_tabs]Using the ‘stag_tabs’ shortcode to create multiple tabs. This example shows how to create multiple tabs by using the ‘tab’ shortcode within the ‘stag_tabs’ shortcode. The ‘title’ parameter is used to set the title of each tab.
[stag_tabs]
[tab title="Tab 1"]Tab 1 Content Here[/tab]
[tab title="Tab 2"]Tab 2 Content Here[/tab]
[/stag_tabs]
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_tabs] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_tabs', 'stag_tabs' );Shortcode PHP function:
function stag_tabs( $atts, $content = null ) {
$args = shortcode_atts(
array(
'style' => 'normal',
),
$atts,
'stag_tabs'
);
wp_enqueue_script( 'stag-shortcode-scripts' );
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 .= '<section id="stag-tabs-' . wp_rand( 1, 100 ) . '" class="stag-section stag-tabs stag-tabs--' . esc_attr( $args['style'] ) . '"><div class="stag-tab-inner">';
$output .= '<ul class="stag-nav stag-clearfix">';
foreach ( $tab_titles as $tab ) {
$output .= '<li><a href="#stag-tab-' . sanitize_title( $tab[0] ) . '">' . $tab[0] . '</a></li>';
}
$output .= '</ul>';
$output .= do_shortcode( $content );
$output .= '</div></section>';
} else {
$output .= do_shortcode( $content );
}
return $output;
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_tab] Shortcode
The Stagtools Tab shortcode is a powerful tool that allows the creation of tabbed content in WordPress. This shortcode enables users to dynamically generate tabs with customized titles. It wraps the content within a div with a unique ID and class, facilitating easy styling and manipulation.
Shortcode: [stag_tab]
Parameters
Here is a list of all possible stag_tab shortcode parameters and attributes:
title– defines the text displayed on the tab
Examples and Usage
Basic example – Here is an example of the ‘stag_tab’ shortcode usage. In this case, we are creating a tab with the default title ‘Tab’.
[stag_tab][/stag_tab]Advanced example – In this more advanced example, we are defining a custom title for the tab. The title is set to ‘Custom Tab’.
[stag_tab title="Custom Tab"]Your content goes here[/stag_tab]For even more complex scenarios, you can nest shortcodes inside the ‘stag_tab’ shortcode. In the following example, we are adding a nested shortcode ‘[contact_form]’ inside our ‘stag_tab’.
[stag_tab title="Contact Form Tab"][contact_form][/stag_tab]Remember, the ‘stag_tab’ shortcode will wrap the content within a div with a unique id based on the title and the class ‘stag-tab’. This allows for easy styling and customization of each individual tab.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_tab] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_tab', 'stag_tab' );Shortcode PHP function:
function stag_tab( $atts, $content = null ) {
$args = shortcode_atts(
array(
'title' => __( 'Tab', 'stag' ),
),
$atts,
'stag_tab'
);
return '<div id="stag-tab-' . sanitize_title( $args['title'] ) . '" class="stag-tab">' . do_shortcode( $content ) . '</div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_toggle] Shortcode
The Stagtools ‘stag_toggle’ shortcode is a dynamic tool for content display. It creates a toggle section on a webpage, allowing users to expand or collapse the content. The shortcode takes three parameters – ‘title’, ‘state’, and ‘style’. ‘Title’ sets the heading of the toggle section, ‘state’ determines whether the section is open or closed by default, and ‘style’ defines the appearance of the toggle section. It also enqueues the ‘stag-shortcode-scripts’ for necessary JavaScript functionality. The returned HTML structure includes the title and the content wrapped in specific div classes for styling and functionality.
Shortcode: [stag_toggle]
Parameters
Here is a list of all possible stag_toggle shortcode parameters and attributes:
title– Defines the title of the toggle sectionstate– Determines initial state of the toggle, ‘open’ or ‘closed’style– Sets the visual style of the toggle, default is ‘normal’
Examples and Usage
Basic example – In this basic example, we’re using the stag_toggle shortcode to create a toggle section with a default title and state. The default title is ‘Title Goes Here’ and the default state is ‘open’.
[stag_toggle /]Advanced examples
In this advanced example, we’re using the stag_toggle shortcode with custom parameters. We’re setting the title to ‘Custom Title’, the state to ‘closed’, and the style to ‘bold’.
[stag_toggle title="Custom Title" state="closed" style="bold" /]In this next example, we’re nesting shortcodes within the stag_toggle shortcode. We’re creating a toggle section with the title ‘Contact Form’, and within this section, we’re displaying a contact form by referencing its ID.
[stag_toggle title="Contact Form" state="open" style="normal"] [contact_form id="1"] [/stag_toggle]Lastly, this example demonstrates how to use the stag_toggle shortcode to create a toggle section with a custom title, state, and style, and also includes nested shortcodes. The nested shortcodes display a gallery by referencing its ID.
[stag_toggle title="Photo Gallery" state="closed" style="bold"] [/stag_toggle]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_toggle] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_toggle', 'stag_toggle' );Shortcode PHP function:
function stag_toggle( $atts, $content = null ) {
$args = shortcode_atts(
array(
'title' => __( 'Title Goes Here', 'stag' ),
'state' => 'open',
'style' => 'normal',
),
$atts,
'stag_toggle'
);
wp_enqueue_script( 'stag-shortcode-scripts' );
return '<div data-id="' . esc_attr( $args['state'] ) . '" class="stag-section stag-toggle stag-toggle--' . esc_attr( $args['style'] ) . '"><span class="stag-toggle-title">' . esc_html( $args['title'] ) . '</span><div class="stag-toggle-inner"><div class="stag-toggle-content">' . do_shortcode( $content ) . '</div></div></div>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_dropcap] Shortcode
The Stagtools Dropcap shortcode is a tool that stylizes the first letter of a paragraph. It enhances readability and aesthetics of your content. The shortcode accepts parameters like ‘style’ and ‘font_size’. You can customize the appearance of the dropcap by adjusting these parameters. For example, you can set the style to ‘normal’ or change the font size to ’50px’. The resulting output wraps the content in a span tag with a class of ‘stag-dropcap’ and the chosen style, adding a unique touch to your WordPress site.
Shortcode: [stag_dropcap]
Parameters
Here is a list of all possible stag_dropcap shortcode parameters and attributes:
style– determines the appearance of the dropcap, default is ‘normal’font_size– sets the size of the dropcap, default is ’50px’
Examples and Usage
Basic example – A shortcode that displays a dropcap with default style and font size.
[stag_dropcap]A[/stag_dropcap]Advanced examples
Using the shortcode to display a dropcap with a custom style and font size. The dropcap will be styled according to the parameters provided.
[stag_dropcap style="italic" font_size="60px"]B[/stag_dropcap]Using the shortcode to display a dropcap with a custom style, font size, and additional content. The dropcap and the content will be styled according to the parameters provided.
[stag_dropcap style="bold" font_size="70px"]C[/stag_dropcap]ontent goes here.[/stag_dropcap]These examples show the flexibility of the ‘stag_dropcap’ shortcode, as it can be used to create a variety of different dropcap styles and sizes, depending on the parameters provided.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_dropcap] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_dropcap', 'stag_dropcap' );Shortcode PHP function:
function stag_dropcap( $atts, $content = null ) {
$args = shortcode_atts(
array(
'style' => 'normal',
'font_size' => '50px',
),
$atts,
'stag_dropcap'
);
return '<span class="stag-dropcap stag-dropcap--' . esc_attr( $args['style'] ) . '" style="font-size:' . esc_attr( $args['font_size'] ) . ';line-height:' . esc_attr( $args['font_size'] ) . ';width:' . esc_attr( $args['font_size'] ) . ';height:' . esc_attr( $args['font_size'] ) . ';">' . do_shortcode( $content ) . '</span>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_image] Shortcode
The Stagtools plugin ‘stag_image’ shortcode is used to add an image to your WordPress site. It provides options to customize the image style, alignment, source, and URL. This shortcode allows you to set the style to grayscale or color, align the image as per your preference, and specify the image source and URL. If a URL is provided, the image becomes a clickable link.
Shortcode: [stag_image]
Parameters
Here is a list of all possible stag_image shortcode parameters and attributes:
style– Determines the look of the image, default is grayscalealignment– Sets the image alignment, default is nonesrc– URL of the image to be displayedurl– URL where image will link to, if left empty image won’t be clickable
Examples and Usage
Basic example – A grayscale image aligned to the left using the ‘stag_image’ shortcode.
[stag_image style="grayscale" alignment="left" src="image.jpg" /]Advanced examples:
Display a grayscale image aligned to the right with a hyperlink to a specific URL.
[stag_image style="grayscale" alignment="right" src="image.jpg" url="https://example.com" /]Display a colored image without specific alignment but with a hyperlink to a specific URL.
[stag_image style="color" alignment="none" src="image.jpg" url="https://example.com" /]Display a colored image aligned to the center without a hyperlink.
[stag_image style="color" alignment="center" src="image.jpg" /]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_image] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_image', 'stag_image' );Shortcode PHP function:
function stag_image( $atts, $content = null ) {
$args = shortcode_atts(
array(
'style' => 'grayscale',
'alignment' => 'none',
'src' => '',
'url' => '',
),
$atts,
'stag_image'
);
$output = '<figure class="stag-section stag-image stag-image--' . esc_attr( $args['style'] ) . ' stag-image--' . esc_attr( $args['alignment'] ) . '">';
if ( '' !== $args['url'] ) {
$output .= '<a href="' . esc_url( $args['url'] ) . '"><img src="' . esc_url( $args['src'] ) . '" alt=""></a>';
} else {
$output .= '<img src="' . esc_url( $args['src'] ) . '" alt="">';
}
$output .= '</figure>';
return $output;
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_video] Shortcode
The Stagtools plugin shortcode, ‘stag_video’, embeds a video within a webpage. It does this by using the ‘wp_embed’ function of WordPress to run the video’s URL.
Shortcode: [stag_video]
Parameters
Here is a list of all possible stag_video shortcode parameters and attributes:
src– specifies the URL of the video to embed
Examples and Usage
Basic example – Embed a video using its URL with the ‘stag_video’ shortcode.
[stag_video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" /]Advanced examples
In this example, we’ll use the ‘stag_video’ shortcode to display a video from a different source, Vimeo. Notice that the URL is different, but the shortcode remains the same.
[stag_video src="https://vimeo.com/76979871" /]Here’s another advanced example where we use the ‘stag_video’ shortcode to display a video from DailyMotion. Again, the URL changes, but the shortcode does not.
[stag_video src="https://www.dailymotion.com/video/x7y5u9j" /]Remember, the ‘stag_video’ shortcode is versatile and can be used to embed videos from various sources as long as you have the correct URL. The shortcode does the rest of the work for you.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_video] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_video', 'stag_video' );Shortcode PHP function:
<pre class="wp-block-syntaxhighlighter-code">function stag_video( $atts, $content = null ) {
$args = shortcode_atts(
array(
'src' => '',
),
$atts,
'stag_video'
);
return '<div class="stag-section stag-video">' . $GLOBALS['wp_embed']->run_shortcode( '<a href="http://'%20.%20esc_url(%20$args%5B'src'%5D%20)%20.%20'">' . esc_url( $args['src'] ) . '</a>' ) . '</div>';
}</pre>
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_icon] Shortcode
The Stagtools Icon shortcode is a versatile tool for adding icons to your WordPress posts or pages. It allows customization of icon type, size, and link. This shortcode enables you to specify the icon, its size, and an optional URL. If a URL is provided, the icon will act as a hyperlink, opening in a new window if specified. The style parameter allows you to choose the icon’s design. Shortcode: [stag_icon]
Shortcode: [stag_icon]
Parameters
Here is a list of all possible stag_icon shortcode parameters and attributes:
icon– defines the type of icon to be displayedurl– sets the link for the icon if anysize– controls the size of the iconnew_window– determines if link opens in new windowstyle– sets the style class for the icon
Examples and Usage
Basic example – Displays an icon without a link using the ‘stag_icon’ shortcode.
[stag_icon icon="home" size="20px" style="fas"]Advanced examples
Displays an icon with a link that opens in a new window. This shortcode uses the ‘url’ and ‘new_window’ attributes along with the ‘icon’, ‘size’, and ‘style’ attributes.
[stag_icon icon="home" size="20px" style="fas" url="https://www.example.com" new_window="yes"]Displays an icon with a link that opens in the same window. This shortcode uses the ‘url’ attribute along with the ‘icon’, ‘size’, and ‘style’ attributes.
[stag_icon icon="home" size="20px" style="fas" url="https://www.example.com"]Displays an icon with a custom style and size. This shortcode uses the ‘icon’, ‘size’, and ‘style’ attributes.
[stag_icon icon="home" size="30px" style="far"]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_icon] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_icon', 'stag_icon' );Shortcode PHP function:
function stag_icon( $atts, $content = null ) {
$args = shortcode_atts(
array(
'icon' => '',
'url' => '',
'size' => '',
'new_window' => 'no',
'style' => 'fa',
),
$atts,
'stag_icon'
);
$new_window = ( 'no' === $args['new_window'] ) ? '_self' : '_blank';
$size = esc_attr( $args['size'] );
$output = '';
$attrs = '';
if ( ! empty( $args['url'] ) ) {
$a_attrs = ' href="' . esc_url( $args['url'] ) . '" target="' . esc_attr( $new_window ) . '"';
}
if ( ! empty( $size ) ) {
$attrs .= ' style="font-size:' . $size . ';line-height:' . $size . '"';
}
if ( '' !== $args['url'] ) {
$output .= '<a class="stag-icon-link" ' . $a_attrs . '><i aria-hidden="true" class="' . esc_attr( $args['style'] ) . ' fa-' . esc_attr( $args['icon'] ) . '" ' . $attrs . '></i></a>';
} else {
$output .= '<i aria-hidden="true" class="' . esc_attr( $args['style'] ) . ' fa-' . esc_attr( $args['icon'] ) . '" ' . $attrs . '></i>';
}
return $output;
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_map] Shortcode
The Stagtools Map shortcode is a customizable tool for embedding Google Maps into your WordPress site. It allows you to define map attributes such as latitude, longitude, width, height, zoom level, style, and type.
Shortcode: [stag_map]
Parameters
Here is a list of all possible stag_map shortcode parameters and attributes:
lat– sets the latitude coordinate for the map’s center pointlong– sets the longitude coordinate for the map’s center pointwidth– determines the width of the map on the screenheight– determines the height of the map on the screenzoom– sets the initial zoom level of the mapstyle– chooses the visual style of the map from predefined optionstype– selects the type of map to display, such as roadmap
Examples and Usage
Basic example – A map with default settings
[stag_map /]Advanced examples
Display a map with specific latitude and longitude, and set the width and height of the map.
[stag_map lat='40.7128' long='-74.0060' width='500px' height='300px' /]Display a map with a specific zoom level and type of map.
[stag_map zoom='10' type='satellite' /]Display a map with a specific style.
[stag_map style='greyscale' /]Combine multiple parameters to customize the map.
[stag_map lat='40.7128' long='-74.0060' width='500px' height='300px' zoom='10' type='satellite' style='greyscale' /]PHP Function Code
In case you have difficulties debugging what causing issues with [stag_map] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_map', 'stag_map' );Shortcode PHP function:
function stag_map( $atts ) {
$args = shortcode_atts(
array(
'lat' => '37.42200',
'long' => '-122.08395',
'width' => '100%',
'height' => '350px',
'zoom' => 15,
'style' => 'none',
'type' => 'roadmap',
),
$atts,
'stag_map'
);
$map_styles = array(
'none' => '[]',
'mixed' => '[{"featureType":"landscape","stylers":[{"hue":"#00dd00"}]},{"featureType":"road","stylers":[{"hue":"#dd0000"}]},{"featureType":"water","stylers":[{"hue":"#000040"}]},{"featureType":"poi.park","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","stylers":[{"hue":"#ffff00"}]},{"featureType":"road.local","stylers":[{"visibility":"off"}]}]',
'pale_dawn' => '[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]',
'greyscale' => '[{"featureType":"all","stylers":[{"saturation":-100},{"gamma":0.5}]}]',
'bright_bubbly' => '[{"featureType":"water","stylers":[{"color":"#19a0d8"}]},{"featureType":"administrative","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"},{"weight":6}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#e85113"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efe9e4"},{"lightness":-40}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#efe9e4"},{"lightness":-20}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"lightness":-100}]},{"featureType":"road.highway","elementType":"labels.icon"},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape","stylers":[{"lightness":20},{"color":"#efe9e4"}]},{"featureType":"landscape.man_made","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":-100}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"hue":"#11ff00"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"hue":"#4cff00"},{"saturation":58}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#f0e4d3"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#efe9e4"},{"lightness":-25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#efe9e4"},{"lightness":-10}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"}]}]',
'subtle_grayscale' => '[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]',
);
$map_id = 'map-' . wp_rand( 0, 99 );
$stag_options = get_option( 'stag_options' );
$api_key = ( isset( $stag_options['google_api_key'] ) ) ? $stag_options['google_api_key'] : '';
if ( '' !== $api_key ) {
wp_enqueue_script( 'google-maps', add_query_arg( 'key', $api_key, 'https://maps.googleapis.com/maps/api/js' ), array(), STAGTOOLS_VERSION, true );
} else {
if ( current_user_can( 'edit_posts' ) ) :
$error_text = '<small class="stag-alert stag-alert--red">';
$error_text .= sprintf(
/* translators: %s: is a link, do not remove/modify it. */
esc_html__( 'To be able to use Google Maps, you first need to set an %s.', 'stag' ),
sprintf( '<a href="' . admin_url( 'options-general.php?page=stagtools#stagtools_settings_general[google_api_key]' ) . '">%1$s</a>', esc_html__( 'API key', 'stag' ) )
);
$error_text .= '</small>';
return $error_text;
endif;
return;
}
?>
<script type="text/javascript">
jQuery(window).load(function(){
var Stagtools = {};
Stagtools.Map = ( function($) {
function setupMap(options) {
var mapOptions, mapElement, map, marker;
if ( typeof google === 'undefined' ) return;
mapOptions = {
zoom: parseFloat(options.zoom),
center: new google.maps.LatLng(options.center.lat, options.center.long),
scrollwheel: false,
mapTypeId: options.mapTypeId,
styles: options.styles
};
mapElement = document.getElementById(options.id);
map = new google.maps.Map(mapElement, mapOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(options.center.lat, options.center.long),
map: map
});
}
return {
init: function(options) {
setupMap(options);
}
}
} )(jQuery);
var options = {
id: "<?php echo esc_js( $map_id ); ?>",
styles: <?php echo esc_js( $map_styles[ $args['style'] ] ); ?>,
zoom: <?php echo esc_js( $args['zoom'] ); ?>,
mapTypeId: google.maps.MapTypeId.<?php echo esc_js( strtoupper( $args['type'] ) ); ?>,
center: {
lat: "<?php echo esc_js( $args['lat'] ); ?>",
long: "<?php echo esc_js( $args['long'] ); ?>"
}
};
Stagtools.Map.init(options);
});
</script>
<?php
return '<section id="' . esc_attr( $map_id ) . '" class="stag-section google-map" style="width:' . esc_attr( $args['width'] ) . ';height:' . esc_attr( $args['height'] ) . '"></section>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_social] Shortcode
The Stag Social shortcode is designed to display social icons on your site. It takes two parameters: ‘id’ and ‘style’. The ‘id’ parameter can be either a specific social media platform or ‘all’ for displaying all platforms. The ‘style’ parameter defines the look of the icons. The function loops through all specified social media platforms, checks if a URL is set in the settings, and then outputs the icon with the corresponding URL.
Shortcode: [stag_social]
Parameters
Here is a list of all possible stag_social shortcode parameters and attributes:
id– Specifies the social media platforms to display icons for.style– Determines the styling applied to the social icons.
Examples and Usage
Basic example – A simple usage of the shortcode to display all social icons with the default style.
[stag_social id='all' /]Advanced examples
Displaying a specific social icon (for example, Facebook) with the default style.
[stag_social id='facebook' /]Displaying multiple specific social icons (for example, Facebook and Twitter) with the default style.
[stag_social id='facebook,twitter' /]Displaying all social icons with a custom style (for example, square).
[stag_social id='all' style='square' /]Displaying a specific social icon (for example, Facebook) with a custom style (for example, square).
[stag_social id='facebook' style='square' /]Note: Replace ‘facebook’, ‘twitter’, and ‘square’ with your desired social network’s ID and style respectively.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_social] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_social', 'stag_social' );Shortcode PHP function:
function stag_social( $atts ) {
$args = shortcode_atts(
array(
'id' => 'all',
'style' => 'normal',
),
$atts,
'stag_social'
);
$registered_settings = stagtools_get_registered_settings();
$social_urls = array_keys( $registered_settings['social'] );
$settings = get_option( 'stag_options' );
$output = '<p class="stag-social-icons ' . esc_attr( $args['style'] ) . '">';
if ( '' === $args['id'] || 'all' === $args['id'] ) {
$social_ids = $social_urls;
} else {
$social_ids = explode( ',', $args['id'] );
}
foreach ( $social_ids as $slug ) {
$slug = trim( $slug );
if ( isset( $settings[ $slug ] ) && '' !== $settings[ $slug ] ) {
$class = $slug;
$fa_prefix = 'fab';
if ( 'mail' === $slug ) {
$class = 'envelope';
$fa_prefix = 'far';
}
if ( 'rss' === $slug ) {
$fa_prefix = 'fas';
}
if ( 'skype' === $slug ) {
$output .= "<a href='" . $settings[ $slug ] . "' target='_blank'><i class='fab fa-" . esc_attr( $class ) . "'></i></a>";
} else {
$output .= "<a href='" . esc_url( $settings[ $slug ] ) . "' target='_blank'><i class='$fa_prefix fa-" . esc_attr( $class ) . "'></i></a>";
}
}
}
$output .= '</p>';
return $output;
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpStagTools [stag_columns] Shortcode
The Stagtools Columns shortcode is a versatile tool for creating responsive column layouts in your WordPress content. By using [stag_columns], you can section your content into multiple columns within a single row. This shortcode wraps the content in a ‘stag-section’ and ‘stag-columns’ class, allowing for easy styling and alignment. This is especially useful for creating visually engaging layouts without needing complex HTML or CSS knowledge.
Shortcode: [stag_columns]
Examples and Usage
Basic example – A simple usage of the stag_columns shortcode to add a section with columns to your page.
[stag_columns]Your content here[/stag_columns]Here, the ‘stag_columns’ shortcode is used to wrap the content you want to display within a section that has a ‘stag-columns’ class. This class can be styled using CSS to create a columnar layout.
Advanced examples
Utilizing the stag_columns shortcode with nested shortcodes to create more complex layouts. This example demonstrates how to insert another shortcode within the stag_columns shortcode.
[stag_columns][another_shortcode]Your content here[/another_shortcode][/stag_columns]In this instance, the ‘stag_columns’ shortcode is wrapping ‘another_shortcode’. This allows for more complex layouts where different sections have different styles or functionalities. The ‘another_shortcode’ could be any other shortcode that you want to display within your columns.
Using the stag_columns shortcode with content and HTML tags to further customize the layout and appearance of the section.
[stag_columns]<h2>Your Heading Here</h2><p>Your paragraph here</p>[/stag_columns]This example shows how you can include HTML tags within the ‘stag_columns’ shortcode. This allows you to have more control over the layout and styling of the content within the columns. In this case, a heading and a paragraph are included within the columns.
PHP Function Code
In case you have difficulties debugging what causing issues with [stag_columns] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stag_columns', 'stag_columns' );Shortcode PHP function:
function stag_columns( $atts, $content = null ) {
return '<section class="stag-section stag-columns">' . do_shortcode( $content ) . '</section>';
}
Code file location:
stagtools/stagtools/shortcodes/shortcodes.phpConclusion
Now that you’ve learned how to embed the StagTools 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.
Leave a Reply