WPMU.orgCraig Grella | WPMU.org

Project Management in the WordPress Dashboard

Craig Grella — Sat, 29 Dec 2012 21:56:46 +0000

A good project management system lets you keep track of (and manage) projects within your organization. It lets you relate and assign tasks to contacts, set milestones and goals, and it provides an easy to use interface for messaging other members of your team.

Every organization has unique needs, which means no project management system is perfect for every situation, but the WP Project Manager plugin is a great place to start if you want to bring simple project management functionality into your WordPress Dashboard.

In this daily tip, we’ll give you a quick review of this new project management plugin and a few suggestions on how you can use it to add project management to WP.

WP Project Manager Organization

WP Project Manager is organized around 5 main tabs:
1. Activity
2. Messages
3. To Do List
4. Milestones
5. Files

The Activity screen shows all items posted to the project in the style of most social media streams. It’s a simple status update with links to the individual activity.

The Activity Tab in WP Project Manager shows all project updates system-wide.

Messages are where you post notes regarding the project. They can be related to project milestones, or aimed at specific users.

Messages tab is a graphical display of all project communications

The To Do List gives you the ability to create tasks related to your individual projects, which can also be assigned to specific users.

Tasks are added through the WP Project Manager To Do List tab.

Milestones are important dates or goals you set for the project. The Milestone view will show any related messages or tasks to which it might be assigned.

Project goals are added in the Milestones tab where associated project information is also displayed along with a status bar showing the milestone percent completion.

In this milestone screen, you can get a birds-eye view of the goals set for your projects, and as a manager – can assess how close your organization might be to accomplishing those goals.

The Files tab shows any files that might have been uploaded through individual messages posted to the project. All the files are collected and displayed here in a graphical fashion with associated file details. A link to the message which contained the original file is included along with a link to download the actual file.

Attach and display project related documents in the WP Project Manager Files tab.

Where WP Project Manager Does a Great Job

WP Project manager uses custom relational fields to organize and display your project information. It’s a good tool for organizations that want to integrate a project management system into the WordPress admin area, and keep project functions and website control under one roof.

Where WP Project Manager Can be Improved

While WP Project Management does a good job of allowing access to the major parts of a project management system, it is lacking in a few areas.

User Information

Clicking on the user assigned to activities, messages, or other areas of the plugin simply brings you to the default WP profile view for that user. In many cases, this default view is never modified, and rarely looks like more than a few random settings. It would be nice if the plugin authors could provide a dedicated (and styled) user view that pulls from the WP user meta, and displays relevant project management data.

Message Attachments

Documents attached to the system show up in Files section of the Project Manager, along with filename, the name of any messages it might be attached to, and a link to the area where that file is being discussed.

Files can only be attached through individual messages, which means to attach a file you must create a message. But, when files are attached to individual messages they do not display file names, sizes, or types – they’re listed as blank rectangular document thumbnails, which can be confusing for users. Filenames and details are shown only in the full file tab.

Tab Switching

Switching between the main tabs of the WP Project Management system causes a page reload. This seems like the long way around.

Assigning Users to Records

There is no differentiation between users in the system based on their WordPress profiles. That means Admins show up right next to authors and editors. There is also no separating or organizing users by team or by project. This is standard functionality for many cloud based project management systems like Asana.com, or Do.com.

Therefore, if you wanted to share a message only with admins, you’d have to know which users had admin access and select them by name. No problem for small sites with 5 users, but a big problem for larger sites with 20 or more users. It’s also a problem for membership sites that control members through the native WP user system, or BuddyPress sites which operate in a similar fashion.

Client Attachments and Access

A big part of managing projects is working in the client details. Currently. WP Project Manager doesn’t allow any relation to users or contacts outside the WordPress user list. This makes WP Project Manager useful for internal team based projects only.

Summary

With all its shortcomings, WP Project Manager is still one of the few full-fledged project management systems for WP that actually works as prescribed.

With the addition of the functionality pointed out above, WP Project Manager could become a rival for some of entry-level cloud project management systems. However, it is unlikely to provide the level of complexity needed for those who might be considering systems like Asana, Salesforce, or many of the other premium project management platforms.

Introducing a Free, Simple Project Management Plugin for WordPress There are two project management solutions which are easy to...
Welcome CollabPress: Project and Task Management for WordPress and WPMU Check out the new kid on the block. WordPress now...
Practical Content Management with Multiple Languages Using WPMU: Special Interview with BeeBole and the PURE Project WPMU.org recently had the pleasure of looking in on the...

Royal Slider – A King-Sized Responsive Slider for WordPress

Craig Grella — Thu, 27 Dec 2012 15:00:27 +0000

Royal Slider has been a popular premium slider plugin for a long time, and the all-new version of the old favorite is a good option for your WordPress sites. It is fully responsive, gives you the ability to add multiple animated HTML blocks, and has almost a dozen templates for adding things like thumbnail navigation, deep linking, video, and more.

Adding Slides with Royal Slider

