Author: Steve Puddick

Notes Widget Wrapper PRO Launched!

Notes Widget Wrapper PRO is now available! Featuring shortcodes and more!

Coming Soon – Notes Widget Wrapper PRO

Stay tuned for Notes Widget Wrapper PRO launching soon!

The PRO version includes the highly requested shortcodes. You will be able to embed notes with free form content directly in your posts and pages. Take a look at some screenshot previews. Sign up on the mailing list to be notified when it is launched.

The original, free version of Notes Widget Wrapper is still available in WordPress plugin repository.

The 'Add Note Wrapper' button (located above the content editor) can be clicked to open the shortcode editor modal window.

Choose from the various options to configure the shortcode as desired.

Example 1 of the front end rendering of the shortcode.

Example 1 of the shortcode settings.

Example 2 of the front end rendering of the shortcode.

Example 2 of the shortcode settings.

Example 3 of the front end rendering of the shortcode.

Example 3 of the shortcode settings.

The widget settings in the inactive state.

The widget settings in the active state.

The front end rendering of a widget using the Note Widget Wrapper styling.

PayPal Payments Now Available

By popular demand, the PayPal payment gateway has now been added as a payment option for WP Notes Widget PRO. Stay tuned for more plugin news including Notes Widget Wrapper PRO!

Sticky Footer

If your website contains a very short page (shorter than the height of the browser window) you will probably notice a gap at the bottom.

Gap at bottom of web page

In many cases this gap does not look nice visually. You may want to make some HTML/CSS adjustments to make pages with short content look nicer.

Approach 1: Adjust Body Background

This approach involves setting the body background to same as the footer background. This is a very simply solution and ‘minimally invasive’ to your code. In some cases, the underlying reason a ‘floating footer’ looks bad is because it stands out so much from the body background. Rather than trying to adjust the footer component, adjusting the styling of the body element could be a suitable fix. Here is the same page depicted above, but with adjustments to the body background to make it seamless with the footer component. Naturally this works with dynamic footer heights too.

Approach 2: JavaScript Adjustments on Resize

This approach is good for when you want to apply a sticky footer to an existing codebase that is not using (or can’t use due to browser requirements) CSS flexbox.
This approach should only be used if it would be a considerable amount of work to rework the CSS of an existing website to use flexbox (or grid if you are reading this ~6 months from now :)). If you are starting a new project I would highly recommend the flexbox approach to implementing a ‘sticky footer’. The approach discussed here will get the job done, but is not as elegant or efficient.

Here are the characteristics of this approach:

  • works with dynamic heights
  • has additional benefit of allowing you to choose which element (incliding child elements) should expand to fill the extra space when needed

Take a look at this example on CodePen to see it in action.

Officially A WordPress Core Contributor

I am happy to be part of a worldwide community of WordPress enthusiasts and professionals that made the 4.9 release possible. Thanks to everyone for their hard work and effort!

WP Notes Widget PRO Launched

WP Notes Widget PRO has been launched and is available for purchase and download! WP Notes Widget PRO is the premium version of WP Notes Widget.

Responsive HTML Tables

If you have ever built a webpage that includes a wide HTML table, you have likely ran into the problem of how to make it display in a usable way on various common view port sizes. I have researched ideas to solve this but I haven’t been 100% happy with the solutions I have found. Usually there is some facet of a good webpage that is not being satisfied such as semantics, accessibility, or usability. I also don’t like to install additional JavaScript libraries unless absolutely necessary.

I have come up with my own solution that to the best of my knowledge I haven’t seen elsewhere. The following solution discussed is specific to WordPress but the concept can easily be adapted to other platforms.

Summary/Details of Solution:

  • On the template itself in PHP, it outputs 2 copies of the table. One for large view and another for small. The small view is actually a series of individual tables.
  • The large and small table displays are visible based on the visibility classes of whatever front end framework you happen to be using. In my case I am using Foundation 6, but this can easily be adapted for use with Bootstrap. Custom visibility classes can also be used too.
  • I feel the small view of the table display presents a more semantically correct HTML table structure compared to some of the other solutions I found online
  • If images are being displayed in table cells there is no concern for images being downloaded twice (once for the large table view and again for the small view). Once the browser downloads the image the first time, it will be cached in the browser and won’t be downloaded again (as long as the file paths are the same)
  • No need for additional front end libraries to handle responsive tables
  • This approach does have time complexity (on server side PHP code) of O(2n). On the server side, ‘the loop’ for the table data is being executed twice (once for the large table output and again for the small). It is not exactly double the execution time though. Once the WP_Query object fetches the data results, the data will be cached for the second iteration of the loop.
  • This approach does result in additional HTML being sent to the web browser. This is pure HTML text and will have a negligible effect on page load time in most cases
  • This approach can also be adapted for static tables.

