WordPress Table Plugins: The Complete Guide

Tables are the perfect way to display information on a website in a structured, user-friendly way. With so many different types of WordPress table plugins to choose from, it's hard to know which one to use.

This is the ultimate guide to WordPress table plugins. You'll discover the different ways in which tables can benefit your website, and the types of plugins available to meet those needs. This guide will also provide advice on choosing a suitable plugin, with an interactive quiz to recommend one that fits your needs. Finally, you will be introduced to ten of the best WordPress table plugins, with easy setup instructions to get you started.

Once you've finished reading, you'll know which table plugin you should use for your website, and how to get started and set it up.

Why use Tables in WordPress?

A table is a good way to display structured data on a WordPress website. If you think creatively, you'll be surprised at how many requirements can be met using tables. For example:

• Tables offer a useful layout for data that is too complex to display as a list.
• You can use tables to create a staff directory or member directory.
• A table can be used to make any type of WordPress directory, such as a product directory, a staff directory, or a business listings database.
• Pricing tables are an eye-catching way to visually present packages and prices.
• Some WordPress table plugins also create grid-style layouts for popular plugins such as WooCommerce, Easy Digital Downloads, and The Events Calendar. This can be easier for developers than being forced to create custom templates.

Many WordPress developers code their own tables using HTML. However, this is not usually recommended because you can save time and create more sophisticated tables using a WordPress table plugin. HTML tables are also a nightmare for clients to edit themselves! The best table plugins are mobile-friendly and pre-styled, so you can easily create fantastic tables for any purpose.

Types of WordPress Table Plugin

There are, in general, 3 types of WordPress table plugins: static table plugins, dynamic table plugins and pricing table plugins.

Static Table Plugins

This is the most common type of table plugin. They display static data in a structured tabular format with multiple rows and columns.

Depending on the plugin, the table may be interactive, with responsive design, search, sort, and filters. These would still be described as 'static' because the data is added directly to the table and not used (or drawn from) elsewhere on your website.

Dynamic Table Plugins

This is a new generation of table plugins which started emerging, for the most part, in the last year. Instead of displaying static data, these plugins automatically generate instant tables containing content that already exists elsewhere on your site.

For example, a dynamic WordPress table plugin might create a table listing all the posts from a blog. It might create a product table listing all of your pre-existing WooCommerce products (or other e-commerce plugin). Dynamic tables are also a great tool for creating a WordPress document library. You might wish to create an instant table listing all of your pages, which you could use as a table of contents for your website. Or perhaps you might wish to automatically generate a list of upcoming events, or a directory of staff or local businesses.

The difference between static and dynamic tables is that with the former, the data is only stored in one place. With dynamic tables, the data already exists elsewhere. This means that you can use the table to summarise information, and visitors can click on an item in the table to learn more. For example, they might want to click through to read the full text of a blog article or buy a product on another page. This wouldn't be as easily possible with a static table plugin.

Pricing Table Plugins

Pricing tables are the third category of WordPress table plugin. While these also display static data, they're different to the first category because they have a specific purpose. They're solely designed to showcase the pricing for a product or service.

Continue reading %WordPress Table Plugins: The Complete Guide%

by Katie Keith via SitePoint

Push Notifications in Your Ionic App with OneSignal

Push notifications are messages sent directly to your app’s users. They notify users of new content, even when the user is not using your application. They increase user engagement and retention in your app. An example is the WhatsApp “whistle” that notifies you of new messages received. In this tutorial, we’ll dive into integrating push notifications into your Ionic app using OneSignal.

How push notifications work
A push notification is sent from the Push notification platform of the mobile OS: Apple’s Push Notification Service for iOS and Google Cloud Messaging for Android. These push notification services relay the message to the devices that have subscribed to them.

This means that you need to keep track of all the devices that have subscribed for push notifications. But there are some great services out there to simplify the process. One such service is OneSignal.

Step 1: Install Ionic
To start off with, you need to have Ionic installed on your machine. You install it using the node package manager npm;

$ npm install -g ionic

If you do not have npm installed, follow the instructions in the References section to install it.

Continue reading %Push Notifications in Your Ionic App with OneSignal%

by Charles Muzonzini via SitePoint