Right from the start you’re greeted with a unique options panel, giving you a choice of 5 different sliders ranging from custom front page sliders to in-post sliders and even sliders that pull directly from your site content.

Slider greeting with choice of 5 options for placement on your WP Site

Once you’ve made a slider type choice, you’re then presented with almost a dozen templates which control the style and function of your slider. The choices range from a default slider with transition arrows, to sliders with image thumbnail navigation, and even a slider that displays inside a Macbook-like laptop image (for product sales sites).

Royal Slider Template Display options, including thumbnails, HTML Blocks, Rotators, Full Screen, and more.

Royal Slider Options Panel

The slider’s options panel is neat and efficient, letting you control most of the important settings with just a few clicks.

There are several highlights among the settings which set Royal Slider apart from the competition:

Complete control over image dimensions and whether the images crop or scale, or neither
Complete thumbnail image dimension control without needing to make css changes
More than 20 different settings for thumbnails, bullets, arrows, and tab navigations
Full screen slider options
HTML markup editor for very granular fine tuning

Some sliders make it incredibly easy to edit options and tweak every angle of your slider’s CSS, but forget to make it easy just to add slides. Royal Slider’s add slide panel is delightfully simple though.

The add slide panel of Royal Slider is clean and efficient to use.

You’re asked for an image, a title, a description, link, and a video link – if you plan to add that functionality.

No messy slider options panels to complicate slide additions, and no fussy caption blocks to add yet either. “Just the Facts” as Joe Friday would have said, and nothing to get in the way.

Editing Individual Slides

When you are ready to add things like captions and HTML Blocks, you can click the appropriate tab on the add-slide panel, and those displays are opened up for you.

The HTML blocks panel shows you a larger version of your slide image, which makes placing HTML blocks directly on the slide easier than some similarly priced premium sliders.

HTML Block editor and animation settings in the Royal Slider options panel.

Here, you have the option to add HTML snippets and captions, and then choose CSS options which change the style of your blocks, and also animation effects, which determine how those blocks might slide in or appear on your slides.

There is a handy button which allows you to add your own CSS classes and blocks to better match your own site’s style. Drag and drop functionality also helps with more exact placement of the images and blocks within your slides.

Where Royal Slider Excels

Perhaps the nicest feature of Royal Slider is how it handles video. Whether you use the full screen slider, thumbnails, or side-tabbed text navigation – the Royal Slider sizes your video perfectly and places it into a nice container for viewing. It also does a great job of handling stop, pause, and start functions within a video slide-show – an advanced feature lost on some inferior sliders.

Developers will love the “edit markup” feature which actually allows you to edit the HTML structure of the slider.

Royal Slider Markup editor allows changing the HTML structure right in the slide options area. No theme/template editing required.

This is very handy for custom theme developers who like to fine-tune their slider setups. It’s also great for those who use theme frameworks like Genesis or Thesis, or designers who use Bootstrap themes – which require specific markup for some functions to work.

Responsivity is smooth, and not based on break-points that you enter in options or code. Therefore, it adjusts quickly to nearly any screen dimension.

Where Royal Slider Needs Some Work

The HTML block editor has some great functionality, but I prefer a full slide view for caption placement because it gives you a better understanding of what the finished slide will look like without having to constantly preview it on the page. This is something Slider Revolution handles a bit better.

Overall Thoughts

Overall, the Royal slider is a great addition to the ranks of premium responsive sliders. The ease with which you can create slides and add them to your content or templates is refreshing, and the simplified options panel strips away the fluff – making it easier for novices to add clean-looking sliders to nearly any theme style.

To view a live demo of the Royal Slider or any of it’s 10 working templates, visit the official Royal Slider demo page.

Revolution Slider: A Premium Drag and Drop Slider for WordPress Revolution Slider - a new drag and drop image and...
jQuery Slider Shock: The Best Free Responsive Slider Plugin for WordPress Easily the most feature-packed slider plugin for WordPress, jQuery Slider...
Soliloquy: The Best Responsive jQuery Slider Plugin for WordPress This new slider plugin for WordPress blows every other plugin...

Turn Your WordPress Website Into a Lead Generating Machine

Craig Grella — Mon, 24 Dec 2012 14:00:31 +0000

Your fantastic website runs on WordPress and your CRM of choice is Salesforce, but you just can’t seem to get the two applications to play nice together.

Fret no more, in this daily tip we’re going to show you how to integrate WordPress and Salesforce, and turn your website into a lead generating machine!

A note before we start: We’ll be using the Web-to-Lead feature of Salesforce, which requires you to be using their Group Edition platform, or higher.

Why Integrate WordPress with Salesforce?

The benefits of using a CRM to track potential leads and customers are numerous – too numerous to list in this article, but it is safe to say that businesses which track and analyze sales perform much better than businesses which do not.

There are a few plugins out there which connect the two platforms, and even a few applications on the Salesforce side of things, but they are usually premium offerings sold at ridiculously high prices. Effectively, this puts them out of reach for the person just starting an e-commerce site.

