Wordpress Plugin Announced

The RealTimeDesigner team announces the release of the RTD Wordpress Plugin. Wordpress is the leading website content management system (CMS) used by millions of websites. With the RTD Wordpress Plugin, you can quickly generate content for your website based on RTD and then link to all of the online design features that have made RTD the leading design online application since 2000.

The plugin imports product data and links from the RealTimeDesigner and displays live pricing along with sizes, colors, fonts, and templates into the simple but powerful Wordpress system. It is easy to make changes to your content and there are thousands of predeveloped skins available for Wordpress. The Wordpress plugin is perfect for those looking to generate a new website because the expansive platform offers much more control than is available in the basic RTD catalog.

We're looking for Wordpress users to help make the plugin shine. Let us know if you are interested.

mark

Would love to check this out and help with it, as mycustombandmerch.com is built on wordpress with RTD integrated into it. Let me know how I can access it and help further develop it.

We've tested this a bit but there's likely more we want to add to it. Please consider it a BETA release. Any suggestions you may have are much appreciated. We are now working with our graphics guy to ensure there is adequate styling capabilities.

You can get the files here: http://support.realtimedesigner.com/docs/auto_post_from_api.zip



The RTD Wordpress Plugin

Before You Begin, You'll need a website with Wordpress already installed. We chose the $8.99 option from GoDaddy hosting. Installation of Wordpress is a single click.

Get your API Credentials
In order to use the RTD API, you'll need some special codes so that others can't get into your system. In a seperate tab from WordPress, open up the RTD admin panel and click on MANAGE API CREDENTIALS > GET CREDENTIALS.

Initializing the API
Once Wordpress is installed on your site, you'll need to unzip the contents of the Auto_post_from_API.zip file and place all of the files in the wp-content/plugins/ folder of your website. Now log in to your Admin Panel for Wordpress. Click on PLUGINS on the left menu. You should see an option for "Auto Posting API Products" on the side menu bar. Click "ACTIVATE". If you do not see the plugin in wordpress, check to be sure you installed it in the proper folder.

You should now see RTD API PRODUCTS listed near the bottom of the left menu. Click it and then click API SETTINGS.
Copy and paste these RTD credentials obtained earlier into the Wordpress screen and save your changes.



Loading Your RTD Products into Wordpress
The most basic function of the plugin is the create product pages in Wordpress for each of the products you have in RTD along with "DESIGN IT NOW" links to the RTD. You can select any or all of the products in your RTD site. You can upload your own "design it now" button on the OPTIONS page. Products that have already been link in Wordpress will appear as inactive and a note saying "ALREADY EXISTS". There are several data elements that can be retrieved from RTD and displayed on your Wordpress pages.

Background Colors - For some products such as shirts you may wish to display the shirt colors available in the product page. Using the RTD API, you can display color swatches of all the product colors defined for that product in RTD. Variables for this option include text lines for the table header and tail (footer) as well as the height and width of the color swatches in pixels, and nubmer of columns to display.

Foreground Colors - Like background colors, you can display a grid of the imprint colors you have available for each product. Variables for this option include text lines for the table header and tail (footer) as well as the height and width of the color swatches in pixels, and nubmer of columns to display.

Fonts - If a product has specific fonts that are critical to designs placed on it, use the Fonts option of the plugin. In most cases we recommend creating a separate page called "Our Fonts" to display the wide array of fonts that you use on the bulk of your products. Be careful not to display too much info on your products pages. Variables for this option include text lines for the table header and tail (footer) as well as the height and width of the font swatches in pixels, and nubmer of columns to display.

Cliparts - RTD comes with a huge clipart gallery exceeding 10,000 items. The Wordpress plugin will only display the first 100 cliparts. It is not intended to be an entire gallery of cliparts but rather display a very limited set for specialized products. Variables for this option include text lines for the table header and tail (footer) as well as the height and width of the color swatches in pixels, and nubmer of columns to display.

General Templates - The general templates for a product can be displayed on the product page using the General Templates option of the plugin. Each template thumbnail is displayed and is linked to preload that template in the design window of RTD. Variables for this option include text lines for the table header and tail (footer) as well as the height and width of the template thumbnails in pixels, and nubmer of columns to display.

Product Templates - The general templates for a product can be displayed on the product page using the General Templates option of the plugin. Each template thumbnail is displayed and is linked to preload that template in the design window of RTD. Variables for this option include text lines for the table header and tail (footer) as well as the height and width of the template thumbnails in pixels, and nubmer of columns to display. You may chose to run the General and Product templates together into one table if you are using both. Do this by omitting the tail on the first and the header on the second.

