Category: Beginner
There must have been times that you wondered whether you could insert documents into your WordPress posts and even make them downloadable! There would certainly have been instances when you generated a graph or a pie chart in Excel, converted it into an image and inserted the image into your post. In this tutorial, I would take you through a step by step process, which would help you insert office documents and graphs in WordPress.
Summary:
For the first part of the post, we could concentrate on adding documents to your WordPress post. These include PDFs, Word files, XLS spreadsheets and PowerPoint slides to your WordPress posts. The plugin that we would use is called the Google Doc Embedder. Note that this does not require you to have the documents saved in Google Doc, it just uses the Google Doc document viewer to display the files in your server.
1. Embedding Documents:
Installing the plugin:
To install the Google Doc Embedder plugin, you can either head over to the plugin’s page on WordPress site, or search for ‘Google Doc Embedder’ in Plugins > Add New under your wp-admin directory.
After installation, activate the plugin and visit the settings page of the plugin.
Configuring the settings:
You can set the very basic settings here like the viewer type for instance. You can modify more options like setting the height and width of the document and whether to show the download link to all.
In the advanced tab, you can also enable Google Analytics and change options for plugin behaviour or backup and import.
Adding the documents:
Once you have fiddled with the settings and finalized them, head over to the media uploader by going to Media > Add New, upload a file.
Click on the edit button on the right once you have uploaded the file. Note the URL as shown here. You would need to visit the URL and get the actual URL of the file when you are embedding the document into your post.
You can add the file as a shortcode-
[gview file=”http://yoursite.com/path-to-file”]
Alternately, you can add media to your post by using the ‘Add Media’ link while adding or editing WordPress posts or pages. Upload the file that you want to add, and the link is generated once you upload it.
By using only the file attribute, we are using the default values for all other attributes. However, in special cases, we can override these attributes too.
Let me emphasize again that the name of this plugin is misleading. There is no Google Docs involved in the use of this plugin and it just shows you media files that you have uploaded in your server.
2. Embedding charts:
The second part of this tutorial focuses on creating bars and charts within WordPress posts. There are a lot of plugins available online for making charts and displaying them in WordPress posts, and most of them are not so user friendly. Some of them involve adding data in short codes all over your post to make the chart work, that makes them really cumbersome for the user. You would do well to stay away from those plugins.
What you actually need is something that allows you to add data sources in a far more user friendly manner and create interactive charts which are not just plain images but show some interactivity to prove popular to your readers too!
Installing the Plugin:
For this purpose, we would install the plugin Visualizer. You can either install it through the plugin’s page on the WordPress site or search for Visualizer in Plugins > Add New. After installation, activate the plugin.
Adding charts by adding data from the web:
After doing so, to test the usability of the plugin, you would need to add a new post or edit an existing one. Click on ‘Add Media’ and on the left tab, select Visualizations. Naturally, there are no already created charts in your system. On clicking ‘create new’, you are taken to a new screen asking you what type of chart you would want.
In the next screen, you are asked to upload a CSV file containing the data. You would have two options- upload one from your computer and the second option is to use Google Drive to populate the chart.
CSV stands for ‘Comma Separated Values’- nothing more, nothing less. Remember how you would make graphs and charts in Excel by selecting the range of values. Imagine the same data format, each cell separation working as a comma and each row being a new line.
For the first case where we import the data from the Web, go to drive.google.com and create a new spreadsheet. Enter the data that you want to see in a pie chart.
Once you have entered the data, go to File > Publish to the Web. Select Publish Now and select CSV from the options below. Once you have done that, select and copy the link.
Back to the Visualizations plugin, you would need to enter this link and click Ok. You would see that the graph gets updated automatically. On hovering over the graph, you can see the interactivity too.
In the next screen, you can make more changes to the chart. You can change the view of the chart, the colors, the legend and many more things. Once you are satisfied with the view, click Insert Chart to insert it into your post.
Adding charts by uploading a CSV file:
Adding a CSV file is very easy. The corresponding CSV for the spreadsheet that we created is the following-
Team,Points
Team A,4
Team B,6
Team C,9
In case you are using special characters, make sure that the comma separated values (or whatever was in those cells) are in double quotes. If you want a double quote to appear in the values, you need to add a backslash before the quote. For example,
“Name”, “Data”
“Neil Armstrong”, “4”
“Edwin \“Buzz\” Aldrin”, “3”
You just need to open a file in a text editor like Notepad, gedit, Sublime Text or VIM and save the file with a csv extension. Upload it as shown in the previous steps to get the same graph.
Changing the data in this way is very easy too. In case you are using a Google Spreadsheet, update your file and republish it in the web to see the changes in your chart directly.
You can manage your charts in Media > Visualizer Library. You can update charts here and they would be updated in your posts accordingly. In case you uploaded a CSV file, you could change it from there.
Adding charts to the sidebar widget:
You can add it as a sidebar widget too! You must have noticed that on adding the graph, a short code was automatically generated in your code. For example, in the previous example, the following short code was generated.
[visualizer id=”36″]
You can make a chart, copy its short code and put it as a widget. To do so, go to Appearances > Menus. Drag the Text widget and type in the short code.
The resulting sidebar would look like the following.
Note that I am reusing the same graph from the post and hence the legend is on the right, looking hideous in the process. You should modify the graph and put the legend either at the top or at the bottom of the graph.
There you go. Here’s hoping that this post helped you in adding documents and charts to your website and in turn, made your site more interactive and user friendly.