WordPress is a fantastic web platform, and it is probably used for most of your front-end sales process. And because WordPress is not exactly the smoothest running CRM, your customer data is either ignored completely, or kept solely on Salesforce (and then ignored).

And that’s exactly why Salesforce makes the Web-to-Lead form available to us.

Salesforce Web-to-Leads

Your Salesforce account includes a feature called Web-to-Leads, which lets you design a form with contact fields you wish to track, and then gives you the HTML code to install that form on nearly any website – including your WordPress powered blog.

Creating a Web-to-Lead Form

Log into your Salesforce account and locate the SETUP menu. It will be located in the drop down menu that is your name in the top right corner of the site.

Salesforce Setup Menu located under your name in the top right of the application

Once there, on the left sidebar admin panel, navigate to APP SETUP, underneath the “Customize” option choose “Leads” and then **Web-to-Lead.**

In your Web-to-Lead settings, make sure Web-to-Lead is enabled. If not, click the edit button and enable it. Save your changes and return to the Web-to-Lead settings area.

Enable your Salesforce Web-to-Lead form in the customize app setup area

Click the “Create Web-to-Lead Form” button to create a new form for usage in your website.

In the box on the left you’ll see all the fields available for usage. The box on the right shows the fields you’ve selected for the actual form.

Underneath the boxes you’ll see space to enter a URL. This is the page to which you’ll be redirecting users after they fill out the form on your site. It’s not required, but it’s a nice touch to bring users to a page that lets them know the form has been submitted successfully and that you’ve received their info. Of course, this requires you to already have that page operating on your site.

When you’re happy with the fields and have filled out the redirect URL, click the “Generate” button.

Copying the Web-to-Lead Form Code

Salesforce automatically generates the required HTML code to produce the web-to-lead form. Highlight the code in the window, copy it, and visit the WordPress post or page on which you’d like that form to appear.

Editing the Web-to-Lead Form in WordPress

Take the code from Salesforce and paste it into the HTML code area of your post or page editor. In WP 3.5, that area of the post / page editor was named “text” and its tab can be found at the top right of the editing area.

Unfortunately, Salesforce gives us some extra code that is not needed. These are commented lines and a definition of character set, which WordPress already defines.

Therefore, you can delete everything before (but not including) this line:

1	<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

You’ll also want to delete the commented section, which looks like this:

<!--  -------------------------------------------  -->
<!--  NOTE: These fields are optional              -->
<!--  <input type="hidden" name="debug" value=1    -->
<!--  <input type="hidden" name="debugEmail"       -->
<!--  value="yourname@email.com">           -->
<!--  -------------------------------------------  -->

This is optional code to help developers debug the form, but we wont be needing that here.

Viewing the Web-to-Lead Form On a WordPress Page

What you’re left with is clean form code in HTML. When you’re done editing your page, you can publish and view it.

Web-to-Lead form without styling

The form input boxes are placed just to the right of our form labels. These two field columns are way too close together, so we’re going to make some css changes to make our form more pleasing to the eye.

But first, we’ll need to add some classes to the Web-to-Lead form code, which will make styling much easier, and make sure that changes we make here don’t affect other forms that might be on our site already.

Adding Classes to the Salesforce Web-to-Lead Form Code

Return to your WordPress page HTML tab. We’re going to add some classes to these form elements.

Find the first line of the form code. It should look like this:

1	<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

We’re going to add a class by inserting the words id=“sfwtlform” right after the word “form”. Your edited line should then be as follows:

1	<form id="sfwtlform" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

Now, find the last line of the form code, before the closing line for the form. This is the code that renders the form button.

1	<input type="submit" name="submit" />

We’re going to add an id to this code as well: id=”sfwtlbutton”. This will allow us to style the button separate from the other form input fields. The edited line of code should look like this:

1	<input id="sfwtlbutton" type="submit" name="submit" />

Save your changes and re-publish the page. This wont change the look of your front-end form…yet. We’ll do that in a moment with some CSS.

A note regarding pasting code: sometimes when you copy and paste code from a browser into an editor straight double quotes copy over as curly quotes. This will throw an error, so we recommend actually typing the id=“sfwtlform” straight into the form code, rather than copying it from this article and pasting it in.

Cleaning Up Your Web-to-Lead Form with CSS

The idea of editing your CSS is to make this web-to-lead form more closely match the look and feel of your site. To do that, we’ll be editing the style.css file.

In my example, I’m using a stock installation of the Twenty Twelve theme on WordPress 3.5. That style sheet is located in the theme directory. Your file will likely be in a similar place, and that path will look something like this:

http://YOURSITE.com/wp-content/themes/YOURTHEMENAME/style.css

You’ll need to use a custom code editor or edit the theme file directly in the WordPress code editor (not recommended). Once you have that file opened, you can create a new section at the bottom of the file and enter the following code:

/* Salesforce Web to Lead Styling */
#sfwtlform label {width: 150px; display: inline-block;}
#sfwtlform input {width: 200px;}
#sfwtlform #sfwtlbutton {width: 100px;}

