WordPress

WordPress Explained

WordPress

  • An application run off PHP

WordPress.org

  • holds open source project, download app here, WordPress.org/forums is the place to ask about WP problems

WordPress.com

  •  ‘Automatic’ company distributed as SASS as free or paid to use with paid features plus Calypso. Also Jetpack, VideoPress, VaultPress

Three things needed to run WP site:

  1. WordPress the app
  2. Web server using PHP and MySQL
  3. MySQL DB database


WordPress Folders

Within the WP public folder, the only two items not replaceable is:

  1. wp-content folder_Contains all the customization options that have been added
  2. wp-config_Contains the configuration files for WP that lets WP talk to the database

Keyboard Shortcuts

Number of pound signs plus space = headings 1 – 6

Dash plus space = bullet list

1 period plus space = numbered list

Right-arrow (>) plus space = Blockquote (Ctrl plus enter to exit)

Alt + shift + d = strike-through


WordPress Content Type

Posts

  • entries listed in reverse chronological order on a page
  • meant to be time-sensitive
  • Older posts are archived
    • As they get older, the deeper one needs to dig to find it
  • option to organize your posts based on categories and tags
  • syndicated through the RSS feeds
  • many social sharing plugins allowing users to share posts in social media
  • used mostly as a blog
    • Stream of data, newspaper, articles, social media, portfolio items, ideas, creative outlets
  • built-in commenting feature

Pages

  • static “one-off” type content
    • about page, privacy policy, legal disclaimers, etc.
  • timeless entities, not suppose to expire
  • make updates to pages
  • no time and date tied to pages
  • not included in your RSS feeds by default
  • not meant to be social, does not include social sharing buttons, or comments
  • hierarchical by nature
    • have a sub pages within a page
  • customize the look of each page when necessary
    • most themes, post and pages look the same
    • custom page templates feature for individual page customization
  • Order which lets you customize the order of pages by assigning a number value to it

Posts versus Pages:

  • Posts are timely vs. Pages are timeless.
  • Posts are social vs. Pages are NOT.
  • Posts can be categorized vs. Pages are hierarchical.
  • Posts are included in RSS feed vs. Pages are not.
  • Pages have custom template feature vs. Posts do not

 


Separation of Style and Content

Separation of style and content-1

Separation of style and content-2


WordPress Users


WordPress Media

Three Internet Video Types Recognized

  • .mp4
  • .ogv
  • .webm


WordPress Plugins

 

WP Services

  • Cloudflare_Caches site first for visitors and blocks malicious attacks_Free plan
  • VaultPress.com
  • AKismet_Scans comments
  • Jetpack.me_Protect feature

WordPress Resources

  • WordPress.org
  • wp.hplussport.com
  • wordpress.meetup.com
  • central.wordcamp.org
  • wptavern.com

 


How to Create Responsive Tables in WordPress

How to Create Responsive Tables in WordPress That Don’t Suck

HTML tables, once commonly used for webpage layouts, are now a layout headache for many web designers. Tables often work best with fixed widths, which means they can wreak havoc on otherwise pixel-perfect responsive website designs. So what’s a WordPresser to do?

The first thing to do with tables is to use them sparingly. Tables should be used for tabular data and nothing else.

Not sure if a table is the right option for a specific data set? Put it to the spreadsheet test. Would this data make sense presented in a spreadsheet? If so, an HTML table is an appropriate choice. If not, consider using a list or some other element to present the data.

Once you’ve identified a table as the best option, what then? Make sure it renders beautifully regardless of the size of the device viewing the table. Easier said than done, right?

Fear not. In this tutorial, you’ll learn about five different tools you can use to make HTML tables beautifully responsive.

How Are Tables Handled by WordPress?

There isn’t a straightforward answer to that question. The way tables are presented in WordPress varies from one theme to the next because table styling is handled by the CSS that ships with each theme. So tables are rendered according to the CSS rules included with the active theme. Switch themes and the way tables are rendered will change.

Some themes have better built-in support for responsive tables than others. TwentySixteen, for instance, does a pretty good job of dealing with tables as long as they only have two or three columns filled with short bits of data. However, not all themes are as thoroughly designed as TwentySixteen.

Let’s have a look at how TwentySixteen handles an HTML table when rendered on a handheld device. Here is a bit of HTML that will produce a table with five columns and six rows. It shows the most popular content management systems according to W3Techs.