Enabling Options
All of the aformentioned options (Colors, Fonts, Cliaprt and Templates) are activated in the same way. From the left menu, click on the desired link, click on the LOAD PRODUCTS link at the top of the page, select all products that you wish to fetch data for. Save your changes. Place a checkmark next to the ____ and click update. Reload your product page in your browser and the apropriate options should now be visible to your visitors.

Instant Pricing Button - RTD has a built in module called the External Instant Pricing module. With it you can create a popup from any page outside of RTD which allows users to select all the necessary options of a product and see their price. The Wordpress plugin makes use of this popup if you select the ____ option on the Options page. You can also upload your own button for this feature.

Pricing Matrix - For most people, the most complicated concept of the RTD Wordpress plugin will be the Pricing Matrix. This feature allows you to display a table containing sizes, number of colors and pricing. The pricing matrix is very powerful. Rather than displaying a huge list of every combination available, this feature allows you to define what sizes are shown in the table and it then automatically looks up the price for each whenver the page is loaded. Special codes must be supplied to the RTD which describe how to build such a table. You can read more about the special codes HERE_________________.

Reloading Products
Colors, Fonts, Cliparts and Templates are snapshots of your RTD taken at the time of loading. IF you make changes to your RTD site, you will need to update your Wordpress site by reloading their values. Do this by going to the RTD API menu pages and delete and reload the values. The pricing matrix and instant pricing window are live links to RTD and do not require reloading if you change values in your RTD.

Tip for Fastest Setup
You can repeat the setup for each product individually but you can minimize the amount of time it takes to set up your products in Wordpress if you import them in groups. Think ahead about which data you intend to display for each product. Import all those that will contian the same data elements grouped together at one time. You can also import all products at once ant then go back and tweak any that have special requirements.

Tip for Styling
Each of the options has only a couple variables. You may wish to style your data beyond these basic elements. Each of the options has its own ID's defined so that you can style them using CSS. Please search the web for "STYLING WORDPRESS USING CSS" for more information on customizing your site to your satisfaction.

WORD OF ADVICE
Be sure to look at the OPTIONS SCREEN carefully. There are choices to make your pages DRAFT or PUBLISH - if you do all the steps and can't see your product pages, you may have selected draft. Also, upload your DESIGN IT NOW and PRICE CALCULATOR buttons into the options page if you intend to offer these options on your product pages.


Mark

Thank you for all the advice, it looks as if this will save me a TON of time in making the actual product shots. I will let you know once I start making these changes.

Hi scott!


I too will be trying this Mark!

I have started to play around with this a little and can tell this is going to be HUGE! I guess I am confused though with how fields need to be filled in as they are just not very clear at all. Some I am not sure if I am supposed to put text, numbers, hex colors, etc. Maybe if you could post a list of all the fields along with examples or even on the plugin had it prefilled with examples. I am having troubles figuring this out. Overall, this will save a TON of time for those of us that like to use our own product pages and this will be an amazing time saver.

Couple of other questions.

1. What file would I edit if I want to create a nice template for the product page to lay it all out? I want to create a template for a product page for all products that will all look the same and just wanted to know how I would do this.

2. Wondering if it would also be possible to embed the live pricing calculator into the page. Would this be possible maybe with an iframe? Also, want to be able to style that better as well as it looks pretty bad.

I am still playing around with stuff in it and getting some stuff to work, but struggling to get other stuff to show up at all. A quick example of the fields would help so much. Thanks again for creating this plugin!

Ok, I pretty much have the fields figured out. I however do not know the correct format to enter into the pricing matrix field to get it to display my pricing table.

I was able to embed the live pricing calculator with an iframe which was pretty easy, however, I really want to style it as it does not look good at all. Alex, is there a way to do this with just CSS from within RTD and are there labels for stuff? I could make this look really nice if that was possible.

Again, not sure what file to edit to change the layout of how things are placed on the actual product page. Would be awesome if I could get some direction with that.

THANK YOU SO MUCH FOR THIS PLUGIN!!!! A LIFE SAVER!!!

I have to alert about one thing:
I can't reply to your files-related questions because I don't know much about Wordpress myself (yet).
This plugin was made by using the API, so it's not part of the main RTD system. And the developer following this... is not me

But I can reply about main RTD related stuffs.
About styling the instant pricing, as the verison using is an embeddable module, you can style it from the Styles Setup area, by using the CSS FOR EMBEDDABLE MODULES link.
As per text labels, for instant pricing almost everything should be available in admin panel already.

