Hey, this is Ben from WPAanswered.com. In this video,
you'll learn how to add a table into a WordPress post.
Right now I'm using the Period WordPress theme and I've got a WordPress post in
front of me and I would like to add a table into that.
So the first step is to click the "Edit Post" button in the admin tool bar.
Now if you're using the new WordPress Gutenberg editor,
adding a table is really easy.
I'm going to click on this paragraph and press the Enter key to start a new
block. But instead of using, um, a basic paragraph block,
I'll click this "Add block" button on the left.
Within here,
I can search for "table" and that will reveal the table Gutenberg block.
I'll click it to include it.
Now this is a nice setup they have where you can configure the number of columns
and rows you want before creating the table. You can choose as many as you want.
For now,
I'll go with two columns and two rows and click the "Create" button.
As you can see, I now have a table inserted in my post.
Next I'm going to fill it out with some basic information. I'll create um,
a column called "Item Name" and another one called "Price".
And then I will add let's say "Shoes," which are $70.
Now let's say I want to add an additional row.
Maybe I have more items that I want to add in the future. To do that,
I can simply click the "Edit table" button and I can add a row at the top or at
the bottom as well as a few other, um, ways to edit the table,
to remove columns and rows.
So I'll press the "Add Row After" button right now and I'll add in "Socks." And
I'll say these are only $7. Now, so far so good.
If I update the post and look at it,
we'll see I now have a table inserted where I wanted it to be added.
Obviously the style is not so great and this will depend on the styles provided
by the theme or the styles that you add.
Making longer rows will automatically fill out some of this space,
but overall it's a pretty basic solution.
I could improve the style a little bit by making both of these headings bold and
then once I look at it, it's a little bit clearer,
but I wouldn't expect a lot of nice styles to show up just using the Gutenberg
table block on its own. Furthermore,
your options are really rather limited and if you use tables a lot,
you'll start to run into some real problems. For instance,
if you want to replicate this table in another page on your site,
you'll need to visit this post, select the block,
and then copy and paste it.
That's not too big of a deal until you need to update the table.
Now you need to update the table in two locations.
What's happening is that this table,
the way it's inserted is both stylistically limited and limited in terms of
managing your data.
A better solution is to separate your data from your presentation.
To do that, we'll add a new plugin called TablePress,
and this is the plugin that I recommend everyone uses whenever you're inserting
a table into a WordPress post or page. Like any plugin,
you can press the "Install" button and after installed,
you don't need to leave this page to click "Activate" to activate on your site.
And on my demo site you can see I just have only TablePress installed for now.
Once it's installed, you'll see a new menu over here.
And if I press on TablePress, you'll see um,
the all tables view where I can review every table I've added.
There's a few things I can do here.
I can add new tables with either of these buttons here I can import and export
tables,
which is really nice if you want to share tables across different WordPress
sites.
And there's some additional plugin options which we don't need to worry about
for now. So I'll press this "Add new" button,
and here I'll be prompted to name my table, which when testing it out,
you can see I already tested the name "My Table," which is fine.
For the number of rows, we'll use three rows just like our previous table.
And we'll switch to just two columns.
And then I'll press "Add table." Now this next view is a little bit overwhelming
at first,
but let me go ahead and walk you through it and I think it will make perfect
sense in just a moment. The table information section is very simple.
It's got the ID, the name, the description, and when it was last modified.
You also have the shortcode which we'll talk about in just a moment.
The bulk of the work you'll be doing is in the "Table Content" box.
Here I can add the same information that I had previously,
which I will go ahead and do.
Now I have shoes which were $70 and I have socks,
which I believe I said were $7 so I have all my information filled out.
In addition to just plain text,
I can also use the "Table Manipulation" section to do some other cool things.
For instance, I can use insert link,
insert image or the advanced editor that more complex content,
so just to show you how that works. If I click insert link,
the way it works is I press this button and this prompt will just show up once
telling me I need to click in a cell and if I click in the cell I'll then have
the insert edit link prompt,
which you're probably used to this modal window by now it shows up in posts and
that's how I add a link into a cell and you'll see if I press it again,
I don't get that same pop up message.
So that's just the first time you use each of these buttons so it doesn't get
too annoying work with, of course you can also combine cells,
you can hide and show columns and rows. You can add rows and columns.
It's really nice and just so you know,
if you want to select multiple cells at once,
you can do so with the check boxes you see on the left and bottom of the table.
Lastly,
there's a Table Options section where you can choose some basic style options
and there are also some Javascript Options for how you want the sorting and
filtering to work in your site. I'll let you play with those,
but it's not really important right now.
I'm happy with the way I have my table at this point.
So I will click the save changes option here at the bottom and now you can see
my table has been saved.
I can also copy export and delete it whenever I want.
So those are the basic options added by TablePress and now that I have my table
designed here,
and remember the point of this is to separate the data from the presentation.
So whenever I want to work on my data,
I go to TablePress and I have the data stored here.
This isn't what it's going to look like on my site. That's the presentation.
But this is how the data is structured.
So that separation is really nice and allows you to worry about one thing at a
time. I am happy with my data,
so now I'm prepared to add this table to my post to do that,
I will copy this shortcode. Now if you've never used a shortcode before,
it makes sure to watch my tutorial on using shortcodes.
It's only a couple of minutes long and you'll understand exactly what's
happening here after you watch that.
So I'll return to this post and press the "Edit post" button again.
This time I'll delete this table block I had before and instead I'll click
command+v to paste in the shortcode and Gutenberg will automatically create a
shortcode block for me. That's all I need to do to add the table.
Now that I pressed the update button,
I'll click "View post" and we can see the table is now displayed.
In addition,
TablePress also output some of its own styles which make it look a bit nicer and
there's some additional controls for showing the number of entries per page that
there is pagination, which I don't need for this table.
Visitors can even search for specific terms that show up within the table for a
table with three rows.
This is not all necessary and if I want to remove those options,
I can remove them in these sections, down here.
When it comes to adding tables to WordPress,
you can use the basic Gutenberg table block for adding simple tables,
but if you want something more stylish and robust,
I highly recommend trying the TablePress plugin. If you like this video,
please click the Like button below and subscribe.
If you'd like to see more WordPress tutorials. If you have any questions,
please leave a comment below and once again, thanks for watching.