Before we start, it is important that you understand how the template hierarchy works for attachments. You can either specify it like mime_type.php. Mime type examples (image.php, video.php, application.php etc). For specifying it just for a certain image type, you can say image_gif.php. If the mime_type.php is not found, then it looks for attachment.php, then single-attachment.php, then single.php, then index.php.

It depends on how custom of a project you are working for, you may not need to create image_gif.php. You can simply suffice for image.php or even attachment.php.

All you have to do is open a blank file and copy all of your single.php content in there. You can save it as single-attachment.php or any other mime_type that you want. Then replace the loop code with something like this:

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
$photographer = get_post_meta($post->ID, 'be_photographer_name', true);
$photographerurl = get_post_meta($post->ID, 'be_photographer_url', true);
?>

<h1><?php the_title(); ?></h1>

<div class="photometa"><span class="photographername"><?php echo $photographer; ?></span> // <a href="<?php echo $photographerurl ?>" target="_blank" class="photographerurl"><?php echo $photographerurl ?></a></div>

                        <div class="entry-attachment">
<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "full"); ?>
                        <p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>"  class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a>
                        </p>
<?php else : ?>
                        <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>
<?php endif; ?>
                        </div>

<?php endwhile; ?>

<?php endif; ?>

The code above simply displays the Image Title. Below it, it will display Author’s name and URL which we added as additional fields in our previous article. Then it looks for the image and displays the full size. You can customize it to show any other size if you have additional image sizes.

Final Outcome:

Now that we have covered all three main aspects of this gallery that we were going to create, in the next article, we will show you how it looks when all things are pieced together. This way, you can use WordPress’s built-in mechanism to create a full-featured gallery with albums. No extra plugins required.

Resource:
Template Hierarchy Codex

How to Create a Custom Single Attachments Template in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

We will be using the following filters to make the change: attachment_fields_to_edit and attachment_fields_to_save

For a project like this, we highly recommend that you create a site-specific plugin and add the following code. However, you can still add the codes in your theme’s functions.php file to make it work.

/**
 * Add Photographer Name and URL fields to media uploader
 *
 * @param $form_fields array, fields to include in attachment form
 * @param $post object, attachment record in database
 * @return $form_fields, modified form fields
 */

function be_attachment_field_credit( $form_fields, $post ) {
	$form_fields['be-photographer-name'] = array(
		'label' => 'Photographer Name',
		'input' => 'text',
		'value' => get_post_meta( $post->ID, 'be_photographer_name', true ),
		'helps' => 'If provided, photo credit will be displayed',
	);

	$form_fields['be-photographer-url'] = array(
		'label' => 'Photographer URL',
		'input' => 'text',
		'value' => get_post_meta( $post->ID, 'be_photographer_url', true ),
		'helps' => 'Add Photographer URL',
	);

	return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );

/**
 * Save values of Photographer Name and URL in media uploader
 *
 * @param $post array, the post data for database
 * @param $attachment array, attachment fields from $_POST form
 * @return $post array, modified post data
 */