How to Run an SEO Campaign in 6 Steps

This article is part of an SEO series from WooRank. Thank you for supporting the partners who make SitePoint possible.

So you’ve decided to start an SEO campaign for your website. Congrats! Unfortunately, you don’t know where to start. Or maybe you know where to start, but don’t know how to continue.

With Facebook, retargeting, AdWords and other PPC channels, setting up a campaign is pretty easy to understand. You build landing pages, create ad creative and then bid on your keywords/impressions. However, with SEO, maybe it isn’t quite as straightforward.

The good news is that it’s actually not too complicated, even for digital marketing novices and newbies. The even better news is that we’re about to tell you how to plan and execute an SEO campaign for your website.

1. Define Your Goals and Strategy

As the saying goes (and as college me learned first-hand), if you fail to plan, you plan to fail. The same goes for your SEO campaigns. The first major thing you need to decide is how you’re going to define success and how you’ll measure progress toward those goals.

When it comes to SEO, your first thought might be "This is obvious. I want the top ranking in Google. That’s what SEO is all about!"

Unfortunately, you need to dig deeper than just ranking in Google, or even website vanity metrics like traffic, bounce rate and engagement. What you really need to do is ask yourself three questions:

1. Who am I trying to reach by ranking at the top of Google? Answering this question will define your target audience and create your marketing personas. Just saying "digital marketers" isn’t going to be very helpful because that’s a very diverse group of people. Here at WooRank, we’ve got at least six different personas with their goals, challenges, wants and needs along with what messaging we will use to reach them.
2. Why am I trying to bring these people onto my website? What is the overall goal you are trying to achieve with this campaign? Again, don’t get sucked into focusing solely on vanity metrics like website traffic or engagement rates. Instead, decide what business goal you’re trying to achieve. Lead generation? Sales? List building? Be specific and concrete.
3. How will I measure progress/achievement related to my goals? These are hard numbers used to calculate how successful your efforts are. Common metrics here are conversion rate, or email and retargeting list membership. If you can’t come up with a metric here to measure goal progress, you probably need to pick a better-defined goal.

You might be tempted to skip this first step and move right to the nuts and bolts of an SEO campaign, but the importance of this part can’t be overstated. It will be really, really hard for you to succeed if you don’t even know what success will look like. If you need more help coming up with your SEO, we’ve got a handy guide for you.

2. Keyword Research

Keywords are still really important parts of search marketing and SEO. However, the way you go about researching and optimizing around them has changed. You can thank Google’s Hummingbird and RankBrain for that. These two algorithms are focused on interpreting the context of words used in a search query and what the purpose behind a query is. It’s how Google figures out if your search involving "apple" is about computers, records or a fruit.

In SEO, this context is known as search intent. There are three main categories of search intent:

• To learn more about a topic: As you probably guessed, these people want to find more information on a topic, the answer to a question or the solution to/cause of a problem. Long tail informational keywords usually include words like "how to", “do I need” or “what is”. Head keywords are typically informational keywords.
• To evaluate their options: These people already know something about the topic those first searchers were looking for and are now weighing their options. They’re deciding which product or solution is right for them. These keywords typically use phrases like "review", “top 10”, “best” or “comparison”. They also use words like “cheap” and “deals”, which are great indicators that they’re about to flip from this category to the next.
• To complete an action: Whether it’s making a purchase, signing up for a service or creating an account, these people know what they want and are ready to make it happen. They expect to achieve their goal directly on the landing page. They typically have lower volume but higher conversion rates.

The great thing about this development in keyword research is that search intent helps inform you where the searcher is in the conversion funnel.

If you’re struggling to come up with good keyword ideas in any phase of the funnel, there are lots of great tools out there that will help you find the right keywords. Here are some of my favorites:

• Ubersuggest
• Keywordtool.io
• Answer the Public
• AdWords Keyword Planner

Check out the keyword research guide for an in-depth look at the keyword research process.

3. Audit, Audit, Audit

Ok, you’ve come up with your personas and goals, and done your keyword research to find the best ones for your audience and funnel. The foundation of your SEO campaign has been laid. So now it’s time to build. That first building block? SEO audits.

Technical Audit

