DMG Projects is a WordPress widget that will allow you to showcase a page or post on your website. The original idea was for this widget to display a ‘Featured Project’ but because of its flexibility it can be used to showcase nearly anything.

Download


Download DMG Projects v.0.1pr (zip 289.63 kB)

Installation

1. Upload the dmg-projects folder to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Click on ‘Widgets’ under the ‘Appearance’ menu in WordPress and then drag the ‘DMG Projects’ widget to the widget area of your choice

Widget

Once you’ve dragged the widget to the widget area you can select your options.

New Widget

Title – This will appear above the widget on your website.

Page or Post – A select list of all ‘published’ pages and posts.

Post Thumbnail Size –If your theme has post thumbnail support the select list will show all the available sizes to pick from.  If your theme does not support post thumbnails or you select ‘Do not use an image’ the widget will display a text link using the page/post title.

Caption – If a post thumbnail is being used you can check this box to display the page/post title as a caption for the image.

Once you’ve saved the widget you will be given information on the unique ID attributes used in the HTML tags during output.  These will not be displayed until after you’ve clicked the ‘Save’ button. This allows you to use CSS to style multiple instances of this widget differently.

Widget After Saving

Styling Widget Output

To style the widget you can use the ID or CLASS attributes in the HTML code.

IDs

The IDs are displayed in the widget box for easy access. You should add these to your theme’s style.css file. Please note that each instance of your widget will generate a different ID! If you wish to style all instances of your widget the same please style using the CLASS.

Classes

If you wish to style every instance of this plugin the same you should style the CLASSes:

.dmg-cur-pro{ /* Your code here */ }
.dmg-image-and-caption{ /* Your code here */ }

Sample Output

Images with Captions:

<h1>TITLE</h1>
<div class="dmg-cur-pro" id="dmgcp-5">
 <div class="dmg-image-and-caption" id="dmgiac-5">
  <a href="LINK TO PAGE/POST" title="PAGE/POST TITLE">
   <img src="img.jpg" alt="Image Alt" />
  </a>
  <p>PAGE/POST TITLE</p>
 </div>
</div>

Images without Captions:

<h1>TITLE</h1>
<div class="dmg-cur-pro" id="dmgcp-5">
 <div class="dmg-image-and-caption" id="dmgiac-5">
  <a href="LINK TO PAGE/POST" title="PAGE/POST TITLE">
   <img src="img.jpg" alt="Image Alt" />
  </a>
 </div>
</div>

No Image:

<h1>TITLE</h1>
<div class="dmg-cur-pro" id="dmgcp-5">
 <p>
  <a href="LINK TO PAGE/POST" title="PAGE/POST TITLE">
   PAGE/POST TITLE
  </a>
 </p>
</div>

Note about code: The HTML tags used before and after the widget title will depend on your theme’s settings.

Style Samples

Widget In Use - Footer

Widget In Use - Sidebar

Both images are portions of a screen shot from the same website. The image on the left is being displayed in the footer and the image on the right is in the sidebar. Both needed to be styled very differently and used different image sizes.

Other Images

Page/Post List

Image Size List