function be_attachment_field_credit_save( $post, $attachment ) {
	if( isset( $attachment['be-photographer-name'] ) )
		update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );

	if( isset( $attachment['be-photographer-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );

	return $post;
}

add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
?>

The code above will add two text fields to the Media Uploader called Photographer Name and Photographer URL. You can see that in the screenshot below:

Explanation of the code: In the first function, we are simply using an array to specify the field’s label, input type, value, and help text. The second function is checking to see if a value has been set for those fields. IF the value is set, then the post metadata is updated.

If you want to display the fields in your attachments template, then simply paste the following codes inside the loop:

echo get_post_meta($post->ID, 'be_photographer_url', true);

If you want to display the fields for your featured image in your archive template or any other template, then simply use:

echo get_post_meta(get_post_thumbnail_id(), 'be_photographer_url', true);

We hope that you enjoyed this article. For those who don’t know how to create an attachment’s template, don’t worry. In the next article, we will cover how to create an attachment’s template in WordPress.

Hat Tip to Bill Erickson for showing us how to do this.

How to Add Additional Fields to the WordPress Media Uploader is a post from: WPBeginner which is not allowed to be copied on other sites.

All you have to do is paste the following code inside a loop.

<?php if ( $post->post_type == 'data-design' && $post->post_status == 'publish' ) {
		$attachments = get_posts( array(
			'post_type' => 'attachment',
			'posts_per_page' => -1,
			'post_parent' => $post->ID,
			'exclude'     => get_post_thumbnail_id()
		) );

		if ( $attachments ) {
			foreach ( $attachments as $attachment ) {
				$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
				$thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
				echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
			}

		}
	}
?>

The code above first checks if the post type is data-design and the post status is published. You may not need the first conditional depending on what you are trying to do. Then we simply run the get_posts query. Everything is pretty self explanatory there. The key that we must highlight is the exclude feature. That line is making sure that featured image does not show up. If you take that line away, then the featured image will show up. After specifying all the parameters, we simply specify what to do when each attachment is pulled. We are pulling attachment type for the class variable. Then the $thumbimg variable is simply using wp_get_attachment_link to pull the image at a specific thumbnail size, and it also hyperlinks the image to the single attachment pages. In the final step, we simply echo it.

We ran this code inside a loop with a separate call for featured image which links to the individual post. Final outcome looked something like this:

Each featured image served as an album identifying image which you can see. The grey spots were filled with the attachments for the post. We hope that this would help those who are looking to push WordPress beyond a blogging platform.

How to Get All Post Attachments in WordPress Except for Featured Image is a post from: WPBeginner which is not allowed to be copied on other sites.

Open your theme’s functions.php file or a site plugin and simply paste this code:

// Add Slideshare oEmbed
function add_oembed_slideshare(){
wp_oembed_add_provider( 'http://www.slideshare.net/*', 'http://api.embed.ly/v1/api/oembed');
}
add_action('init','add_oembed_slideshare');

Thanks to @tammyhart for sharing the snippet with us.

P.S. want to check out all the presentations that we have given? Then visit WPBeginner’s Slideshare

How to Add SlideShare to WordPress oEmbed without a Plugin is a post from: WPBeginner which is not allowed to be copied on other sites.

Example:

All you have to do is open your theme’s functions.php file or better yet your site’s plugin file and paste the following code:

function add_video_wmode_transparent($html, $url, $attr) {

if ( strpos( $html, "<embed src=" ) !== false )
   { return str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); }
elseif ( strpos ( $html, 'feature=oembed' ) !== false )
   { return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html ); }
else
   { return $html; }
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

Source

How to Prevent Youtube oEmbed from Overriding your WordPress Content is a post from: WPBeginner which is not allowed to be copied on other sites.

Preview of how a Google+ Badge looks like:

Before we begin, you should note that this is only for Google+ Pages not profiles. Example of Google+ Page. Example of Google+ Profile.

First thing you need to do is put the following code in your <head> section of your site which you can modify by editing the header.php file of your theme.

<link href="https://plus.google.com/{plusPageID}" rel="publisher" /><script type="text/javascript">
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>

Don’t forget to replace the {plusPageID} with your Google+ Page ID. Your Page ID is a 21-digit string at the end of the URL. For example if your page URL is: https://plus.google.com/101634180904808003404/ then the numbers in bold is your Page ID.

Once you have added the header code, then all you have to do is place the following code wherever you want the Google+ Add to Circles widget to show. Most users like to display this in their sidebar, so you can either modify your sidebar.php file, or simply add it in a text widget area.

<g:plus href="https://plus.google.com/{plusPageID}" size="badge"></g:plus>

For the Small badge, simply use this code:

<g:plus href="https://plus.google.com/101634180904808003404" size="smallbadge"></g:plus>

We hope that this article has helped you. If it did, then please consider adding WPBeginner in your Circle.

How to Add Google+ “Add to Circles” Badge in your WordPress Site is a post from: WPBeginner which is not allowed to be copied on other sites.

First thing you need to do is install and activate the Pinterest RSS Widget plugin. After installation, simply go to Appearance » Widgets. There will be a widget called Pinterest RSS Widget. Drag it in the appropriate widget area, and configure the settings.

You can customize the size of your thumbnails. You can also choose to display the titles below the images or not.

If you want to show the Pinterest Pins on a post or a page, then you can do that using the following shortcode:

[prw username="syedbalkhi" maxfeeds="10" divname="myList" printtext="0" target="newwindow" useenclosures="yes" thumbwidth="100" thumbheight="100" showfollow="medium"]

If you want to show the Pinterest Pins in your theme by hard coding it, you can also do that using this plugin. Simply add the following codes wherever you want to display the latest pins:

<?php get_pins_feed_list($username, $maxfeeds, $divname, $printtext, $target, $useenclosures, $thumbwidth, $thumbheight, $showfollow); ?>

The parameters are:

• username is the Pinterest username you wish to display Pins from (mandatory)
• maxfeeds is the maximum number of Pins to display (optional, default = 25)
• divname is a name suffix for the list class. “myList” will become “pins-feed-myList” (optional)
• printtext must be 1 if you want the first few words of the Pin description to be printed below the thumbnail (optional)
• target is “samewindow” or “newwindow”, depending on where you want links to open (optional, default = samewindow)
• useenclosures is “yes” or “no” (optional, default = yes). Use this if you don’t want to use the tag in the feed and force the script to find an image
• link in the feed item description.
• thumbwidth is a number that will set the width in pixels of the Pin’s thumbnail (optional, default = 150)
• thumbheight is a number that will set the height in pixels of the Pin’s thumbnail (optional, default = 150)
• showfollow is “large”, “medium”, “small”, “tiny” or “none” (optional, default = none). Use this if you want to show the “Follow Me On Pinterest” button below the thumbnails. Select the size that best fits the space allowed (“large” is 156×26, “medium” is 78×26, “small” is the square 61×61 logo, and “tiny” is the 16×16 logo.)

When installing this plugin, we ran into the issue of images not showing up. Thankfully, it is a known issue and the author has already covered it into the FAQ’s section of the plugin. If your images are not showing up, then below are the possible solutions:

• TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed. Make sure your host has this installed (most do).
• Once installed and in-use, TimThumb will automatically create a /prw_tmp/ subfolder in your/ wp-content/uploads/ directory with proper write-permissions. If your host server doesn’t allow this by default, be sure to manually create the /prw_tmp/ subfolder in your/ wp-content/uploads/ directory and set the /prw_tmp/ folder permissions to 755. If this still doesn’t work, try setting the /cache/ folder permissions to 777.
• Known issue with timthumb.php on Hostgator: If your website is hosted on Hostgator, you may need to contact HostGator to request “mod_security whitelisting”. More info here: http://support.hostgator.com/articles/specialized-help/technical/timthumb-basics

Download Pinterest RSS Widget plugin

P.S. Don’t forget to follow Syed on Pinterest

How to Show Your Latest Pinterest Pins in WordPress Sidebar Widgets is a post from: WPBeginner which is not allowed to be copied on other sites.

WP Google Weather

The reason why we picked this plugin was its ease of installation. Unlike many other plugins, this plugin does not require you to signup with a third-party service to get an API. Also, this plugin does not require any link backs on the front end.

All you have to do is install and activate WP Google Weather. Then go to Appearance » Widgets. Then simply drag the WP Google Weather widget into the Sidebar. Enter the title of the widget, location, which language the display should be in, which unit the display should be in, and whether you want to show just today’s weather or the 3 day forecast.

Here is how the settings and the front-end display looks:

The front-end display is not the best however it can be customized to your liking. All you have to do is edit your stylesheet.

Weather and Weather Forecast Widget

This plugin comes with a lot of options. It allows you to use the services like Wunderground and World Weather Online API to get your data. This plugin also has the auto-detect option for location, but you need to signup for another API service for that. The biggest downside in our eyes is that it is mandatory for you to display the link to the provider otherwise your API can be terminated. All those companies do have monthly paid API options where you can remove their link back.

First thing you need to do is install and activate Weather and Weather Forecast Widget. Then go to Appearance » Widgets. Drag the GoGadget Weather Widget. Fill out all the settings. There are tons of options.

Here is how the preview looks:

Although the preview looks a lot nicer, the data powered by link is a really big turn down for us.

We hope that you like these plugins. If you know of a better plugin, then feel free to suggest it in the comments.

How to Show Weather Forecast in Your WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

First thing you need to do is paste the following script in your footer.php file right before the body close tag.

<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

Once you have done that, you can add the following code in your single.php file at a location of your choice:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

The code above is basically pulling your Featured Image, the title of your post as description, and the URL of the post. It is designed for the vertical share button. If you want to put the horizontal share button, simply change count-layout parameter to horizontal.

We hope that this will help. P.S. if you are on Pinterest then please follow Syed Balkhi

Pinterest Shortcode

Update: one of our user wanted to create a shortcode for the Pinterest “Pin It” button. You can easily do so by pasting the following code either in your theme’s functions.php file or your site plugin’s file:

<?php
function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }

add_shortcode('pin', 'get_pin');
?>

How to Add Pinterest “Pin It” button in your WordPress Blog is a post from: WPBeginner which is not allowed to be copied on other sites.

Community Management is something that you will have to do as a blogger. Just like most other things communities do not start out big, but it will only grow big if you are a good community manager. Deb. shares all different type of aspects to community management. For someone who is relatively new, it could be a lot to handle. I know that from personal experience. This book outlines not only all the hats that you have to wear as a community manager, but it shows you how to do it well.

The book covers topics like Basic outline of community management, establishing community policies and guidelines, building a productive online community where you listen and communicate with your members, growing your community by encouraging interaction and involvement as well as attracting more people through other measures. Most importantly, Deb shares her expertise on how to assess your growth, evaluate the results, and make decisions on what you find.

One of the aspects I love about Deb is that she takes her online connections offline. I talked to her over the web for the first time, but now I have met her at numerous events. She is exactly the same person as she is online who is welcoming and friendly. I find it a rare characteristic to have. A lot of people I meet online are totally different in real life. Deb shares her expertise of taking your online community offline by hosting meetups, tweetups or other events. The book ends with ten essential tasks for community managers, ten must have skills, and ten best practices.

I think the book was a breeze to read. I cruised through the information really fast. I wished that it talked a little bit more about the monetization aspects, but I realize the book already covers too much and it is hard to cover everything.

If you are a blogger or an online community manager, this is a must read book. Most of the time, I don’t like Dummies books, but this one was well-worth the read.

Order your copy of Online Community Management for Dummies

P.S. Thanks Deb for signing my copy. I love collecting the books with author signature

Online Community Management for Dummies (Book Review) is a post from: WPBeginner which is not allowed to be copied on other sites.