Tag Archives: shortcodes

Shortcode Revolution for WordPress

Leave a reply

During our work on various WordPress installations I have figured out that we repeatedly create (oh well, kind of copy/paste) layout elements, dynamic stuff like lightboxes and sliders, pieces of code in custom plugins, and so on.

Some of these codes slowly turned into a library so we decided to go ahead and package them into a new free plugin called Shortcode Revolution. (You can check it at our site or directly at the WordPress repo)

This is just a very first version so there is hopefully a lot more to come. But let’s have a brief look at what’s available:

Posts, Related Posts, and Comments

UI for posts / comments shortcode

This allows you to create widgets that contain posts related to a topic, searched by ID or tag, related to the currently shown post, and so on.

There are 3 handy layout modes: simple list, default (with a thumbnail and excerpt), and a carousel / slider.

And above this paragraph you see a slider / carousel of 3 posts related to this one.

Popup / Lightbox

modal box UI

This is such a frequent task, and this plugin really makes it easy. Just enter your contents, some clickable text and probably some custom CSS classes. Voila, the popup is created.

Click me!

Columns and Grids

Columns / Grids UI

I mean, it’s typical that the content on the web normally just stays in one column. But who said it should always be that?

Do you remember newsletters? I hope our readers are not all that young. Newsletters (the paper ones!) typically have content flowing in multuple columns. That’s not typical for the web not because it’s bad but because it was hard thing to do in the past.

Now with the new CSS techniques it’s not that hard. But you don’t always want to write CSS especially when you are writing a blog post, do you? This is where the columns shortcode comes handy!

The shortcode also allows you to create a grid. In the grid the content does not flow in the columns. Instead, each piece stays in its own grid cell. Like this:

Hey, I’m the first item

And I am number two

They can all be different

And can contain images (look right)

Chart from a personality quiz

This at left is from our quiz plugin WatuPRO

Third line, item 1

And number two

The ninth item goes here

Tabs

Tabs UI

Tabs allow you to place content within, well, tabs. What does it mean? Look at this:

As I told you, you can  arrange content in tabs 🙂 Just click on one of these tabs and you’ll see the content related to each one.
just a chartLet’s just have a chart here to look smart.

Buttons

Create buttons UI

There isn’t so much to explain here. You get an easy to use UI to create all kind of buttons.

Tables

create tables from CSV

This one is super simple – it creates table from an uploaded CSV file. Technically you can use a remove or a dynamic CSV as well – just replace the uploaded file URL with the remote one.

Tables aren’t that much fascinating – I am sure you have seem some! So no demo for this shortcode.

Flashcards / Flipcards

Create flashcard shortcodes

There cards have a front and a back side and reveal the back when the user clicks on them. Simple:

Here’s a Math task:

2 + 2*3?

Of course it’s 8 because multiplication has a higher priority than addition 🙂

Who is she?

Adriana Lima

You can even combine shortcodes together like I did above. I placed two flashcard shortcodes in a grid so they can be side by side.

Data Shortcodes

creating a data shortcode

They are excellent for creating profile pages in communities, author pages, widgets containing some user data, and so on.

Custom Shortcodes

Just any content that you may want in many places on your site. Custom HTML, shortcodes, media, formulas, whatever. Easily repeatable and editable in one place.

Enjoy the plugin – it’s free and can save you many hours of work. Let us know your feedback, feature requests, and bug reports (yes, even bug reports!).

Hierarchical Breadcrumb Navigation in Namaste! LMS

Leave a reply

Since the introduction of the new [namaste-breadcrumb] shortcode in Namaste! LMS it’s now easy to add a breadcrumb navigation that lets you see your position in the learning process. It looks like this:

Course link >> Module link >> Lesson

Or if you don’t use modules:

Course link >> Lesson.

Simple. You can just drop the shortcode inside every lesson and/or module and you’ll get the navigation.

But how to add it to your theme?

There are two ways: the easiest is to get the Namaste! Premium theme which has this option built in:

Breadcrumb navigation in Namaste! LMS Theme

The other method is manual. It’s also not too hard, so let me explain how to do it. You’ll need a very basic understanding of HTML, editing PHP files and a text editor like Notepad++

  1. Download your theme locally.
  2. Open the file single.php. Use “Save as” and save it as single-namaste_lesson.php
  3. In that file find the following line: 
    get_template_part( 'template-parts/content', get_post_format() );
  4. Replace it with this: 
    get_template_part( 'template-parts/content-lessons', get_post_format() );
  5. Open the file template-parts/content.php. Use “Save as” and save it as template-parts/content-lessons.php
  6. Go right before the following line that wraps the article: 
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    And add the following code:

    <?php echo do_shortcode('[namaste-breadcrumb]');?>

    Feel free to wrap it in a div or another element if you like.

That’s it. If you use modules, you need to repeat the steps but save the files as single-namaste_module.php and template-parts/content-modules.php. Also the line in step 4 will be like this:

get_template_part( 'template-parts/content-modules', get_post_format() );

Don’t forget that the shortcode allows you to use custom separator so you can use it like this:

<?php echo do_shortcode('[namaste-breadcrumb separator="/"]');?>

 

Basic Math Based On User Answers in WatuPRO

A new shortcode in WatuPRO (from version 5.6.2.1) lets you perform basic math on two of the user’s answers. This shortcode should be used only in the “Final screen” of a test.

Here is the shortcode with all its possible parameters:

[watupro-calculator math=”152+256″ output=”1″ var=”my_var”]

Attributes:

  • math (required) shows the math you want to perform. Note that the numbers in the formula are question IDs and not actual numbers. I.e. you are not telling the shortcode to add 152 and 256, that would be pointless. You are telling the shortcode to add the answer to question with ID 152 to the answer of 256. It assumes answers are numeric and will work properly on numeric answers – i.e. it’s good for single-choice or open-end questions.
    The math can contain expression of 2 questions only with any of the four standard math operations: +, -, /, *.
  • output (optional) defines whether the result will be shown on the screen. The patameter defaults to 1 which means result will be shown. It makes sense to set it to 0 (don’t show) only if you are going to get the result in a variable for next shortcode usage on the same final screen.
  • var (optional) is a variable name where to assign the result for next shortcode usage. Use only letters and underscore.

To make the whole thing above clearer and simpler, let’s make an example.

Example:

Let’s pretend to make a simple investment calculator without compounding. We will ask the user for their current savings, the yearly interest (expressed as decimal and NOT percentage) and how many years they want to save.

Here are our questions:

Here is how the shortcode is used in the Final screen:

Here is the example input:

And here is the result:

We took the multiplication of answers to Question 1 (with ID 901) and Question 2 (with ID 902) and put it into variable called “yearly”.

Then we took the yearly interest from the variable and multiplied it by the number of years (question 3 with ID 903) to get the total accumulated simple interest. We also placed this result in the variable total_interest.

Finally we added the answer to Question 1 with ID 901 to the variable total_interest to get the final result.