Here is the template code. This shows a simple example and can be adapted for your specific needs:

<h3>Responsive Table</h3>
<div class="show-for-small-only" >
  <!-- 'show-for-small-only' is a utility class for the foundation 6 framework which only displays on small view ports -->

  <?php
    
    $args = array(
      'post_type'      => array('post'),
      'posts_per_page' => -1,
    );                  
    
    $post_query = new WP_Query( $args );

    if ( $post_query->have_posts() ) {
      while ( $post_query->have_posts() ) {
        $post_query->the_post();
        ?>
          <table>
            <caption><?php the_title(); ?></caption>
            <tr>
              <th>Post Date</th>
              <td><?php the_Date(); ?></td>
            </tr>
            <tr>
              <th>Post Status</th>
              <td><?php echo get_post_status(); ?></td>
            </tr> 
            <tr>
              <th>Post Type</th>
              <td>
                <?php echo get_post_type(); ?>
              </td>
            </tr>
            <tr>
              <th>Featured Image</th>
              <td><?php the_post_thumbnail(); ?></td>
            </tr>                           
          </table>
        <?php
      }
    } else {
      ?>
        <p>No posts to display.</p>
      <?php
    }

    $post_query->rewind_posts();

  ?>
</div>
<div class="hide-for-small-only">
  <!-- 'hide-for-small-only' is a utility class for the foundation 6 framework which only displays on view ports larger than small -->
  
  <div class="" style="max-width: 100%;overflow-x: auto;" >
    <!-- The 'large view' table is wrapped in a horizontally scrollable div. This accounts for any edge cases where the table is wider than the container, but the small view port hasn't been triggered yet. -->
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Post Date</th>
          <th>Post Status</th>
          <th>Post Type</th>
          <th>Featured Image</th>
        </tr>
      </thead>
      <tbody>
        <?php
          if ( $post_query->have_posts() ) {
            while ( $post_query->have_posts() ) {
              $post_query->the_post();
              ?>
                <tr>
                  <td>
                    <?php the_title(); ?>
                  </td>
                  <td>
                    <?php the_Date(); ?>
                  </td>
                  <td>
                    <?php echo get_post_status(); ?>
                  </td>
                  <td>
                    <?php echo get_post_type(); ?>
                  </td>
                  <td>
                    <?php the_post_thumbnail(); ?>
                  </td>
                </tr>
              <?php
            }
          } else {
            ?>
              <tr>
                <td colspan="6" >
                  No posts to display.
                </td>
              </tr>
            <?php
          }
        ?>          
      </tbody>
    </table>
  </div>
  <?php
    wp_reset_query();
  ?>
</div>

And here is the output it produces in this table about Web Rockstar posts. Try resizing the window to see the responsiveness in action:

Responsive Table

Notes Widget Wrapper PRO Launched!
Post Date April 23, 2018
Post Status publish
Post Type post
Featured Image
Coming Soon – Notes Widget Wrapper PRO
Post Date February 25, 2018
Post Status publish
Post Type post
Featured Image
PayPal Payments Now Available
Post Date January 19, 2018
Post Status publish
Post Type post
Featured Image
Sticky Footer
Post Date December 15, 2017
Post Status publish
Post Type post
Featured Image
Officially A WordPress Core Contributor
Post Date November 19, 2017
Post Status publish
Post Type post
Featured Image
Title Post Date Post Status Post Type Featured Image
Notes Widget Wrapper PRO Launched! April 23, 2018 publish post
Coming Soon – Notes Widget Wrapper PRO February 25, 2018 publish post
PayPal Payments Now Available January 19, 2018 publish post
Sticky Footer December 15, 2017 publish post
Officially A WordPress Core Contributor November 19, 2017 publish post

Coming Soon – WP Note Widget PRO!

WP Notes Widget PRO will be available in the next few weeks! Take a look at some of the features you can look forward to:

* Note Categories
* Shortcodes
* Insert notes in posts, pages, and other post types (not just widget areas)
* Order notes in ascending or descending order
* Ability to remove all branding and callouts in WordPress admin

Sign up to the mailing list to get notified when WP Notes Widget PRO launches. In the mean time, you can take a look at the following screenshots for a preview. Click on image for larger view. To exit full image view press ESC or the ‘X’ in the top right corner.

Position notes horizontally

Position notes horizontally and embed them in the post/page content area.

Position notes vertically and embed them in the post/page content area.

You can still create notes as sidebar widgets and use them in conjunction with post/page note displays.

The 'display notes' tab in the shortcode editor modal window. You can choose which individual notes to diplay.

The 'display notes' tab in the shortcode editor modal window. You can choose a note category to display all notes from that category.