Don’t worry, we’ll break it down line by line for you.

The fist line of code is a comment. It’s not actually required, but it helps keep our code organized:

1	/* Salesforce Web to Lead Styling */

The second line tells our browser to target the form with an id = sfwtlform, and only that form.

1	#sfwtlform label {width: 150px; display: inline-block;}

That will make sure any styling we do here applies only to this form and no other forms that might already exist on your site, like email newsletter forms.

Here, we are setting the label to display as an inline block element, which makes setting a width of 150 pixels possible too. That gives us even separation between the label and the input field as shown.

Custom CSS can help separate form fields, making them easier to read and fill out

The third line tells the browser that the input fields should be 200 pixels wide.

1	#sfwtlform input {width: 200px;}

This gives our visitors a bit more room to enter their information.

The fourth and final line tells the browser to make the submit button only 100 pixels wide.

1	#sfwtlform #sfwtlbutton {width: 100px;}

The submit button is also an input button, so without this line, the submit button at the bottom of the form will be as long as the input text fields, which would look horrible.

The Finished Product

When you’re all done, the finished product should look something like this:

The finished form with custom CSS changes made

The finished form is much cleaner and easier for your users to read and fill out. The labels are lined up correctly, and the space before the input field is uniform. The input fields are of uniform length, giving the user more room to enter longer lines of text without having to worry about scrolling.

Of course, you can change the pixel widths, and even the colors, of these form fields to more closely match your site design.

Your New Lead in Salesforce

When a visitor fills out the Web-to-Lead form, his or her information will automatically be sent to your Salesforce application, and placed in the LEADS section. That makes following up with your potential customers much easier than searching the member/user fields when trying to use WordPress as a CMS.

Contact view inside the Lead dashboard of the Salesforce CRM

Summary

Without any fancy plugins and just a few lines of custom code you’ve added a form that integrates your WordPress website with your Salesforce CRM.

Now, all that’s left to do is sit back and watch the leads pile up!

How to Turn Your Website into an Automated Sales Machine (Part III) 10 Tips for Building a Killer FAQ Section ...
How to Turn Your Website into an Automated Sales Machine (Part IV) 12 steps to help you increase your website's trust....
How to Turn Your Website into an Automated Sales Machine (Part V) 5 Strategies for Making Your Calls to Action Work...

2 Plugins to Put Your Site in the Fast Lane

Craig Grella — Sun, 23 Dec 2012 00:24:09 +0000

Page load speed is not only a major factor in how many people find and stay on your site, it’s also a factor in how much revenue you can earn. In Greg Linden’s short (but famous) article, he writes about internal tests at Amazon that showed mere milliseconds of delay in page load time cost the company substantial revenue.

Even Google experienced similar results, citing 20% less traffic to a page when it loads just a half second slower.

In this daily tip we’re going to ponder the question, What would 20% more traffic look like on your site and would it translate to more revenue? Then we’re going to show you 2 plugins you can implement to speed up your page load time and put your site into the fast lane!

But before we look at these plugins, I ran a baseline test on a personal blog which has been active for a few months with approximately 75 posts and pages. Using Google’s Page Speed Tools, the site loaded in under 3 seconds and earned a score of 83 out of 100.

Baseline results from the Google Speed Test – Showing a score of 83 out of 100

You can see the results in the image above. At the time of the test, the site wasn’t running any special plugins to aid with page speed, and neither the css nor the JavaScript had been modified in any way. It’s a fairly typical installation of WordPress hosted on a basic plan at Hostgator.

Minify Your Files

Minification is the process of making your files smaller. In particular, the WP Minify plugin analyzes your JavaScript and CSS files, reduces white space, and makes them smaller. This means that when your site tries to load these essential files, they are served quicker – thus allowing your site to load quicker.

Google page speed results 87 out of 100 after using WP Minify Plugin.

As see in the image above, after installing WP Minify on the site, Google Page Speed increased 4 points (4.8%) from 83 to 87. Not bad!

Caching

Caching is the process of storing web pages, images, and other documents for reuse during your web browsing. Browser caching saves web files on your local machine to make your browsing experience faster. These are sometimes called “temporary internet files.”

Caching plugins optimize your web site files for caching at the server and at the client side browser. Some caching plugins, like W3 Total Cache, also minify your files, thus performing several page speed functions.

On the same test site mentioned earlier, I installed the W3 Total Cache plugin (after de-activating WP Minify) and, once again, ran the Google Page Speed Test. This time, the result score was 89 out of 100, an increase of 6 points (7.2%) over the starting site speed.

Page speed results of 89 out of 100 after activating W3 Total Cache

It’s worth mentioning that I made no special tweaks to the settings of either plugin. I simply installed and activated the plugins and made use of the standard settings. Also, activating both WP minify and W3 Total Cache simultaneously shows no improvement over the score obtained just by W3 Total Cache alone, likely because that plugin also includes minification.Of course, you can always purchase expensive hardware and superfast dedicated WordPress hosting plans, but that will hit your pocketbook hard.

