Category: Code Bits

A Fix For WordPress Photo Captions On Responsive Themes

Code

My current WordPress Theme is Responsive and most images work correctly with the CSS, but I was having an issue with photos with captions breaking the responsive designs. I tried a few CSS fixes and didn’t see any change in how the images were being handled on my iPhone.

I came across this function code which works for me. It helps to resize the captioned photos in WordPress when using responsive themes.

https://gist.github.com/jentanbernardus/3023022

add_filter( 'img_caption_shortcode', 'dap_responsive_img_caption_filter', 10, 3 );
 
function dap_responsive_img_caption_filter( $val, $attr, $content = null ) {
  extract(shortcode_atts( array(
    'id' => '',
    'align' => '',
    'width' => '',
    'caption' => ''
    ), 
  $attr));
  
  if ( 1 > (int) $width || empty($caption) )
    return $val;
 
  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="max-width: 100% !important; height: auto; width: ' . (10 + (int) $width) . 'px">'
  . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
									

Required+ Foundation Full Search Results

Code

Want Full Search Results in a Required+Foundation child theme? Here is how to do it.

This is for Required+ Foundation version 1.0.10

Find and remove or comment out the lines marked remove below in Content.php:

Original file with comments saying what to remove:

<?php
/**
 * The default template for displaying content single/search/archive
 *
 * @package required+ Foundation
 * @since required+ Foundation 0.3.0
 */
?>
  <!-- START: content.php -->
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
      <?php if ( is_single() ) : ?>
      <h1 class="entry-title"><?php the_title(); ?></h1>
      <?php else : ?>
      <?php the_post_thumbnail(); ?>
      <h1 class="entry-title">
        <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
      </h1>
      <?php endif; // is_single() ?>
    </header><!-- .entry-header -->
    <?php if ( 'post' == get_post_type() ) : ?>
    <div class="entry-meta">
      <?php required_posted_on(); ?>
      <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
      <span class="label radius secondary"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php _ex( 'Featured', 'Post format title', 'requiredfoundation' ); ?></a></span>
      <?php endif; ?>
    </div><!-- .entry-meta -->
    <?php endif; ?>

<!-- Remove From Here -->

    <?php if ( is_search() ) : // Only display Excerpts for Search ?>
    <div class="entry-summary">
      <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
    <?php else : ?>

<!-- To Here -->

    <div class="entry-content">
      <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'requiredfoundation' ) ); ?>
      <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'requiredfoundation' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->

<!-- Remove From Here -->

    <?php endif; ?>

<!-- To Here -->

    <footer class="entry-meta">
      <?php if ( 'post' == get_post_type() ) : ?>
      <?php get_template_part('entry-meta', get_post_format() ); ?>
      <?php endif; ?>
    </footer><!-- #entry-meta -->

  </article><!-- #post-<?php the_ID(); ?> -->
  <!-- END: content.php -->
									

New file with excerpts for search coce removed.

<?php
/**
 * The default template for displaying content single/search/archive
 *
 * @package required+ Foundation
 * @since required+ Foundation 0.3.0
 */
?>
  <!-- START: content.php -->
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
      <?php if ( is_single() ) : ?>
      <h1 class="entry-title"><?php the_title(); ?></h1>
      <?php else : ?>
      <?php the_post_thumbnail(); ?>
      <h1 class="entry-title">
        <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
      </h1>
      <?php endif; // is_single() ?>
    </header><!-- .entry-header -->
    <?php if ( 'post' == get_post_type() ) : ?>
    <div class="entry-meta">
      <?php required_posted_on(); ?>
      <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
      <span class="label radius secondary"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php _ex( 'Featured', 'Post format title', 'requiredfoundation' ); ?></a></span>
      <?php endif; ?>
    </div><!-- .entry-meta -->
    <?php endif; ?>

    <div class="entry-content">
      <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'requiredfoundation' ) ); ?>
      <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'requiredfoundation' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->


    <footer class="entry-meta">
      <?php if ( 'post' == get_post_type() ) : ?>
      <?php get_template_part('entry-meta', get_post_format() ); ?>
      <?php endif; ?>
    </footer><!-- #entry-meta -->

  </article><!-- #post-<?php the_ID(); ?> -->
  <!-- END: content.php -->
									

Using Jetpack Comments with Required+ Foundation

