IT Nota

How to Add Footer to a Custom Post Type in Genesis 2.0

When you create a single or an archive page for a custom post type in Genesis 2.0 (HTML5), the formatting is not consistent with typical post. What’s apparent is the absence of <footer class="entry-footer"> tag in the custom post type page.

The difference between the two are highlighted on the codes below:
Custom Post Type

<p class="entry-meta">
  <span class="entry-categories">
    Filed Under:
    <a rel="category tag" title="View all posts in Uncategorized" href="https://www.itnota.com/category/uncategorized">Uncategorized</a>
  </span>
  <span class="entry-tags">
    Tagged With:
    <a rel="tag" href="https://www.itnota.com/tag/genesis-framework/">Genesis Framework</a>, 
    <a rel="tag" href="https://www.itnota.com/tag/html5/">HTML5</a>
  </span>
</p>

Typical Post

<footer class="entry-footer">
  <p class="entry-meta">
    <span class="entry-categories">
      Filed Under:
      <a rel="category tag" title="View all posts in Uncategorized" href="https://www.itnota.com/category/uncategorized">Uncategorized</a>
    </span>
    <span class="entry-tags">
      Tagged With:
      <a rel="tag" href="https://www.itnota.com/tag/genesis-framework/">Genesis Framework</a>, 
      <a rel="tag" href="https://www.itnota.com/tag/html5/">HTML5</a>
    </span>
  </p>
</footer>

The easiest way to do this is by utilizing using Genesis Shortcodes and replace the genesis_entry_footer with our own footer markup.

remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
add_action( 'genesis_entry_footer', 'my_entry_footer_markup_open', 5);
function my_entry_footer_markup_open() {
  echo '<footer class="entry-footer">';
}

add_filter( 'genesis_post_meta', 'my_post_meta' );
function my_post_meta( $post_meta ) {

  $post_meta = '[[post_categories]][[post_tags]]';

  return $post_meta;

}

remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
add_action('genesis_entry_footer', 'my_entry_footer_markup_close', 15);
function my_entry_footer_markup_close() {
  echo '</footer>';
}

Further Reading

Genesis Framework Shortcode Reference
Function Reference/wp get post tags
Function Reference/wp get post categories

How to Setup WordPress on iPad

Similar to the previous post on How to Setup WordPress on iPhone, here are the steps to setup WordPress client on an iPad:

  1. Go to App Store and search for WordPress by Automattic. Once you find it, just tap on the INSTALL button.

  2. Once installed, open the app and make the selection that’s applicable to you. The options are pretty straight forward. If you have a blog either self-hosted or with WordPress.com, you just need to tap on the corresponding Blog option. Or if you don’t have one, you can open a new account with WordPress.com. As an example for this site, it is a self-hosted blog, so the first option, + Add Self-Hosted Blog should be selected.

    WordPress iPad App Options

  3. Enter your blog URL, username and password on the Add Blog screen. Turn on Geotagging as necessary.

    WordPress iPad App Setup

  4. Tap Save button on the upper right-hand corner and all your postings will be listed on the next screen.

    WordPress iPad App Posts List

In the same way to the setup on iPhone, if you have multiple blogs, you can add more blogs by going to Settings, tap on Add a Blog, and repeat the whole process above.

How to Setup WordPress on iPhone

If you use WordPress and have an iPhone or iPad, you can use either device to update your blog. Automattic, the maker of WordPress, created a FREE iOS app that can be handy when you need to update your blog on the go.

Here are the steps you need to do in order to enable your iPhone as your blog writing tool:

  1. Go to App Store and search for WordPress by Automattic. Once you find it, just tap on the INSTALL button.

    WordPress iPhone App

  2. Once installed, open the app and you can begin your setup. The options are pretty straight forward. If you have a blog either self-hosted or with WordPress.com, you just need to tap on the corresponding Blog option. Or if you don’t have one, you can open a new account with WordPress.com. As an example in this case, I pick the + Add Self-Hosted Blog.

    WordPress iPhone App Options

  3. Fill out your blog info, URL and your username and password on the Add Blog screen. Turn on Geotagging as necessary.

    WordPress iPhone App Setup

  4. Tap Save button on the upper right-hand corner and you should see your existing postings.

    WordPress iPhone App Posts List

If you have multiple blogs, you can add your other blogs by going to Settings, tap on Add a Blog, and repeat the whole process as shown above.

WordPress iPhone App Settings

WordPress iPhone Settings: Add a Blog

Happy iBlogging! 🙂

How to Use a CDN jQuery in Genesis Framework

As a follow up to my previous post on using a CDN jQuery in your website.

If you use WordPress (with Genesis Framework) and want to take advantage of a CDN (Content Delivery Network) hosted jQuery library to your theme, edit your functions.php file to include these codes:

if ( !is_admin() ) {
  wp_deregister_script('jquery');
  wp_register_script('jquery', 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js', false, '1.11.1');
  wp_enqueue_script('jquery');
}

The codes above will include jQuery CDN on your site, but not the fallback method mentioned in this post. To implement a similar fallback solution in WordPress/Genesis, just add these lines into your functions.php in your child theme directory:

// De-register default jQuery from WordPress
if (!is_admin()) {  
  wp_deregister_script('jquery');  
}

// Replace DOCTYPE to HTML5 and include CDN-hosted jQuery and fallback method
remove_action('genesis_doctype', 'genesis_do_doctype');
add_action('genesis_doctype', 'child_do_doctype');
function child_do_doctype() { ?>
  <!DOCTYPE html>
  <html <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta charset="<?php bloginfo('charset'); ?>" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script>!window.jQuery && document.write('<script src="/js/jquery-1.11.1.min.js"></script>')</script>
<?php
} 
...

This will not only add the jQuery CDN and a fallback method, but also replaces the DOCTYPE heading to HTML5 in your Genesis Theme.

One caution before you do this. Make sure all plugins, especially the old ones, are tested for compatibility with the jQuery version you want to use.

All the above examples use jQuery library hosted on Microsoft CDN. If you want to use other CDN hosts, just change the URL address in the src tag. For example, to use jQuery from Google CDN, you have to use this address instead (everything else should be the same):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Update

With the newer version of WordPress and Genesis, the better and easier way to do this is just to de-register the default jQuery in function.php using the following codes:

// De-register default jQuery from WordPress
if ( !is_admin() ) {  
  add_action( 'wp_print_scripts', 'de_script', 100 );

  function de_script() {
    wp_dequeue_script( 'jquery' );
    wp_deregister_script( 'jquery' );

    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, 1.11.1, true);
    wp_enqueue_script('jquery');
  }
}

The last parameter true will add the jquery in the footer instead of header, which is a better way for performance sake.

Genesis Framework Theme Settings wp_footer() CDN jQuery

Further Reading

Function Reference/wp register script
Function Reference / wp dequeue script

How to Move Post Date to the Bottom of an Article in Genesis

Here are a few simple steps to move article post date from the top of the posting to the bottom in Genesis Framework. The first thing you want to do is to alter the default post info on the top by adding the following filter to your child’s theme functions.php

add_filter( 'genesis_post_info', 'post_info_filter' );
function post_info_filter($post_info) {
if (!is_page()) {
    $post_info = '[[post_comments]] [[post_edit]]';
    return $post_info;
    }
}

The next step is to add a second filter with the [post_date] in the genesis_post_meta.

add_filter( 'genesis_post_meta', 'custom_post_info_filter' );
function custom_post_info_filter($custom_after_post_info) {
  $custom_after_post_info = '[[post_date]] [[post_categories]] [[post_tags]]';
  return $custom_after_post_info;
}

The changes will change the output from the default:

JANUARY 10, 2012 · LEAVE A COMMENT

[Article content]

FILED UNDER: WORDPRESS

To:

LEAVE A COMMENT

[Article content]

JANUARY 10, 2012 ? FILED UNDER: WORDPRESS

Recent Posts

Tags

.NET .NET Core AdSense ASP.NET Cdonts Dll Classic ASP Code Editor ETL FSharp Genesis Framework Git Google HP Asset Manager HTML5 Hugo IIS Information Security Internet Internet Information Services iOS JAMStack Linux macOS Microsoft Microsoft SQL Server MVC PHP PowerShell Python Simple Mail Transfer Protocol Smtp Server SQL SQL Server SSIS SSMS SSRS Sublime Text Visual Studio Visual Studio Code VPN Windows Windows 8 Windows 10 Windows 2012 Windows Server