Displaying a TablePress Table on a Webpage Using Shortcode

Last updated: August 7, 2018 at 19:29 pm

 

In the previous lesson, we learned how to create a table using the TablePress Plugin. We’ve that that table was assigned a shortcode by TablePress. Now it’s time to display that table in a WordPress webpage by pasting that shortcode into the page.

So remember that we were creating an “Our Rooms” page for our hotel website? Well, that’s the page where we’re going to paste our newly created table!

So let’s do this. The first thing to do is to find back that webpage “Our Rooms” but looking inside our WordPress Dashboard. So we log into our WordPress Dashboard once again by typing in hotelamazonasgy.com/wp-admin, then typing in our username and password and then clicking “Login.”

So now that we’re inside our WordPress Dashboard what we’re going to do is look for the “Pages” button in the left hand column menu of the Dashboard.

Once we click the Pages button show above, we’re taken to a new page which shows us all the pages we presently have, and also gives us the ability to view, edit or add new pages.

As you can see, we have the “Contact Us” page that we had created earlier. We also have the Welcome page which is currently our homepage. We also have the “Our Rooms” page which we will continue to work on in a few minutes. And we have a “sample page’ which is basically a useless page which comes with the WordPress Installation.

I also see a Privacy Policy page in draft mode there, but I don’t remember creating such a page. Perhaps it also came with the WordPress installation, but I’ll deal with that later.

For now, I just want to keep working on the “Our Rooms” page so as to insert the new TablePress table which I have just created.

So I’ll hover my mouse over the “Our Rooms” page and then a “View” button will become visible. I will then click that “View” button and the “Our Rooms” page will load.

As you can see, it is pretty much incomplete and it’s time to go back to editing it. So we have to scroll to the top and look for the Edit Page button.

You can see the Edit Page button there on the top Menu Bar of our WordPress Dashboard. Just click it. And the page now loads to edit this “Our Rooms” page.

As you can see, I’ve changed the text a little bit, so now I’m going to paste the shortcode just below that text so that the table of information will display right there.

Do you remember the shortcode? I do. But let’s go back and find it. Remember, we do not want to to navigate away from this Edit Page screen, but we want to look into another part of our Dashboard. What do we do? We just leave that page right there, and take a new tab of our browser and type in “hotelamazonasgy.com/wp-admin.”

It might not be necessary to type in our username and password again since we’re already logged on the same browser and the browser recognizes that.

Great, so now we’re in our Dashboard once again, let’s look for TablePress in the left hand column menu.

 

There it is. So we click “TablePress >> All Tables.” And it displays a list of all tables we have so far, which is just one.

So if you hover our mouse over that table, a button becomes visible named “Show Shortcode.” And we click that button. A window pops up.

The window tells us that to embed our new table into a post or page, use this shortcode. Now I don’t type this shortcode here, because shortcodes are something you don’t type everywhere. They execute commands. And even though it might not be a problem on this page, I won’t type it because I want to adhere to “safe practices.”

But now I know the shortcode as you can above, so I’ll go back to my page that I was editing and type it in or paste it in there.

So as you can see in the picture above, I’ve typed in the short code. Now I’m going “Update” the page and “View” it.

And there you can see our table beautifully displaying the information below our text.

And there you go! We did it! We’ve updated our Rooms Page with a beautiful table showing the different rooms and information.

See you in the next lesson, “Creating an About Us Page.’

Leave a Reply

avatar
10000000000000000
  Subscribe  
Notify of