To install this plugin you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex.
Extract the zipped package downloaded from CodeCanyon to your desktop, in the extracted package you will find tcwp.zip file which is the WordPress plugin.
You can install the theme in two ways:
FTP: Extract tcwp.zip file and upload the extracted folder to /wp-content/plugins/ folder on your server.
WordPress: Navigate to Plugins > Add New > Upload page. Select tcwp.zip file located in the 'TCWP' sub-directory of your download package. Press the Install Now button to upload and install the plugin.
After uploading the theme, you have to activate it. Navigate to Plugins page to activate the theme.
TCWP is an extremely powerful plugin, but at the same time, still very simple to use. There are a few things that you need to setup upon installation.
All the screenshots will be accessible in the '/steps' folder in the download package in higher resolution (so that they can be more clearly seen).
Please note that the comments are for the screenshot below them.
Starting at the beginning, when you have uploaded tcwp.zip to your Wordpress site, you will see the screen below (as is the case for all Wordpress plugins). If however, you uploaded TCWP via FTP, then this screen will not apply to your setup.
Now, simply activate the plugin by clicking the 'Activate Plugin' link. (If you uploaded via FTP, then simply go to your plugins tab and click the 'Activate' link by the TCWP listing).
Upon activation, you will see that a new admin menu item has been created. (See below).
Click on the new menu item to bring up TCWP's configuration panel.
This is where you can set the global defaults which will be used in the widespread creation of Twitter Cards across your Wordpress site.
The first option is simply a master switch: check the box to remove all Twitter Cards, or leave uncheck to allow Twitter Cards to be created.
The second option is very important, as this value will be used in every single Twitter Card created. This will be the Twitter account which you want to be associated with the website itself. For example, by default it will take the value of 'InfinityCoding', the Twitter account of InfinityCode.
The third option is the value you want the creator of Twitter Cards to default to. This is more personal, and so I have used 'harribellthomas', which is my personal Twitter account. This is how this value differs from the one above. Please note that you can control this value for each individual post on their own edit page. This value is only used if that field on the post editor is left blank.
On the 'Home' tab, you can create a custom Twitter Card to be used specifically on your front/homepage. Please note that all these options are required, and will be reset to default if left blank.
NOTE: If you are using a Wordpress page as your front page, the Configuration Panel settings will override the values defined in that page's editor.
The first option is pretty self-explanatory: check the box to have a Twitter Card for your front page, or uncheck it to not.
The second option is simply a dropdown menu for you to chose the type of Twitter Card you want. (Please note that for some of the options, additional fields will be required, and so, they will appear when the relevant car type is selected eg. Player Cards).
The third setting is the title of the homepage's Twitter Card. By default, this will be set to your blog title, although you are free to change it to whatever you want.
The fourth option is the Twitter account you want to be set as the creator. This is exactly the same as other examples.
Fifth, we have a description of your blog for the Twitter Card. Although this is mainly for the Summary cards, please fill out. If left blank, it will be reset to the default value.
The fifth option is simply a dropdown menu for you to chose the type of Twitter Card you want.
For the sixth option, please upload an image to be used as the Twitter Card's image. I recommend an image width of over 600px and less than 2000px. A smaller filesize is preferred by the Twitter bot, so please keep an eye on that when choosing/creating an image.
In the third and fourth screenshot above, you can see the additional options which are revealed when the Product and Player Card types are selected.
For the player card, the first option which is revealed, 'Player URL' is the embed URL of the image to be embedded. For example, http://www.youtube.com/embed/cj8ZNgnzSSU . Please note that Twitter only accepts secure SSL/HTTPS connection for video embeds.
The next 2 options are pretty self explanatory: Twitter needs to know the width and height you want the video to be played at (in pixels, please).
The final 2, 'Player Stream URL' and 'Player Stream Content Type' are slightly more advanced. These are optional, and used to embed a video from a raw video file. The Stream URL is the link to the file, and the content type is for the video's encoding. For more information, visit https://dev.twitter.com/docs/cards/types/player-card and read the description of the 'twitter:player:stream:content_type' attribute. Again, please note that Twitter only accepts secure SSL/HTTPS connection for video embeds.
Next, the product card.
There are only 4 simple additional fields for this Card type. As part of the card, you are given two attribute spaces. You can set both the label and the corresponding data. For example, the Lable could be 'Price', and the Data value be $18. You can put any text you wish here.
UPDATE: In the 2.0.0 update the new app card type with deep linking capabilities was added.
You will see that if you select the 'App' item from the drop down, 10 options appear. Don't be put off by the number of them, they are quite simple to fill out.
There are 3 options each for iPhone, iPad and Google Play ( +1 for the iOS store conutry limiter).
For your iPhone app you only need to specify the ID to enable the Twitter Card. Example ID: 'id592447445'. The name and URL options are for deep linking capabilities. An exmaple of the deep linking URL is 'vine://v/93582sxlkjf'. For more information about this option please consult the Apple Developer community.
The iPad options are exactly the same as the iPhone's. In many cases these details may be identical (if your app is universal). The reason why 2 distinct options are required is in case you have different iPhone and iPad versions of your app.
The App Store country option is optional, but can be used if your app is only available in a certain country. Simply specify the 2 letter country code of your app store to make this card country specific.
The Google Play options are pretty much identical the the iPhone and iPad's. An example of an ap ID is 'co.vine.android', and an example deep link, 'http://vine.co/v/93582sxlkjf'.
UPDATE: In the 2.0.3 update a new option was added to the general settings, 'Use WooCommerce Price and Stcok for Product Cards'. If selected, by default all WooCommerce product items will generate a product card with the price and stock as its data. This can still be overriden by defining values in the meta box in the editor.
The following instructions will be demonstrated using the default 'Post' post-type, but everything will be relevant for all post types.
The following screenshot shows how the TCWP metabox will appear by default on all new posts.
The first option will disable the Twitter Card for this post if checked.
The next option allows you to choose the type of Twitter Card to be used. (As with the configuration panel, more options will be revealed if a certain type of Twitter Card is selected).
Thirdly, you can specify a different author Twitter username if you wish. Remember to omit the @ symbol.
NOTE: If you leave this option blank, the default value saved in the configuration panel will be used.
The fourth option allows you to define a different description to be used for the Twitter Card if you wish. By default, TCWP will use the post's excerpt to generate this automatically. Leave blank to just use the post excerpt.
The fifth and final option is where you can specify a custom image URL if you don't want the featured image to be used.
NOTE: An image is ESSENTIAL. The Twitter Card will not be generated if there is not either a featured image or a Custom Image URL defined. This image will be used as the image for the Twitter Card.
Above is an example of a configured Twitter Product Card.
Well that was Easy! Wasn't it?
UPDATE: In the 2.0.0 update the new app card type with deep linking capabilities was added.
The setup for an app card is identical to setting one up as the home page card. Read the explanation here.
Using Twitter's Cards service requires you to register your website and it's configuration with their Developer Program. (Don't worry, its really easy!)
Visit this URL: https://dev.twitter.com/docs/cards/validation/validator
Once you are on the above webpage (make sure you are on the 'Validate and Apply' tab, input the URL of a post/page you have created a Twitter Card for. We will use the 'Hello World' post we set up previously in this case. Enter the URL and click go.
You should get a result similar to the one above. Don't worry about your domain not being approved. That's what we'll be doing next.
Possible errors here could be:
Permission has been denied by robots.txt : The occurs when an external plugin edits Wordpress's dynamic robots file, which regulates the movements of bots (including Twitter's). If you are consistantly having this error, and cannot find the plugin editing the robots file, please contact me through the support forum.
Image Timed Out : This is quite a common problem. This means that the image you have specified is quite large, and the tester tool is having trouble downloading it quick enough. Don't worry, as the card will still work, but I do recommend you try to decrease the filesize (and therefore loadtime) of your image. Try to refresh the tool a couple of times to see if it resolves itself.
Server Error : This is a problem with Twitter Developers itself, not your code. Try clicking refresh, and if the error continues, come back and try again in a couple of minutes.
If you see any other errors, please contact me for support on InfinityCode's support forum.
Click on the 'Request Aproval' button to continue.
You should be presented with the modal windows seen in the screenshot above. Fill out all the details relevant to your blog, and click 'Request Approval. If successful, you will see the window you can see above.
Within a couple of seconds (from experience, although it can take a couple of days) you will receive an email (to the email you have specified in the approval request), entitled 'Your Twitter Card is ready!'.
Test your URL again, and you should see that your domain has now been approved!
IMPORTANT NOTE: You will need to seek approval for each type of card (Summary, Photo etc). Simply repeat the described process for different URLs with different types of Twitter Card setup.
NOTE: After being approved, it may take a couple of hours for your cards to actually be generated on Twitter. So don't fret if it doesn't work straight away!
Here it is! Our Hello World Twitter Card:
You can view that actual tweet here: https://twitter.com/InfinityCoding/statuses/389114071452508160
TCWP comes with InfinityCode's Klein Updater, which allows you to update from your own Wordpress Dashboard, just as you would with any other plugin. (No more tedious downloading from CodeCanyon, and reuploading to your site!)
To Activate, you will need to have your Envato Purchase Code to hand. This can be found on your 'Downloads' page on CodeCanyon (see picture below - the process is exactly the same for TCWP, even though the screenshot shows how to do it for the Admin Infusion plugin.).
Once you have activatedTCWP as is discussed in the previous section, when an update is made available for TCWP, our inbuilt update framework will pick it up, and display the fact on your admin dashboard in the exact same way that plugins from the Wordpress Repository would. Simply follow the instructions to initiate the automatic update process.
Please note that as part of the update process, you will lose styling on your admin dashboard. Simply wait for the page to load, then click refresh.
TCWP is a very simple and easy to use plugin that gives you a very great amount of flexibility. If you feel that there are questions that I haven't answered, then please by all means contact me throught the Envato Marketplaces. If you like this plugin, then please give it a good rating. If, however, you are discontented in any way, then please contact me, that's what I'm here for. If you speak to me, then I promise that I will work personally with you to fix any problems and answer any of your queries, no matter what they may be.
Once again, thank you so much for purchasing this plugin. Any feedback would be great, and if you like TCWP, please give it a good rating so that others can enjoy it too.