The 'font style' tab in the shortcode editor.

The 'general settings' tab in the shortcode editor.

The 'shortcode settings' tab in the shortcode editor

The 'visual settings' tab in the shortcode editor

The Notes widget is still present in the PRO version. The ability to select notes from a category has been added.

The listing of all the notes in the admin.

Managing the note categories in the admin.

General default settings.

Editing a note.

An 'Add WP Notes' button is present at the top of all editors. Click to open the shortcode editor.

RegEx for North American Phone Number

A short and sweet post about regular expressions for north american phone numbers. For a recent project, I needed to implement HTML5 pattern validation for a text input. This text input will capture a North American phone number. I found many examples that validated for pattern, validating examples like:

  • (543) 345 2345
  • (143)-643-3456
  • 6434552345
  • (511)3452345
  • 765-345-2345
  • (543) 145 6445
  • …and so on

but none that also validate conceptually. You may not be aware, but north american phone numbers have certain sequences that are restricted:

  • first digit can’t be 1 (this is reserved for optional country code)
  • second and third digit can’t both be 1 (which makes sense, a number can’t start with 911, 411, etc since it will trigger those specialty numbers)
  • fourth digit can’t be 1

all of the example regex’s I found did not account for this conceptual validation. I created my own that accounts for this. You may want to use this and adjust as needed for your specific needs.

<input type="text" id="phone" name="phone" pattern="[\s\(]*((?!1)\d{1})((?!11)\d{2})[-\s\).,]*((?!1)\d{1})\d{2}[-\s.,]*\d{4}[\s]*" />

 

Create a Good Web Presence for Free in Under 2 Hours

You are starting a new organization or business. You are busy and have very limited time and money to spend on your web presence. What can you do to get the most ‘web’ for the least time (both set up and maintenance) and money, while still appearing professional? If you are in a situation like this my recommendation would be to set up a Google “My Business” listing and a Facebook page.

Having a web presence to show up in Google search results, being able to engage with people, and having a medium to display basic information is a critical and important start. Once complete, these two web mediums will give you the following capabilities:

Google “My Business” Listing

  • This will allow you to show up in Google search results.
  • You can display hours of operation, address, phone number, and other basic information.
  • You can capture reviews and rating from customers.
  • Your business/organization can show up in Google Maps.

Facebook Page

  • Display a description of your business/organization.
  • Display photos and photo galleries.
  • Post updates with text, photos and video.
  • Create awareness of your business/organization with ‘Likes’ and other interactions.
  • Display hours of operation, address, phone number, and other basic information.

Furthermore, this approach will put you in a position where:

  • You have no need to worry about website bugs or display issues, or the time/money needed to fix them.
  • You haven’t put yourself on the ‘treadmill’ of other social media properties like Twitter or Instagram which require more frequent updates.

But, keep in mind the title of this post is a ‘Create a Good Web Presence’, not ‘Create a Great Web Presence’. The suggestions made here are a good start, but you will still have a few problems:

  • You will rank lower in Google search results since you don’t have an actual website. You have very limited options for SEO. You should have acceptable results for more specific searches though.
  • You are limited in what you can do visually and functionally compared to a real website.
  • You may be missing out on generating awareness/interest by not having a presence on other social media platforms.

Got a Few More Hours? Can You Spare ~$15/year?

With a bit more time and a few more dollars you can add an enhancement that can simplify your overall marketing efforts: buying your domain name. Almost all domain registrars allow you to forward a domain to an URI. For now, you will forward this domain to your Facebook page. Take a look at jivevine.com (which is a domain I happen to own but am not using it right now). It goes to the WordPress Facebook page. Doing this has the following benefits:

  • You own the domain now. No one else can take it.
  • You are free to use your domain name on business cards and other print material. When it comes time for an actual website you will simply have the domain direct to your website rather than your Facebook page.
  • It appears more professional to have your own domain.

In addition, for an extra ~$5/month most domain registration/hosting companies allow you to forward email addresses associated with your domain (such as steve@jivevine.com in my example). You can forward this to a Gmail or another type of address. You will also be able to respond to emails with your custom email right from Gmail. This again can make you appear more professional.

If you want a slightly more elaborate web presence and are willing to spend a bit more time, you may want to checkout the free website builder in the Google “My Business” tool as well.

Final Thoughts

I hope these ideas help you in successfully starting up your small business, non-profit, technology startup, or whatever endeavour it may be. You should focus on getting your core processes up and running. It will allow you to have an acceptable web presence while you wait for the budget/time for a more full and expansive web presence. There are lots of excellent professionals in Social Media, SEO, Graphic/Web Design, Online Marketing, and Web Development that can help you out when the time comes. Good luck!