Month: October 2013

Understanding The Loop in WordPress and Customizing it

Overview :

  • Understanding the flow of the Loop and where it can be used
  • Display content using loop
  • Customizing it to our needs
  • Using template tags
  • Out of the box — Loop

It refers to how WordPress determines what content (posts, pages, or custom content) to display on a page you are visiting. The Loop can display a single piece of content or a group of posts and pages that are selected and then displayed by looping through the content.

Continue reading Understanding The Loop in WordPress and Customizing it

How to add custom fields to Attachments – 3

The Hooks

As mentioned in the first post, we’ll deal with two hooks.
We bind our two functions to those hooks in the constructor method.

<p>function __construct( $fields ) {</p>
<p>$this->media_fields = $fields;</p>
<p>add_filter( 'attachment_fields_to_edit', array( $this, 'applyFilter' ), 11, 2 );</p>
<p>add_filter( 'attachment_fields_to_save', array( $this, 'saveFields' ), 11, 2 );</p>
<p>}</p>
 Continue reading How to add custom fields to Attachments – 3

How to add custom fields to Attachments – 2

In the other post we set a basic options file, now let’s add some options to enhance the attachment edit form. We’ll consider, for this tutorial, options to improve images. For instance, we’ll add copyright, author description, watermark, rating, and image disposition fields.

$themename = "twentythirteen";
 Continue reading How to add custom fields to Attachments - 2

How to add custom fields to Attachments – 1

First of all, we are going to create a plugin to handle the attachments custom fields. It will get a set of options, bake them so they become part of the form when we edit an attachment, and save them into the database.

For this, we will use two WordPress hooks:

How to Get the Post Thumbnail URL in WordPress

Some people recently asked us how to get the post thumbnail URL in WordPress. The goal here is to just get the post thumbnail URL and then use it with their own markup. In this article, we will show you how to get the post thumbnail URL in WordPress.

Simply paste this code inside the loop code that you are writing.

<?php

$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
echo $thumb_url[0];
?>
 Continue reading How to Get the Post Thumbnail URL in WordPress

Removing Default Image links to Attachment Page

It is very simple to disable the default image linking behavior in WordPress. All you have to do is add this code snippet in your theme’s functions.php file or in a site-specific plugin.

[php]function wpb_imagelink_setup() {
$image_set = get_option( ‘image_default_link_type’ );
if ($image_set !== ‘none’){
update_option(‘image_default_link_type’, ‘none’);
} }
add_action(‘admin_init’, ‘wpb_imagelink_setup’, 10);[/php]

Another way to do this is by installing and activating No Image Link plugin. It works out of the box and there are no options to configure. However, the plugin runs the option on every page, so it is better to simply add the code on your own.

Hopefully this will make adding images in WordPress a little less annoying specially if you never link to images.

WordPress Plugins for Inserting Creative Commons Images

 

Flickr – Pick a Picture

With this plugin you can search for Creative Commons images from Flickr from the insert media window. Just click on the icon next to Upload/Insert (media) or choose “Flickr – Pick a Pic” tab from the upload window.

When you choose an image, the plugin will automatically insert the image credits into the caption. So not only do you get legal images, but you get to maintain the credits and keep the Flickr owner happy.

PhotoDropper

This plugin gives you access to over 200 million Creative Commons images and lets you add them to your blog in just a few clicks. Like Flickr – Pick a Picture it also handles the image attributions for you, but it lets you choose where you’d like to place the attribution (such as at the end of your content).

Compfight

This plugin is my personal favorite because it gives you three image size options (S, M, L), plus it supports featured image insertion. You’re probably already familiar with Compfight, an image search engine for finding both commercial and Creative Commons images.

With this plugin, you can skip the the Compfight website and search from within your blog editor, much like Flickr – Pick a Picture and PhotoDropper. Again the attribution is included, but you can’t choose where to place it like PhotoDropper.

Royalty Free Images For Your Blog