Technical SEO is the process of building a website in a way that makes it crawlable to search engines. If it’s not right, a website could struggle, or even fail, to get indexed. That means no search results for you!

When starting your SEO campaign, you need to get off on the right step by making sure your site is setup correctly. When auditing your website, check the following technical SEO elements:

• XML sitemap: Search engines use a website’s sitemap to find and prioritize your URLs, an important SEO function (even if it’s not a ranking factor).

• Robots.txt: Like sitemaps, robots.txt isn’t a ranking factor, but it will help you influence how your site is crawled. Prevent unimportant, duplicate or otherwise less valuable pages from being indexed so search engines can spend more of their crawl budget on what matters. Plus, you can put a link to your sitemap here to make that easier to find.

• Page speed: Load time is a crucial part of user experience and, therefore, SEO. No search engine wants to recommend a slow site. There’s a lot of reasons your site could be slow. With WooRank’s technical SEO audit, we’ll alert you to slow page speed and possible causes.

  

• URL structure: Make sure you’re following URL best practices for SEO. Make them concise and accurate to the page content, and avoid using underscores to separate words. Use hyphens instead. If you use parameters in your URLs, use Google’s URL Parameters Tool in Google Search Console to help Google deal with potential duplicate content issues.

• Meta tags: Page titles and descriptions are super important to your on-page optimization. Even though only titles work as a ranking factor, descriptions can still convince users to click on your link in search results and keep them engaged on your site. These are two very important parts of maintaining relevance to your target keywords.

Crawl Your Site

For bigger, more complicated sites that have lots of pages, it’s worth it to use a crawler to audit your website. Crawlers work by accessing every URL on a website and collecting information about those URLs. Which is how Google’s crawlers work.

Continue reading %How to Run an SEO Campaign in 6 Steps%

by Greg Snow-Wasserman via SitePoint

Why Every Website Needs HTTPS

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

First and foremost, what does it mean for a website to use HTTPS rather than just plain old HTTP? It means that the site is secured with SSL (Secure Sockets Layer) or the more recent TLS (Transport Layer Security). If you're not knowledgeable about the subject, this statement may mean exactly nothing to you, so let's break it down.

When you visit a site, and you use the https version of the URL, you are asking for the secured version of the site. In a nutshell, this means that your browser will be hoping to see a SSL/TLS certificate on the website's server. That certificate should be granted by a verifiable Certificate Authority (CA) and basically allows your browser to interact with it via an encrypted connection. Depending on the certificate, it may also say "Look, this site is who it says it is, that's been verified". Once that certificate is found, a secure encrypted connection can be established between your browser and the website. Now, if anyone attempts to step in and intercept your communication, the data will be encrypted. Your ISP might be able to determine what website you went to, or how much data is transmitted back and forth, but there won't be any further snooping happening.

If the website's server is accepting HTTPS requests, but there is no valid certificate for that website, or the site's certificate is expired, has an invalid CA, or any other issue, your browser will notify you, and attempt to prevent you from continuing. This is due to the fact that the website is saying that there is a secured connection available, but not providing one, so the browser is trying to make you aware of that.

Many web servers either have a certificate, and route all incoming traffic to HTTPS, forcing you to use the secure version, or, if they have no certificate, route all traffic to HTTP, thus preventing users from trying to access a secure connection that doesn't exist.

So, now that we have a rough idea of what constitutes an encrypted connection to a website, let's take a look at the positive impacts of obtaining a security certificate for your site.

Search Rankings

In 2014, Google made HTTPS a factor in search results. Their goal seemed to be to force a change, to pressure website administrators to offer proper security for their visitors. At the time, this was a big deal, and it seems to have worked. This period was the start of an upward trend in the percentage of websites that introduced SSL/TLS for part of their traffic. In fact, sites that were entirely HTTPS also went on the rise.

Of course, Google doesn't publish all of the changes to the algorithms, but we know that HTTPS is an indicator, and it stands to reason that as more and more sites go HTTPS, that the penalty for not doing so may also be increasing. But for your site, or that of your client, isn't a little bit of extra work in trade for ensuring that your site isn't overlooked in favor of HTTPS enabled competitors well worth it?

Make Your Visitors Feel Secure