<!– CMS usage data from w3techs.com / captured 7/6/16 –>
<table>
<caption>Most Popular Content Management Systems | July 2016</caption>
<thead>
<tr>
<th>CMS</th>
<th>Usage</th>
<th>Change Since 6/1/16</th>
<th>Market Share</th>
<th>Change Since 6/1/16</th>
</tr>
</thead>
<tbody>
<tr>
<td>WordPress</td>
<td>26.5%</td>
<td>+0.1%</td>
<td>59.5%</td>
<td>No change</td>
</tr>
<tr>
<td>Joomla</td>
<td>2.6%</td>
<td>-0.1%</td>
<td>5.9%</td>
<td>No change</td>
</tr>
<tr>
<td>Drupal</td>
<td>2.2%</td>
<td>No change</td>
<td>4.9%</td>
<td>No change</td>
</tr>
<tr>
<td>Magento</td>
<td>1.3%</td>
<td>No change</td>
<td>2.8%</td>
<td>No change</td>
</tr>
<tr>
<td>Blogger</td>
<td>1.2%</td>
<td>No change</td>
<td>2.6%</td>
<td>No change</td>
</tr>
</tbody>
</table>
view rawsimple-table.html hosted with ❤ by GitHub

When dropped into a post with a TwentySixteen child theme activated, that table looks pretty good viewed on a laptop or desktop monitor. It’s clear right off-the-bat that TwentySixteen includes thoughtful table styling.

We can use Chrome Developer Tools Device Mode to see how things look on a smaller device.

screenshot of table with no plugins installed

Well that’s not ideal.

The TwentySixteen developers did include CSS styles that make tables responsive. If this table only included two or three columns it would probably look pretty good. However, this table includes five columns which is too much for the default table styling included with TwentySixteen.

Let’s fix this table up.

Make Tables Responsive Manually

The first option we’re going to look at is a manual fix that includes adding CSS and JavaScript to the theme. That might sound tricky, but using a strategy described in this tutorial from Exis, it’s actually pretty simple.

To make tables responsive, we need three things:

  • A properly formatted HTML table.
  • A short bit of JavaScript to associate each table heading cell with the data cells appearing in the same table column.
  • A simple CSS ruleset that will be triggered when the display shrinks below a predetermined width. This bit of CSS will rearrange the table rows into columns, hide the row of heading cells, and add the contents of the heading cells to each data cell.

It’s important to note that the table must be properly formatted for this to work. The script is designed to look for heading cells in a thead element and assign them as HTML attributes to the data cells in a tbodyelement. If you create a table doesn’t include thead and tbodyelements the code won’t work.

Here’s the JavaScript we’ll be using:

/* Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress
Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */
var headertext = [];
var headers = document.querySelectorAll(thead);
var tablebody = document.querySelectorAll(tbody);
for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute(data-th, headertext[h][j]);
}
}
}
view rawresponsive-table.js hosted with ❤ by GitHub

And here’s the applicable CSS.

/* Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress
Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}

JavaScript

/* Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress
Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */

var headertext = [];
var headers = document.querySelectorAll(“thead”);
var tablebody = document.querySelectorAll(“tbody”);

for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}

for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute(“data-th”, headertext[h][j]);
}
}
}

CSS

nd here’s the applicable CSS.

/* Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress
Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}

The simplest way to use this code is to add it right to the post or page where the table appears. You can do that by dropping the CSS between style tags, and dropping the JavaScript between script tags. If you do decide to do that, make sure you minify the JavaScript before dropping it into the text editor or the wpautop function will add paragraph breaks to the script, breaking it in the process.

screenshot of wordpress post editor with css and minified javascript added to end of post

The result is actually very nice. Here’s how the table looks when previewed with the iPhone5 preview in Google Chrome.

screenshot of table with manual css and javascript added

A Better Way to Do Tables

Adding the CSS and JavaScript directly into the post is not the best way to add the code.

If you only ever use this code once, adding it right to the post or page where the table appears is fine. However, if you’re going to use tables on a regular basis, a better way to add the code is to embed it right in the theme files.

Adding the code right to your theme really isn’t that hard. You can do it in just four steps.

  • First, make sure you’re using a child theme to avoid losing your work the next time you update your theme.
  • Second, copy and paste the CSS into the theme’s style.css file.
  • Third, save the JavaScript as a separate file and upload it to your theme directory.
  • Fourth, use the wp_enqueue_script function in your themes functions.php file to add the JavaScript resource to your theme, making sure to set in_footer to true while you’re doing that.

The trickiest part of the process is adding the script file with wp_enqueue_script, but I can make that step a little easier. Here’s a code snippet you can add to the functions.php file that will add the JavaScript file to the theme assuming you the JavaScript file responsive-tables.js and put it in the main theme directory.

<?php
function responsive_tables_enqueue_script() {
wp_enqueue_script( responsive-tables, get_stylesheet_directory_uri() . /responsive-tables.js, $deps = array(), $ver = false, $in_footer = true );
}
add_action( wp_enqueue_scripts, responsive_tables_enqueue_script );
view rawfunctions.php hosted with ❤ by GitHub

Your functions.php file may look a little different, but this gives you an idea of what the enqueue function should look like. WPMU DEV writer and WordPress developer Daniel Pataki has covered the wp_enqueue_scriptfunction in depth on this blog. So you can refer to that tutorial–as I did–if you struggle with this step.

Once you’ve followed all four steps, the CSS and JavaScript will be available on every page of your site, and any tables on the site will be responsive.

Well done.

How to Create Responsive Tables in WordPress That Don’t Suck