A picture is worth a thousand words. This is why all top bloggers utilize images to grab attention and effectively convey their message. We often get asked the question, how to find good royalty free images? What are some of the best places to find royalty free images for your WordPress site? In this article, we will share some of our top sources to find royalty free images for your WordPress blog posts, so you can make your content stand out.

Update:

Here are the some of the websites that offer high resolution free images

Pixabay

Unsplash

Morgue

Free for Commercial use

 Stock.xchng

We like stock.xchng because of its large collection of photographs which are neatly categorized and tagged. Finding a photo on stock.xchng is easy. You can either browse image by categories or use the search feature. Most images here are fairly high quality, so you can use it in your website as well as your presentations. Depending on what you are looking for, you might come across images that are widely used and easily recognizable. Like for example if you search for business, lots of images would show up that you have seen on other websites. But if you search for a niche-specific search term, you would find images that are not overly used.

Creative Commons Search

Creative Commons search provides an easy way to search across multiple websites for images that you can use on your WordPress website. However, it is important that you understand Creative Commons licenses. In most cases, attribution is required in the manner specified by the copyright owner. A link back to the source material usually fulfills the attribution requirement. At the cost of attribution you get access to many more sources, and you can use images that are unique and would look great with your content.
Photo Pin

Photo Pin helps bloggers find photographs to use in their posts and articles. It uses Flickr API to search for creative commons licensed photographs. Just like the Creative Commons Search, most photographs you find here require that you give attribution. Photo Pin’s search is visually appealing and easier to use than Creative Commons Search. For each search result, it will show you sponsored photographs at first, so you would have to scroll down to see the actual results. Clicking on sponsored results will take you to third party stock photography websites where you will have to purchase the license to use an image. Clicking on actual results will show a larger view of image in a lightbox with links to download image in different sizes. It will also show you a link that you can insert in your post to attribute the image.

WikiMedia Commons

A project of Wikimedia Foundation, WikiMedia Commons is a large library of images, audio, and video files that can be freely used. Library can be browsed by media type such as images, photographs, drawings, illustrations or by file type like audio, video, image, etc. Images can also be browsed based on license. A large number of images on Wikimedia Commons are in public domain which means you are free to use them without any attribution. Some images may have a creative commons license requiring attribution. Make sure you check the license information below each image.

 StockPhotosforFree.com

StockPhotosforFree is another free stock photo website. They have a very nice interface and a neatly organized library with a good collection of still images. Most of these images are still shots taken from HD quality videos. They require everyone to register before downloading any images.

OpenClipArt Library

If you are looking for a vector image, an icon, or clip art to use on your WordPress site, then Open Clip Art library is the best place to look for free clipart. All the clip art available in the library is in public domain, so you are free to use, modify, and build upon those images. A lot of them are available in SVG vector graphic format as well as PNG. Clip art is organized in tags, categories and collections so it is easy to browse.
Once you have found the image that you are looking for, you can crop and edit those images using your favorite image editing program. You can also add additional image sizes in WordPress to automatically generate the right size when you upload the image. If you want to organize your media library efficiently, then you can tag images in WordPress.

Control Absolute Positioned Elements With Relative Ones

The position value in CSS deals with layout and manipulating elements to be in your desired visual place. There are only the five values shown above, and really only three since static and inherit are fairly rarely needed for this property.

Static

Every element is static positioned by default. The element resides in the normal page flow. left/right/top/bottom/z-index have no effect on a static positioned element. There is rarely a need to set this value unless the element has been set with another matching selector to a different value and you need to set it back.

Relative

Element’s original position (as if it were static) remains in the flow of the document. But now left/right/top/bottom/z-index do work. The positional properties “nudge” the element from the original position in that direction.

Absolute

Element is removed from the flow of the document (other elements will behave as if it’s not even there). All the other positional properties work on it. Essentially you are able to declare the exact position you want the element to appear.

Fixed

Element is removed from the flow of the document like absolute positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling. It’s usually used to provide a persistant visual element, like navigation bar that is always visible.