Pluginless Grid Styling for WordPress
WordPress Themes look beautiful right? When we are selecting a theme for our site, we look at its Thumbnail Image or Screenshots in a larger screen, and decide on it. Well, once we have it installed does it really look how we expected it to look like? I am sure not!, at least a theme that showed those beautiful grids does not. Well, there is a limit to which themes can help you beautify for your site. After all, not all theme builders know what kind of site content will be using this theme. Or the other way round, sometimes we ignore theme and site purpose relevance and just select a theme because it looks good, has the color or layout we were looking for. Fixing such issues aren’t a big deal if you have the ability to purchase multiple plugins. However, if resources are limited, you have no problem at all. Basic tools like Tables in our WordPress editing tools or CSS are the ultimate savior.
Tables
Simply use Tables from the WordPress Toolbar
The tables allow a lot of flexibility in customizing such as changing colors of borders or backgrounds, changing size of border width etcetera.
Use the Design Flexibility WordPress Tables Allow
Rather than just using texts, you can use images to create that grid you saw in the Theme Screenshot.You can link those images to the relevant pages or posts to make it an interactive table.
Examples of some customized tables are as follows:
The example used below is from a Theme that allows Tables to be Responsive
The example above uses images of size 150px x 150px and uses background color Black.
Tips:
If using images for styling, try to make sure that all images are of the same size. This will retain table aesthetics for a more appealing appearance.
WordPress Tables usually have double borders. It is important to be mindful of the positions of those borders when changing the size or position of the table by (using cursor) stretching.
Use Custom CSS
More modifications to table can be made using Custom CSS. In order to use Custom CSS if you have to use WordPress Premium or WordPress Business. Such as, if changing border color to page/post background doesn’t work, you call always hide the borders using CSS code.
To style Table CSS Code could be as follows. The examples below are for hiding borders of Table.
Note:
[sample code from WordPress Custom CSS using a Theme]
.entry-content table {
margin-bottom: 15px;
border-collapse: collapse;
font-size: 1em;
border: solid 1px #ffffff; //Change color to background of Page/Post
}
.entry-content table tr th {
padding: 5px;
font-weight: bold;
text-align: center;
background-color: #f0f0f0;
border: solid 1px #ffffff; //Change color to background of Page/Post
}
.entry-content table tr td {
padding: 5px;
border: solid 1px #ffffff; //Change color to background of Page/Post
}
or
Note:
[sample code from general CSS of a HTML code for Tables]
table {
border-collapse: collapse;
}
or
td, th {
border:none;
}
Codes to modify using CSS may vary based on the ids and classes of the specific table of your site and the type of styling you want. For instance, the class I used in the first example is specific to the WordPress theme I was using.
You can always refer to open source sites such as W3Schools or StackOverFlow for guidelines if you do not have knowledge / experience of styling using CSS. However, an important suggestion from WordPress experience would be to not try to change the default HTML code that WordPress makes. Try to use CSS on the HTML that your WordPress makes for you.
Hardcode using Custom CSS
You can create column based responsive design by coding responsive column on WordPress text editor and CSS. From my experience, the codes from open source sites like http://www.responsivegridsystem.com and https://codepen.io/bradfrost/pen/orKvD . This could be very useful in retaining the responsiveness across themes and also playing with the number of rows and columns.
Examples of some sample grids made using Custom CSS are as follows:
The example below uses 2 column grid:
The example below uses 3 column grid:
Main Catch with Using Tables
1. Tables may not be responsive for all themes. It is important to check during designing process.
2. The default double borders of Tables may make the table look unpleasant or messy, if not properly stretched.
3. Adjusting color of table borders may/may not be tedious.