This next reason also falls into Google's wheelhouse, a bit, but concerning a different product: Chrome. According to a blog post about HTTPS sites, starting in 2017 with Chrome version 56, any pages that used forms to collect sensitive information (such as credit cards, login credentials, etc) would now be marked as "Insecure" in the address bar, with the neutral gray icon and text.

So, if your site collects private user information, Chrome may already be marking it as "insecure" to your users. What will that do for your user confidence? And in future releases, Chrome will be marking all HTTP sites as "not secure" with red warnings in the bar - a clear sign to your users that they shouldn't trust you! And Firefox does much the same thing, flagging form fields in non-HTTPS sites that may have you insecurely inputting sensitive information, and instructing users that the site is insecure in the address bar.

So, what is your users' faith in your website worth? Even if you aren't collecting sensitive information on your site, a visitor's ability to browse with confidence may make all of the difference.

Actually Make Your Visitors Secure

Here we come to what should be the main benefit of using HTTPS for your website - making your visitors and their interactions with your website actually secure. So, what do you actually need HTTPS for, and how will it help secure your visitors?

Continue reading %Why Every Website Needs HTTPS%

by Jeff Smith via SitePoint

How To Write Tests For Android Development

Automated unit tests for an Android app are necessary for its long-term quality. Unit tests help to test one unit of your code (for example a class). This helps in catching and identifying bugs or regressions very early in the development cycle. In this article, we are going to see how we can write unit […]

Continue reading %How To Write Tests For Android Development%

by Abbas Suterwala via SitePoint

Finch.io: A Visual Tool for Finding and Fixing Design Bugs

When you’re beginning a brand-new design project, you probably start at the same place every time.

• On blank paper and pencil…
• Or maybe a wireframing/mock-up tool

Sketches turn into wireframes. Wireframes turn into prototypes. Prototypes turn into fleshed out designs.

But what happens during that final 10% of the project? The site is working but margins, padding, text alignment, fonts and colors all need bug-fixing and adjusting. It raises a good question.

How do you communicate small design changes to an existing design?

• Do you send screenshots back and forth with arrows?
• Do you start a new Trello card?
• Do you stick yellow sticky notes to a developer’s monitor?
• Do you file a new Github issue?

And let’s be clear: We're not talking about glamorous, rock star design changes:

• Adjust that margin
• That’s H2 is the wrong font
• Scale up the subheadings

They're all small, but often important bug-fixes and there are often a lot of them.

Finch.io is a tool that takes a very different approach to this challenge.

What is Finch.io?

Finch.io is an app that imports a copy your live page and provides a 'Sketch-like' UI for you to make changes to what you see. When you’re done, it then lets you share your changes/edits with your developer/team.

Let’s take it for a quick test-drive.

Getting Started

There isn’t a lot to look at on opening Finch.io. There are no tools and very few UI options to be seen – just a search box and a demo project.

< [caption id="attachment_153565" align="aligncenter" width="1200"] Finch project view[/caption]

Type a URL into the search bar and you’ll see your website load. So…umm… is this just a web browser?

But start clicking around the page and things get more interesting. All page elements react to your cursor and become clickable. Click on an item and a ‘Sketch-like’ properties editor panel will bounce out of the right of screen.

Making Edits

As you might guess, clicking on a page element makes it editable – either via the properties panel or by directly dragging and resizing the handles. You’re now working with a live visual editor. The UI panel is neatly organized into three main sections: Position, Type, and Box.

[caption id="attachment_153567" align="aligncenter" width="664"] Finch.io UI[/caption]

Clicking the note icon switches you to comments mode. Clicking any page element allows you (or anyone else signed-in) to attach an explanatory note or instructions to your changes.

[caption id="attachment_153560" align="aligncenter" width="1126"] Adding comments[/caption]

Continue reading %Finch.io: A Visual Tool for Finding and Fixing Design Bugs%

by Alex Walker via SitePoint

This Week's HTML5, CSS and Browser Tech News #288