Until then, if you want your site to run faster, present a more pleasant experience for your viewers, and give you the potential to earn more revenue, it makes sense to install a performance plugin like the ones mentioned above. Overall, these free plugins increased my page speed score by more than 7% and decreased my page load time by 300ms.

10 Plugins to Make WordPress Blazing Fast Check out these 10 great plugins for speeding up WordPress...
How to Add Google’s New Site Speed Tracking to Your WordPress Site Google recently announced their new Site Speed tracking feature for...
Blazing fast WordPress page loads, MaxCDN Review & Coupon Code If you don’t have caching or CDN, your website page...

Add a SlideShare Presentation to Your WordPress Site

Craig Grella — Mon, 17 Dec 2012 03:04:27 +0000

Slideshare is a popular online presentation viewing service. Members can upload presentations in multiple formats, host them in the cloud and deliver them through Slideshare’s viewer. You can also use the company’s built-in WordPress shortcode feature which embeds your slide show right on your WordPress site.

What you end up with is a picture-perfect slide show presentation viewer like the one shown below, and it was added with one simple line of code.

The beauty of a Slideshare presentation is that it can be shared via multiple social media networks, and even through email as a link. It’s one of the reasons the Slideshare platform has helped thousands of presentations go viral in mere minutes. It also looks nice when expanded to full screen!

If you’ve got a WordPress site and a Slideshare account (Free or pro) here’s how you can add your presentation.

Step 1: Navigate to My Uploads

The first step is to navigate to the My Uploads section of your Slideshare account. You can find that in the drop down menu on the right side of the top menu bar.

Main Screen in Slideshare Account View

Step 2: Select the Presentation

Your uploads screen will show all the presentations added to your account and available for viewing or sharing. Simply click on the presentation you wish to share and

Presentations available in the My Uploads Section

Simply click the presentation thumbnail image and you will be taken to the presentation viewing screen. This is the same screen your readers will see should they watch your presentation on Slideshare’s site.

It is set up similar to YouTube in that you’ll see the presentation front and center with a commenting box below it. To the right, in a sidebar, you’ll see some related presentations from the Slideshare network, and a tab where you can view activity on Facebook related to that presentation or related presentations.
s
For our purposes, we need look no further than the top menu bar of our presentation player.

Step 3: Copy the WP Embed Code

Most video and slide show players require an iframe or longer html code, and Slideshare is no different there…except when dealing with WordPress. On the top right on the player menu bar you can click the <>Embed link and a modal window slides down with more options (shown in the image below).

Slideshare embed options for WordPress

Underneath the iframe code is a “Customize” button, which when pressed drops down additional options, in particular:

the ability to remove related content slides from the end of the presentation
start on any slide you want – not just at the beginning of the presentation
modify the size and shape of the embedded player

And below those settings you’ll see a custom snippet in the form of a handy short code that can be used only with WordPress blogs. Copy that code and pop over to your blog post or page. Paste it in the editor screen and save your changes.

No messy iframe code or complicated options to add onto HTML or URLS. Just a nice, neat shortcode and a fancy presentation player…on your blog!

WordCamp Miami 2012 Presentation on Creating a Niche Social Network Using Multisite and BuddyPress If you're thinking about creating a social network with Multisite...
Slides from Designing For Humans with BuddyPress Presentation Find out how you can create a personal and engaging...
Go from 30 Views to 22,000 with this Simple Action A real world example of an amazing increase in viewers....

Add a PayPal “Buy Now” Button to WordPress

Craig Grella — Sat, 15 Dec 2012 21:41:23 +0000

Adding a PayPal button to your site is one of the easiest (and fastest) ways to take payments or collect donations with your WordPress installation.

In today’s Daily Tip, we’ll show you how to quickly add a PayPal button to your site using the standard post/page editor.

To start, you’ll need a PayPal account. You’ve got one of those right? If not, head over to PayPal and get started – it’s free!

If your site is business related, take a moment to sign up for a business account with PayPal. That’s free too, but it will give you more flexibility when it comes to taking money and donations. You’ll need a company checking account to link up, but once you verify that any temporary holds or limits PayPal might have will be removed and it will be clear sailing (or clear selling!).

PayPall Selling Tools

Inside your PayPal account, in the second level menu bar, hover over the word “Profile” and additional options will drop down.

Click “My Selling Tools” and you’ll be brought to another options screen. The third option down “PayPal Buttons” is what we want. Click the associated “Update” button all the way to the right column.

If you’ve never created a button, this area will contain 3 sample buttons to get you started:

Sample Buy Now Button
Sample Add to Cart Button
Sample Subscription Button

These are the 3 most popular button types, which is why they are placed there for you, but we’ll be creating a new one from scratch.

Click the “Create New Button” link to the right – this brings you to the graphical button layout page.

Step 1: Button Type and Payment Details

PayPal makes 7 button types available for you ranging from the standard shopping cart (Add to Cart) to buy now, donate, and more.