coding

I wanted to use the WordPress Jetpack Comments feature on my site and found that the form wasn’t showing up with the original code for my site which uses the Required + Foundation basic framework so I did a quick search on Google and found a solution was to insert the comment form code into the comments.php instead of using the older comments template.

Here is some code to help add the comment form to the comment.php for the Require+Foundation theme framework. Not sure if this is the best way to do it, but it seems to work for me here on this site.

This is for Required+ Foundation version 1.0.10

Modified code with comments:

<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form. The actual display of comments is
 * handled by a callback to required_comment() which is
 * located in the functions.php file.
 *
 * @package required+ Foundation
 * @since required+ Foundation 0.3.0
 */
?>  <!-- START: comments.php -->

  <div id="comments">


  <?php if ( post_password_required() ) : ?>
    <p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'requiredfoundation' ); ?></p>
  </div><!-- #comments -->
  <?php
      /* Stop the rest of comments.php from being processed,
       * but don't kill the script entirely -- we still have
       * to fully load the template.
       */
      return;
    endif;
  ?>

  <?php // You can start editing here -- including this comment! ?>

  <?php if ( have_comments() ) : ?>
    <h2 id="comments-title">
      <?php
        printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'requiredfoundation' ),
          number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
      ?>
    </h2>

    <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
    <nav id="comment-nav-above">
      <h1 class="assistive-text"><?php _e( 'Comment navigation', 'requiredfoundation' ); ?></h1>
      <div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'requiredfoundation' ) ); ?></div>
      <div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'requiredfoundation' ) ); ?></div>
    </nav>
    <?php endif; // check for comment navigation ?>

    <ol class="commentlist">
      <?php
        /* Loop through and list the comments. Tell wp_list_comments()
         * to use required_comment() to format the comments.
         * If you want to overload this in a child theme then you can
         * define required_comment() and that will be used instead.
         * See required_comment() in required/functions.php for more.
         */
        wp_list_comments( array( 'callback' => 'required_comment' ) );
      ?>
    </ol>

    <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
    <nav id="comment-nav-below">
      <h1 class="assistive-text"><?php _e( 'Comment navigation', 'requiredfoundation' ); ?></h1>
      <div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'requiredfoundation' ) ); ?></div>
      <div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'requiredfoundation' ) ); ?></div>
    </nav>
    <?php endif; // check for comment navigation ?>

  <?php
    /* If there are no comments and comments are closed, let's leave a little note, shall we?
     * But we don't want the note on pages or post types that do not support comments.
     */
    elseif ( ! comments_open() && ! is_page() && post_type_supports( get_post_type(), 'comments' ) ) :
  ?>
    <p class="nocomments"><?php _e( 'Comments are closed.', 'requiredfoundation' ); ?></p>
  <?php endif; ?>

  <?php if ( comments_open() ) : ?>


<section id="respond">

/** Replace Reqired Code With The Comment Form Call */

<?php comment_form(); ?>

</section>

<?php endif; // if you delete this the sky will fall on your head ?>

</div><!-- #comments -->
<!-- END: comments.php -->
									

HTML Twitter & Facebook Links

Let’s say you wanted to make a link somewhere on your site for Facebook and Twitter share buttons, but you wanted to control the url, the title, and the message being shared – Here is some example code on how to do just that:

Share this on Facebook

<a href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=Put Your Title Here&amp;p[summary]=Put Your Message Text Here.&amp;p[url]=http://www.yoururl.com/"><img style="vertical-align: -10px;" src="http://cookefamily.us/wp-content/uploads/2012/03/facebook.png" alt="" /><span style="color: black; font-size: 14px;"> Share this on Facebook</span></a>
									

Share this on Twitter

<a style="text-decoration: none;" href="https://twitter.com/share?text=Put The Text You Want in Your Tweet Here @ReplyName : &amp;url=http://yoururlhere/" target="new"><img style="vertical-align: -10px;" src="http://cookefamily.us/wp-content/uploads/2012/03/twitter.png" alt="" /><span style="color: black; font-size: 14px;"> Share this on Twitter</span></a>
									

I would typically use this code on a landing page or product page with links back to that specific page and a blurb about the person, site, product. Icons and text for the links can be changed as well as the messages you use inside Facebook and Twitter.

Example 1:

Example 2:

Facebook:

Twitter: