Widget Logic in Your Sidebar

Widget Logic is a great plugin that uses the  WordPress conditional code to insert widgets on selected pages in your site. If you are adding contact information for a business or school and only want to have the information appear on selected pages, this is the answer.

You can hard code the information in your templates but this is sooo much easier.

Upload Widget Logic to your plugin folder and activate.

You need to have the page number of the page you want this widget to appear.

Finding the page number:

Click the “Pages” link in your menu.

The pages in your site appear in the dashboard window.

Scroll over the page name with your mouse and look at the bottom of your computer screen. The page number appears in the text at the bottom of the screen. It looks like this: http://www.mcqwebsolutions.com/wp-admin/page.php?action=edit&post=11  Page number is 11.

Click on widgets under the Appearance tab in your menu.

Select the widget you want to add to your sidebar.  Select a text widget if you want to add contact information and add it to the selected sidebar.  Click “edit” to open the text widget and add your information.

At the bottom of the text widget, you will see the area to add the widget logic code.  This is where you will add the page number where you want the widget to appear. If you didn’t find the page number, follow the instructions above.

Enter the code in the box. For one page it looks like this:

Is_page(x) where x is the page the widget appears. If you want the widget to appear on mulitiple pages, use pipes between the page numbers.

it looks like this:

is_page(22||23)

Save your changes and your work is finished!

Adding Information in your Sidebar

The sidebar appears on every page of your WordPress site. Usually the themes have default widgets that appear in the sidebar. Once you add a new widget, t he default configuration changes. For example, if you drag a text widget into your sidebar, that is the only widget that will appear – the original default widgets that came with your theme are gone.

The text widgets are great for adding contact information, graphics and ads to your sidebars. You have to add the html code for links but I will show you how.

Open the widgets under the Appearance tab in the menu. Drag a text widget into your sidebar.  Click the edit button to open the text box. Add a title to your text widget if you want – this is what will appear as a header or title in your sidebar.

Add your contact information. Use html to add links and images. Here is an example of code used to add a link to the sidebar. Copy it and add your own information. Note – if you are unable to copy and paste items in the text widget using Internet Explorer – use Firefox. Firefox makes it a lot easier to copy and paste in widgets.

The code looks like this:

For More Information on Creating a WordPress Site, <a href=”mailto:info@mcqwebsolutions.com”>Contact Us</a> at <a href=”http://www.mcqwebsolutions.com”>
McQWebsolutions.com</a>

 

Once you have your content entered, scroll to the bottom of the screen and select the sidebar position where you want the content to appear and select the option to automatically add paragraphs.

Note: You can control the spacing of your content in the sidebar by using the <br /> tag.  Use the break tag to push content to a new line without adding a large space between the lines like a paragraph tag might add.

This text widget will appear on ALL the pages in your site unless you use a “conditional” statement to tell WordPress where you want it to appear. An easier way is to use the Widget Logic plugin. This is a plugin that makes it easy to use WordPress as a content management system – I listed it as one of the best plugins in an earlier post. I will talk about Widget Logic next, so stay tuned.

Next Gen Gallery and PayPal Add to Cart Button

My last post discussed adding a slide show to the front page of your site using Next Gen Gallery.  You can also add a shopping cart to your site and Pay pal buttons to the pictures in your gallery, essentially creating an online store.  Take a look at Maestroartservicesintl.com where Pay pal buttons were added to the artists’ paintings.

There is a great tutorial on adding the Paypal shopping cart at: http://www.tipsandtricks-hq.com/wordpress-simple-paypal-shopping-cart-plugin-768 and a tutorial on adding the “Add to Cart” buttons at: http://www.wordpress-ecommerce.com/wordpress-shop-using-nextgen-gallery-and-wp-shopping-cart-7

Download the plugins for WordPress Simple Paypal Shopping Cart and WP eStore template file. Unzip and upload the WP Simple Paypal shopping cart plugin to your plugin folder. Activate the plugin. Unzip and upload the WP estore template file (gallery-wp-eStore.php) into wp-content ->plugins -> Next Gen Gallery ->View folder.

• If you are using Next Gen Gallery as a store, you need a gallery for each category of items in your site. 
• Create your galleries as described in my previous post.
• Select Gallery -> Manage Gallery from the left menu bar.
• Select and open the gallery where you want to add the Paypal buttons.
• Scroll down the page until you see the pictures in your gallery.
• The code to add the Paypal “Add to Cart” button is entered into the description box of your picture.

 

I created a Paypal account and generated the code for my button from there. You need a merchant services /business account. Open the Merchant services tab and click the link to “create Add to Cart button”. Follow the wizard to create your button. PayPal uses the information you enter for this item to create the HTML code for your “Add to Cart” button. Copy this HTML code and go back to the gallery page. Paste the code into the “Description” box next to your picture.

To add the gallery with the “Add to Cart” buttons to your page use this code:  

[  nggallery id=X template=wp-eStore ] where “X” is the ID number of your gallery. The wp-estore template is the php file we copied into the plugins -> Next Gen ->  views folder earlier. This is the file that puts the “Add to Cart” button below your picture. Note: there is a space after the bracket in the code so WordPress does not try to insert a gallery with this code. If you copy the code, remove the space before and after the bracket.