Read this e-mail on the Web FrontEnd Focus Issue 288 — May 3, 2017 Getting Started with Headless Chrome ‘Headless’ Chrome is basically Chrome running without any UI or visible controls, so is ideal for automated testing or server environments. Eric Bidelman ECMAScript Module Support in Browsers ES module support is arriving in browsers, first in Safari 10.1, as well as Chrome 60, Firefox 54, Edge 15 behind config settings. Jake explains what this means for front-end developers. Jake Archibald Combining Fonts with CSS's 'unicode-range' Property Got a font but want to use a different font for certain characters? CSS lets you combine multiple fonts into one family - here’s how. Jake Archibald ☁️🥊 Hey Front-End Devs …Master Full Stack with Jem Young! Become a Full Stack Engineer and gain the confidence to master the command line and server. Frontend Masters   Sponsor CSS Custom Properties and Theming Rather than writing separate CSS to handle ‘themes’ on a site, why not write it once and control it using CSS variables? Chris Coyier Optimizing Web Fonts for Performance: The State of The Art Maria Antonietta Perna digs into performance issues, and solutions for them, when loading custom web fonts. Sitepoint Chrome 59 Beta Released with Tweaks and DevTools Improvements Brings headless support to macOS and Linux, native notifications on macOS, improvements to streams and the Media Capture API. Also see what’s new Chrome 59’s DevTools, including CSS and JS code coverage. Google Spector.js: A Framework For Troubleshooting WebGL Projects Bring Spector into your WebGL projects and it provides a ton of debugging tools for digging into what’s going on. Flexbox Zombies: A New Online Flexbox Course A story-led course on using the Flexible Box Layout Model. Dave Geddes Jobs craigslist seeks JavaScript Developers (San Francisco, CA)Web devs with JavaScript, CSS, and HTML experience wanted to design and ship new features, and see them loved (or hated) by millions. craigslist Senior Front-end Engineer, BitbucketWant to build the future of code collaboration? Join Atlassian, work on Bitbucket, our source code collaboration and hosting product. Atlassian JavaScript Engineer @ Contentful (Berlin, Germany)The essential CMS for projects of any size, with flexible APIs and global CDN. We're seeking experienced JavaScript Engineers. Contentful GmbH Can't find the right job? Want companies to apply to you? Try Hired.com. In Brief Upcoming Web Design Conferences (May–September 2017) news A list of over 100 events all around the world. Smashing Magazine What's Changed in Bootstrap 4.0 (alpha 6)? news Yuri Ramos 5-Minute Signup Forms with Node-RED and MongoDB tutorial Learn how to quickly build a signup form in Node-RED and save the entered data to a Compose MongoDB database. Compose  Sponsor Using Device Motion on the Web To Detect Shaking tutorial Raymond Camden An Accessibility Style Guide for the Web tutorial Covers best practices for various site components, and includes code examples. Carie Fisher Samsung DeX Brings the Mobile Web to the Desktop tutorial Samsung’s new S8 phone can be used desktop-style. Ada Rose Edwards How to Set CSS Margins and Padding (And Cool Layout Tricks) tutorial Baljeet Rathi CSS-Only Multi-Color Backgrounds (Using Clever Gradients) tutorial Better Web Typography: A Free Web Typography Email Course tutorial Matej Latin Implementing System Fonts on Booking.com — A Lesson Learned story TLDR: “don’t use -apple-system at the head of a shorthand font declaration” Stuart Frisby Your Site's Body Text is Too Small opinion Why website body text should be bigger, and ways to optimize it. Christian Miller Are you aware of errors that your users are experiencing? 🕵️ tools Automatically detect and diagnose, and quickly fix, JavaScript errors affecting your users with Bugsnag. Bugsnag  Sponsor Griddy: A Live CSS Grid Wizard/Development Tool tools Play with CSS grids and learn at the same time. This CSS grid ‘cheat sheet’ is also very similar. Drew Minns WebSlides: An Open Source System for Making HTML Presentations tools José Luis Antúnez Semantic UI: A Framework for Creating Responsive Layouts tools SmartPhoto.js: A Responsive Image Viewer, Especially for Mobile code PicoGL.js: Convenience Methods for the WebGL 2 Rendering Pipeline code SVG Text Mask with a Video Fill demo Dudley Storey React-Powered Animated Page Transitions demo Sarah Drasner Curated by Peter Cooper and Chris Brandrick and published by Cooperpress. Stop getting FrontEnd Focus : Change email address : Read this issue on the Web Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK

by via FrontEnd Focus