The input data for the option for fonts, colors, templates are as follows

table header TEXT YOU WANT TO DISPLAY ABOVE THE TABLE
table swath width HOW MANY PIXELS WIDE YOU WANT THE ITEM
table swath height HOW MANY PIXELS HIGH YOU WANT THE ITEM
table numcolumns HOW MANY COLUMNS YOU WANT IN THE TABLE
table footer TEXT YOU WANT UNDER THE TABLE

The only tricky input is the live pricing used in the PRICE MATRIX TABLE - this comes directly from RTD - the input data works exactly like it does in RTD so go here to read about it:

MANAGE DEFINE PRODUCTS > drill down to a product > EDIT PRODUCT > near bottom of page is a button for HELP FOR LIVE PRICING

You can read it here too:
http://designer.realtimedesigner.com/admin/modules/helps.php?area=pr_config

Basically you are building some HTML with special codes to signify where RTD is to be substituted. Since the pricing matrix in RTD can be quite long and hard to follow for new eyes, you need to show only portions of the table and format it accordingly. Here's an example of a pricing matrix string:


[MATRIX]
size=6&colors=1&name=2'x3'
size=8&colors=1&name=2'x4'
size=10&colors=1&name=2'x5'
size=12&colors=1&name=2'x6'
size=14&colors=1&name=2'x7'
size=16&colors=1&name=2'x8'
size=18&colors=1&name=2'x9'
[ENDMATRIX]

In this example we are creating a table with 7 rows to shows sizes 6-8-10-12-14-16-18 square inches/feet/meters. The numbers 6-18 are fed into the function. The name field is what is shown to the user in the left column. The number of column will match the number of price break columns you created in your pricing matrix... i.e 1 pc, 5 pc, 25 pc......

1pc 5pc 25pc 100pc
2'x3' $45 $40 $35 $30
2'x4' $55 $50 $45 $40
2'x5' $65 $60 $55 $50
2'x6' $75 $70 $65 $60
2'x7' $85 $80 $75 $70
2'x8' $95 $90 $85 $80
2'x9' $100 $95 $90 $85


You can use all the html tags and css customization to format these tables. There are lots of variations and input options to the live pricing special codes which allows you to create most any kind of price table you can imagine. You can even embed several calls to the function in one string to get more complex tables.


2'x3' $45 3'x3' $60 4'x3' $80
2'x4' $55 3'x4' $80 4'x4' $110
2'x5' $65 3'x5' $100 4'x5' $140
2'x6' $75 3'x6' $120 4'x6' $170
2'x7' $85 3'x7' $140 4'x7' $200
2'x8' $95 3'x8' $160 4'x8' $230
2'x9' $100 3'x9' $180 4'x9' $260

You can create the 3 tables side by side above showing a grid of banner sizes (using square feet) using something similar to the code below:

<table><tr><td>
[MATRIX]
size=6&colors=1&name=2'x3'&qtys=1
size=8&colors=1&name=2'x4'
size=10&colors=1&name=2'x5'
size=12&colors=1&name=2'x6'
size=14&colors=1&name=2'x7'
size=16&colors=1&name=2'x8'
size=18&colors=1&name=2'x9'
[ENDMATRIX]
</td><td>
[MATRIX]
size=9&colors=1&name=3'x3'&qtys=1
size=12&colors=1&name=3'x4'
size=15&colors=1&name=3'x5'
size=18&colors=1&name=3'x6'
size=21&colors=1&name=3'x7'
size=24&colors=1&name=3'x8'
size=27&colors=1&name=3'x9'
[ENDMATRIX]
</td><td>
[MATRIX]
size=12&colors=1&name=4'x3'&qtys=1
size=16&colors=1&name=4'x4'
size=20&colors=1&name=4'x5'
size=24&colors=1&name=4'x6'
size=28&colors=1&name=4'x7'
size=32&colors=1&name=4'x8'
size=36&colors=1&name=4'x9'
[ENDMATRIX]
</td><td>
</table>

Regarding how to style the CSS of WordPress - I'm afraid we can't offer any help just yet. We are still learning how to set up WordPress - here's our plan:

STEP 1 build API in RTD so external programs like WordPress can access RTD data (this step was done by Alex a few months ago)

STEP 2 build WordPress Plugin to read data from RTD to verify that the RTD API properly sends data to external applications. (done by myself and another coder (NOT ALEX) who knows the internal workings of WordPress)

STEP 3 build a nice WordPress interface utilizing the API data (not yet done - we are working on it ourselves but we are also recruiting WordPress users to tell us if there is anything needed to properly style the data into useful websites)

On our end, we are focusing on the functionality of the plugin to make sure it is the best possible. We are not yet to a point where we can say here's the best way to set up your WordPress. We're hoping others who have done their own site already on WordPress will be able to use the jumpstart given by the plugin to build some neat stuff.

We've got lots of ideas of added functions and options for the plugin - stay tuned. If you start styling your site and find that you need some tweaks be sure to let us know.

Mark

Mark and Alex,
Thanks for the responses as that should all help!

Mark, I am not sure you understand what I am asking. I understand how to style stuff, that will not be the issue. My question is - What file can I edit that is basically laying out the items into this newly created page. For instance, as of right now, the plugin basically just plops everything into the page. I want to be able to go into the actual code that plops this in and lay it out nicely like you are asking. What file is this where I can edit the PHP and HTML (not the CSS as I know how to do that). There is some file that is telling it to layout the divs and such in a certain way and I want to work with that. I hope that makes sense.

Everything else you guys mentioned makes sense and I will try and implement it shortly.

Basically, I am going to be creating a nice template that uses the best principles for a product page and will use it on my site and then will hopefully be able to replicate that file to share with the rest of the community so they will have a nicely laid out product page.

We don't know WordPress that well yet - it just seemed like the perfect fit to tap into RTD's power. YES - the plugin was made to "plop" the data into WP pages. I was hoping with your CSS you could move and restyle those "plops" all that you needed to. Perhaps you could educate me on what is needed in the pages so that we can give you ability to style it outside of PHP/js.

Some ideas are giving the "plops" a display order, tapping into size selection before launching RTD, launching RTD in the WP iframe rather than its own page (under devel now)..... The list goes on.

We're hoping that in the end, there will be just one official version of the plugin and it will have enough flexibilty that each user can do enough customization to it. Of course there will always be those on the edge that take it a bit further so the code is open source. Glad you're on board. Bring it on.

Mark

Mark,
Ok, I think I found the right file to edit to get the layout right. I believe the file is "savepro.php". This is where you could arrange items to get them layed out correctly. It is better to get it layed out in here and then to try and move stuff around with CSS because that can get really messy really quick. I would rather get my layout as template finished for all the products with this and then go back and style elements better with CSS. It will also be better for SEO as the markup will be better. This is going to take me quite a bit of time but I will keep you updated. Thanks again for pulling this together! This will make life so much easier once I figure it all out.

Great - keep us abreast if you find any changes are needed to the internals of the plugin - that we we will all be on the same page and benefit from each others work. If we get separate versions of the plugin out there, we will quickly not be able to apply advances the other person finds.

Mark

ok, here is what I have been able to do with the wordpress plugin.

Wordpress Plugin Example Product Page

Basically, the 3 things I had to edit were the CSS, savepro.php, and newTemp.php.

The one thing I cannot figure out how to because I don't know the proper coding is for the pricing calculator. The link I am using is: http://designer.realtimedesigner.com/mycustombandmerch/instant_pricing/index.php&system_products_categories_id=7256&product_id=36307&; and I don't know what I need to put in place of the category and product id numbers to change it dynamically. I am doing this from the newTemp file and not from the savepro where it originally was. Any help would be greatly appreciated. Once that is fixed I am pretty much done with my template for product pages.

One observation would be if you could add those comment codes within the source code so advanced users like myself could know where to select an entire section (such as background colors) if we wanted to change the order of the display. Other than that, it was just a bunch of trial and error to get it to look how I wanted. Let me know if you have any suggestions or comments!

Again, thanks so much to all those involved in creating this awesome plugin!!!

Nice Work.

I'll write up the details for the things you mentioned as soon as I return from Vegas.

We've done several updates to the code and have learned of some other things we can do in the future. The biggest change so far is the templates. If you go to www.signatopia.com (our test site) you should see the design templates at the bottom of the banner product pages. We now create a live link to the templates by category.

Stay tuned.

Mark

Looks good Hoodie!

Mark, what's the minimum version of wordpress this works with?

To be quite frank, I don't know. Since it really was meant for new installations it wasn't a concern. Our plugin creates entirely new product pages. We haven't addressed how this would work with your existing pages. What version do you use? What would prevent you from updating your WP?

As we do more with WP were finding even more opportunities to integrate it with rtd.

psgraphics,
Playing around with the files, I don't really see why it wouldn't work with most of the latest versions. But as suggested above, why would you not upgrade? Upgrading WP does not hurt your site at all unless you edit the core WP files (which you shouldn't).