Paypal also generates the code to “View Cart”. You can copy that code and paste it into a page where  you want the shopping cart to appear.

Next Gen Gallery Slide Show

After installing the Next Gen Gallery Plugin, I wanted to use it to have a slide show on the front page of my site. The slide show can be seen at: http://www.parklandsd.org

1. Upload the Next Gen gallery plugin to your plugin folder and activate it.
2. Get the JW Image Rotator from: http://www.longtailvideo.com/players/jw-image-rotator/ . The image rotator is free for non-profits and personal sites but there  is a charge for commercial and for-profit sites.  The image rotator is necessary to show the next gen photos in a slide show.
3. Unzip the file and upload the image rotator files to the wp-content/uploads folder in your site.
4. Click on the Gallery in the left menu of the Dashboard – this will open and expand the Gallery menu.
5. Select “Options”. You will see choices for: General Options, Thumbnails, Images, Gallery,  Effects, Watermark, Slideshow.  Select Slideshow.
6. If you uploaded the Image Rotator to the wp-content/uploads folder, click the option to “search now” for the Image Rotator. If it is found in the uploads folder it will show in the “Path to the Imagerotator” box.
7. There are other settings on this page to customize your slide show.  These settings will affect all of  the slideshows in your site – EXCEPT the slide show we are putting on the front page of  the site. I used code to insert the slide show on the front page and that code over rides these settings but we will get to that in a little bit. These settings are pretty self-explanatory. You can choose the default size of your slide show, the order of photos in the slide show, background color, etc. If you want a description of your photos to show across your slides show, check the box to  “show navigation bar”. The navigation bar has the following options:
   1. Picture description
   2. Click to show next picture
   3. show picture in full screen

 

 

 

8.  Next we will create the gallery for the main page of our site.  Go back to “Gallery” in the menu bar of  the Dashboard and  select ” Add Gallery/ Images”. A new window opens.

9. Add a Gallery and name it “main page” so you will know it is the gallery that appears on the main page of your site.

10. Find the button to “Upload Images” and click.  Browse to the images you want to upload into your slide show. NOTE:  the images must be sized correctly before you upload them.  Resize the images in your photo editing software. My slide show is 500px wide by 350px high but you can adjust according to your needs. The resolution for web photos should be 72 pixels.  Make sure you select the “main page” gallery from the drop down box so that your images go into the correct gallery.

11. Go back to “Gallery” in the menu bar and select “Manage Gallery”. This page shows any  galleries you have created and since we only have one gallery so far, you will see “main gallery” on this page. Click on “main page” to open.

12.  The pictures in your gallery are listed. You will also see  an area to edit the thumbnail, add tags (helpful for searches and also for SEO), and a description.  The description is what shows in the navigation bar.

13. After adding your descriptions and tags, save your page.

14.  To add a slide show or gallery to a post or page in WordPress, you can use the shortcode: [  slideshow id=2 ] where 2 is the ID number of your gallery. Note that I added spaces in the shortcode so it would appear in this post. The correct format has no spaces between the brackets and the text – if you leave a space, the shortcode will not work and the gallery will not appear. This might work  if you have your blog on your main page, but I am using a magazine type template and the shortcode didn’t work for me. It works on other pages, just not the main page.

15.  I didn’t have luck with this on the home page so  I used the source code from the demo page on the Next Gen web site: This is what it looks like: 

 Remember to substitute your website URL in the appropriate place. Also notice that you have the flash variables in the code here.  For example if you have shownavigation:”true”, the navigation bar will show in the slide show. These settings over ride the settings on the “Options”  page in the Next Gen gallery settings.

You will also need to know the ID number of your gallery. You will find the Id numbers of you galleries on the “Manage Gallery” page. the number is listed in front of the Gallery Name.  Our “main page” gallery is ID 1.  Enter the number of your gallery after gid= in this line: file : “http://yoursite.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1 “,

<div>
<div class=”swfobject” id=”so4_1″ style=”width:400px; height:300px;”>
<p>The <a href=”http://www.macromedia.com/go/getflashplayer”>Flash Player</a> and <a href=”http://www.mozilla.com/firefox/”>a browser with Javascript support</a> are needed..</p>
</div></div>
<script type=”text/javascript” defer=”defer”>
var so4_1 = {
 params : {
  wmode : “opaque”,
  allowfullscreen : “false”},
 flashvars : {
  file : “http://yoursite.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1 “,
  linkfromdisplay : “false”,
  shownavigation : “true”,
  showicons : “true”,
  overstretch : “false”,
  rotatetime : “6″,
  backcolor : “0×000000″,
  frontcolor : “0xFFFFFF”,
  lightcolor : “0xCC0000″,
  width : “400″,
  height : “300″},
 attr : {
  styleclass : “slideshow”,
  name : “so4″},
 start : function() {
  swfobject.embedSWF(“http://your site.com/wp-content/uploads/imagerotator.swf“, “so4_1″, “400″, “300″, “7.0.0″, false, this.flashvars, this.params , this.attr );
 }
}
so4_1.start();
</script>
<div style=”clear:both;”></div>

Next, I will show you how I  used the Next Gen gallery and the WordPress shopping cart to add Paypal buttons to items in a blog.