A summary of those buttons is included in the image below:

PayPal Button Options and associated graphics

I’d like to change the standard cart button to a “Buy Now” button so I make that change in the button type drop down box – the very first one on this screen. Let’s assume we’re creating a button for a company that sells custom bicycles for kids.

Item name and ID

You’ll want to create an item name and give it an ID. This shows up in the payment screen when your customer clicks on your button to buy this item.

It should be descriptive enough so they know exactly what they’re getting, but short enough not to confuse anyone too.

In the item name box I chose “Red Rider 4000 BMX Bike” with an ID of 001, since it’s my first item.

Price

This box should be self-explanatory – it’s the price for the item named in the previous step. I chose $100.

Customize Button

In this section we have the ability to customize the look of our button. We can add different price options, text fields for leaving notes, and we can even customize the text used on the button or supply our own image.

We’re going to stick with the standard buy now button displaying the credit card logos beneath it, and move on.

Shipping and Tax

Since we’re an online company we will have to pay to ship the item. We know shipping anywhere in the US will cost $25 or less, so we’ll set our shipping to that amount.

My local taxing authority sets my tax rate at 8%, so I use that figure.

If you’re not sure what your numbers should be check with the Postal Service or your favorite shipping company and call your local taxing authority. These numbers are completely optional – you don’t need to use them at all. If you’d rather not list numbers here, make sure you build some cushion into your product price just in case you have to pay shipping and taxes later down the road.

Merchant ID

When you create a PayPal account you are automatically assigned a secure merchant ID which is referred to for your customer’s contact needs. You can also choose to make your email public here.

I choose the default option – use secure merchant account ID.

That’s it for step one. If we wanted to, we could stop here and have a fully functioning button. But we’re going to continue with a few other options. A summary image of all the options we selected is shown below.

Step 1 of Creating a PayPal Buy Now Button
Click image to view full size

Step 2: Track Inventory, Profit and Loss

Steps 2 and 3 are optional, but they do give us some additional functionality.

The default option to save button at PayPal should be checked.

I will track inventory so I click that option as well. Below, the Item ID is pre-filled and I’ll enter “20” for quantity in stock and “5” for alert quantity.

That tells PayPal that I’m starting with 20 bikes, and it should send me an email alert when I get down to only 5 bikes left.

I’ll check the final radio button here and make sure “No” is selected, disallowing customers from purchasing items when it is sold out.

In the text box below that I’ll enter my domain name so that if my product is sold out, my potential customer is taken back to my site, and not left stranded on PayPal’s site. You can enter your domain name here.

A summary image of the Step 2 options is shown below.

Step 2 of Creating a PayPal Buy Now Button
Click image to view full size

Step 3: Customize Advanced Features

This step lets you get really customized with your button.

You have the option to let your customer change quantities in the checkout cart, send you special instructions, and to take your customer’s shipping address at checkout.

We leave all these options as default, paying attention to make sure shipping address is checked “Yes” because we’ll need that info to ship our product.

Success and Cancel URL Redirects

It’s always a good idea to enter URLs in these two boxes, so that whether your customer completes his or her purchase or cancels it, you can take that person back to your website.

This will require you creating two custom pages on your site. I like to create a success/thank you page with a nice note, telling them their bike is paid for and it’s on the way. You can also give them some shipping timelines.

The cancel URL gives me a second chance to reel them in. They will arrive at this page if they click on my Buy Now button but then change their mind and abandon the cart before purchasing. Once on my cancel page, I remind them about how cool the product is, and maybe even offer them another chance to buy. Of course, we’ll add our PayPal button (once complete) to that page too.

After we’ve finished adding our URLs here, click the “Create Button” button and we’re done.

A summary image of Step 3 settings is shown below.

Step 3 of Creating a PayPal Buy Now Button
Click image to view full size

Copy Your Button Code

At this point, you’ll be taken to the button code screen and given the HTML code for your PayPal button.

You’ll also see what your finished button looks like to the right of that code.

If everything looks ok, copy the code and head on over to your WordPress site.

Placing the PayPal Button on your Site

Armed with the PayPal code, visit the post or page on which you wish to place that button.

Mine happens to be a nice page I created showing off the Red Rider 4000 BMX Bike.

Using the post editor screen, click on the Text Tab to expose the post’s html code (HTML Tab – WP v. 3.4 and below).

Place your cursor where you want the PayPal button to appear and copy it straight in.

Click save and you’re all done.

Your finished product will look something like this:

Product Page showing PayPal “Buy Now” button.
Click image to view full size

When someone clicks on your button, they will be taken off your site momentarily to a PayPal secured checkout screen where he or she can pay for the item.

PayPal checkout screen.
Click image to view full size.

You can create an unlimited amount of buttons for your site, or for use in email too. Experiment with changing types, and text. PayPal will save all your buttons, keep track of their ID’s, and even give you an account summary telling you how each button performs.

Now, all that’s left to do is check your account balance screen and wait for the sales to come rolling in.

Good luck!

Add a PayPal Tip Jar to Your WordPress Widgets Tip Jar PayPal Widget is a cute new widget that...
Add a PayPal Payment or Donation Widget to WordPress Here's a super quick and easy way to add a...
8 WordPress PayPal Plugins for Receiving Payments and Donations Today I’ll be featuring PayPal plugins that have been recently...

WPMU’s Best in WordPress: Dec. 3rd – 9th

Craig Grella — Mon, 10 Dec 2012 18:00:21 +0000

We’re down to only a few weeks left in 2012, and the last one gone by has been a great source for some fantastic WordPress goodies.

This week on WPMU’s Best in WordPress, we bring you information on the new WP 3.5, web analytics and SEO, some responsive CSS, and tips on how to get more involved in the WordPress community. Enjoy!

1. How to Become a Top WordPress Professional: SmashingMagazine

In this fantastic article, WP pro Siobhan McKeown shows you a number of ways to use your talents and get more involved in the WordPress community. In the process, you’ll learn how to drive more traffic to your own site, even make some money.

2. 10 Things You Need to Know about WordPress 3.5: Technosailor

Aaron Brazell writes about interesting things, and he writes well. In his blog, which you NEED to read, he gives valuable and honest input about tech and WordPress and, more importantly, how the two impact our real world. In this post, he covers 10 things you need to know about the new WordPress 3.5 released this morning. This post about 3.5 rises above most of the other update posts you might read over the next few days, which is why we highlight it here.

3. Web Analytics and SEO: WordCamp

Andy McIlwain covers web analytics and SEO at a recent WordCamp Toronto Event. He covers measuring your presence on the web with WordPress, plugins, and data. No magic tricks here, but a list of great resources you can use for actionable results on your site.

4. MyMail Newsletter Plugin:PippinsPlugins

A new mail and newsletter plugin on the market, reviewed by WP developer Pippin. It has some promising features and is a great option for those looking to integrate their website with their email lists.

5. Create Your Own Share Buttons

Another great post from Paulund about creating your own share buttons with Sharre from jQuery. If you are a developer creating custom sites you want to check this out. Sharre gives you the ability to create custom share divs on your site, and it taps into all the popular social networks. It has the look and feel of bootstrap components – but for sharing buttons. Love this!

6. Microformats and Why You Should Use Them: WP Mayor

If you’re not yet familiar with (or not yet using) microformats this post will give you a good rundown of the features and uses. It also gives you a good introduction to Google’s rich snippets tool and how to take advantage of them.

7. How to Split Long Posts Into Several Pages: Blondish.net

Have a long post and don’t want the infinite scroll? Split it into pages – a trick used by many popular news sites. There are advantages and disadvantages to using pages and Blondish covers them all in this post.

8. Create and Customize Responsive WordPress Themes

Part 4 of Patrick Cohen’s series on creating and customizing responsive WordPress themes takes you through the media queries in CSS, and continues his excellent post series on responsiveness in WordPress – and creating responsive themes the right way!

Remember, we’re always on the lookout for great WP resources. If you’ve written one yourself send us a note and if we like it you’ll see it right here in bright lights.

Multisite Compatible Super Widgets Plugin Displays Featured Posts A great new plugin is available in the WordPress repository...

Cleaning Up WordPress Menu Admin with Screen Options

Craig Grella — Sun, 09 Dec 2012 19:07:36 +0000

If your site uses a few custom post types and those custom post types are viewable in the WordPress menu area, your admin panel can get messy quickly; making it hard to find categories or tags you actually want to include in your menus.

Of course you could alter your custom post type code to remove them from the menu item screen, but the easier solution is to use the SCREEN OPTIONS tab inside the menu admin area.

Screen Options Panel in WordPress Menu Admin Area.

In the image above, you’ll see a screen options panel for a site that uses a WordPress ecommerce solution, an events calendar plugin, and Q&A forums. Each one of those plugins uses a custom post type that can be added to menus. Chances are your plugins which rely on custom post types include similar functionality.

The screen options drop down allows me to uncheck items I do not want on my menu admin screen, which I will do for events and products, two items I do not need to include in my main menu.

That makes my menu admin screen restrict available choices to just categories, tags, pages, and a few more standard options; and makes it easier to find what I need when I want to build out new menus.

A much cleaner menu admin area with only the necessary items.

Make Use of the Screen Options Menu to Clean Up the WordPress Post Editor Choose which boxes show on the post editor page....
Change Your WordPress Admin Menu to a Drop Down Menu Reconfigure your WordPress Admin Menu for more editing space and...
How to Hide the WordPress Screen Options Tab This snippet of code will completely remove the Screen Options...

Managing Images in WordPress with the Media Attacher

Craig Grella — Sat, 08 Dec 2012 07:00:44 +0000

There are 2 ways to upload images into your WordPress site – through the post/page image uploader or through the media library.

Both place images into your overall media library; and both give you the ability to drag and drop upload multiple images at once.

So what’s the difference and which one should you use? Good questions.

Most people add images into a post using the Add/Insert button located just above the post/page editor. This gives you the ability to upload files from your computer, a web url, or from inside your media library.

Image uploader in the post/page editor

It also places that file immediately inside a “Gallery” which gives you the ability to quickly choose the image for re-use later in the same post.

Images available through the post/page editor gallery

That’s fine if you’re working with images not already in your media library, because those images have to be uploaded anyway.

But if you run a multi-author blog, or a website that has images inside the library that you plan to reuse, attaching those images to posts using the media library is the more efficient way to go.

Using Media Library to Attach Images to Posts and Pages

You can make images appear inside your gallery at the post and page level by using the media library.

This is also a great workflow option for those writers who like to compose blog posts with text first and then add images later. So rather than using the Add/Insert button at the post level and adding images from your library one by one, you can employ a more efficient method of attaching images.

Media Library shows all your site’s media

When you have a post in draft form – text only, navigate to your media library and find the images you plan to use with that post, select them and then click the “Attach” link.

A modal window will popup and give you a search field where you can type text to find posts. When those posts have populated the window, select the box next to the post name, and those images will automatically be “attached” to the selected post – that is, they will be available through that post or page image gallery, and available for quick insertion into the post or page editor screen.

Places images inside the gallery using the media attacher

Once you return to that draft post, you can then insert images into the editor by using the GALLERY found inside the Add/Insert screen, rather than uploading duplicate copies, or having to search for them individually inside the media library.

Display Images, Videos and Media in WordPress with the prettyPhoto Media Plugin Check out this new lightbox plugin that handles any kind...
Automatically Download Remote Images to Your WordPress Media Gallery If you use offsite images, now you can get a...
Improve the WordPress Media Library with Enhanced Media Picker Make browsing your WordPress media library a better experience with...

WPMU’s Best in WordPress Nov. 26 – Dec. 2, 2012

Craig Grella — Mon, 03 Dec 2012 18:02:54 +0000

In this week’s episode of Best in WordPress, we bring you a variety of posts, including a tutorial on theme creation, turning RSS feeds into content, official WordPress news, and a cool new way to add pull-quotes in your articles.

So let’s get started, shall we…

1. A Quick Method for Creating WordPress Themes (WPhub.com)

This post from WPHub gives you a great checklist for the required items of creating a new WordPress theme – including all the files you need to create, and the ones you don’t.

2. Turn Your RSS Into Content (SpeckyBoy)

This post is not for the faint of heart – it’s a fairly involved tutorial, but the results are fantastic. Basically, it teaches you how to take a plain RSS feed from another site and turn it into usable content on your own.

It breaks down parsing that content, turning it into usable actions in WordPress, and then adding it into your templates for modification and styling.

It’s a great post for developers and designers who want to make magazine style themes for clients who pull content from various sources on the web.

3. How to Force Users to Reset Passwords (WpBeginner)

Security is always an issue when dealing with user-based systems. On a site with a large base, just one corrupt user can bring down the whole business. One way to keep security fresh is to force your users to change their passwords at a regular interval.

This post shows you how to do it with a simple plugin and a few admin settings.

4. Coloring Posts in the WordPress Admin Panel (WPExplorer.com)

You can get bleary-eyed quickly browsing through post admin panels with dozens of pages of posts. This article from WPExplorer shows you how to color code your posts inside the WordPress admin section to make finding and reading your titles easier on the eyes.

5. WordPress’ New Restaurant Templates (WordPress.com)

WordPress recently put an initiative in place to highlight the lack of good user experience on restaurant websites. Their solution was to create a few new templates for restaurants to improve design, aesthetic, and make it easy for people to find what they need quickly – be it menus, reservations, reviews, or directions.

We’re super excited about new the focus on restaurant sites, and we think you will be too – especially when you see our forthcoming Bookings Plugin, which will help restaurant owners (among other types of businesses that use bookings) take reservations, plan seating, and even charge fees directly on their sites. Look for that plugin in the coming months on WPMUDEV.org.

6. The Ultimate Guide to Setting Up a New WordPress Site (Blondish.net)

This is an entry from a new site on the Best in WordPress list – Blondish.net, and it gives budding designers a good workflow and check list for the process of planning and creating a new WordPress website.

7. Pinterest and Quote Images (WPMU.org)

This post from our site highlights a new plugin intended for Pinterest users, but it actually works great for anyone who wants to show off quotes in his or her posts. The plugin allows you to take a quote and display it as an image in your article. You can choose from dozens of images from the plugin’s creators or opt to use your own images as the quote background. You can use any custom quote text, even call out the quote’s author.

That’s it for this week – we’ll see you again next week with a brand new batch of the best content in the world of WordPress.

As we head into the holidays we’d love to hear from you on any special holiday themed WordPress posts you’re planning – so send us a note or leave a comment below!

Multisite Compatible Super Widgets Plugin Displays Featured Posts A great new plugin is available in the WordPress repository...