Video Transcript
Hello, this is Tim Langeman, creator of CiteIt.net
a higher standard of citation
for news organizations, academics, and web authors.
Today’s video will demonstrate how to:
- install the CiteIt.net WordPress Plugin and
- how to use the plugin to cite a sample article on medium.com
About this Version:
This plugin is designed for the older WordPress version 4 editor.
If you would like to help me program a WordPress Gutenberg plugin, check out the GitHub ticket and send me an email.
1) How to Install the CiteIt.net WordPress Plugin
Let’s start by going to the CiteIt.net homepage and clicking on the “WordPress Plugin” link in the top navigation bar.
This will take us to the plugin page where we can scroll down and click on the blue “Download WordPress Plugin” button.
We should now have a CiteIt.net.zip file saved to our local Downloads folder. Let’s remember where this file is while we log in to our WordPress site and click “Plugins“.1
The next thing we want to do after we’ve clicked “Plugins” is click the “Add New” button to add the new plugin.
When we do this, we should see an “Upload Plugin” button.
(This plugin is not in the WordPress store yet because it is still in alpha testing mode while I work out the bugs.)
We next click on the “Upload Plugin” option which produces a screen that allows us to upload the plugin’s zip file by selecting the “Choose file” button.2
(TODO: get a Windows screenshot)
Now that we have the plugin’s zip file selected, we should see the CiteIt.net.zip filename appear next to the “Choose File” button:
After you’ve selected your file, the next step is to select: “Install Now“:
We should next see a screen offering us the chance to “Activate Plugin“, which we now click.
The plugin is now installed.
You should see the Plugin listed alongside your other plugins.
One thing to note is that the plugin version number is displayed in the bottom left of the Description.
This version number can be useful in telling you whether you are running the latest version.
If you decide that you no longer want to use the plugin, just click “Deactivate“.
- This will give you the option to delete all the files in the CiteIt.net folder and then delete the folder.
FYI: If you are wondering where the plugin is stored, here’s the directory structure of my Linux server:
2) How to Cite a quotation using the CiteIt.net WordPress Plugin:
Ok, so assuming that you’ve got the Citeit.net WordPress Plugin already installed, here is how you can use the plugin to create expanding citations.
a) First, go to the “Posts” section and click “Add New“.
b) Next, give the post a title and begin typing your post body:
Copy Quote from Article
c) In this next step, you locate the quote you want to cite and copy it into your blog post.
In my case, I already know the quote I want is in a medium.com article which I have open in another tab.
I switch to the other tab and select the quote I want.
I then copy the text to my clipboard, which on my computer involves “Right Clicking” and selecting “Copy” from the menu. (shortcut: Ctrl-C)
d) I next switch back to the blog post tab and paste the quote contents by “Right Clicking” in the space under the previous paragraph and selecting “Paste“. (shortcut: Ctrl-V)
I now have pasted the quote in my blog post and the next step is to turn this into a linked CiteIt.net expanding blockquote.
It is now time to take advantage of the Two new CiteIt.net custom buttons that the CiteIt.net WordPress plugin has added to the editor.
e) I highlight my quote and click on the “CiteIt.net blockquote” button.
f) This pops up a window that prompts me for the source’s URL, which in my case is the medium.com article.
The URL can be copied from the browser address bar:
g) so I switch tabs back to the medium.com article and copy the URL from the address bar (right-click-copy).
and paste it into the custom popup window: (right-click paste)
h) Click “OK” to submit the URL; and you should notice that the quote is now indented:
For the Technically Inclined
The following technical info is useful for troubleshooting:
(You can skip it if you want.)
This next bit of the video is For the Technically included to troubleshoot the code if something goes wrong. Don’t fret if the following technical detail goes over your head.
If you’re technically inclined, you can inspect the Html code and you will notice that a <blockquote> Html tag has been wrapped around the quote.
If you switch the editor to code view (Text), you can see the new blockquote tag in the Html code:
Notice the “<blockquote cite=”https://medium.com/..”> tag
For our purposes, the most important part of the code is that the blockquote has a “cite” attribute in which the medium.com URL is populated.
(End Technical Troubleshooting segment)
Publishing the Post
i) We can now switch back to visual mode by clicking on the “Visual” tab and clicking “Publish“
j) After a brief wait, we can view the post by clicking on the “Permalink” or “View Post” link.
Clicking on the Permalink will take us to the published post.
Viewing the Post
k) When we view the post, we should see the blue contextual arrows above and below the quote.
When we click on the arrows, we should see that the text between the quote expands to show the grey hidden context of the 500 characters before and after the quote.
Summary
If you have followed along with this video, you have now successfully:
1) installed the CiteIt.net WordPress Plugin and
2) created your first expanding contextual quotation.
More Information
As you get more comfortable with contextual blockquotes, you can expand your knowledge by:
- creating contextual popup windows with the second button — the “CiteIt inline popup” and by
- creating an expanding quotation for a YouTube video that has a transcript
Thank you for your interest in CiteIt.net
a higher standard of citation
for news organizations, academics, and web authors
CiteIt.net aims to change norms,
so next time you read or hear someone make an unsubstantiated quotation or claim, ask them:
Can you CiteIt? Can you CiteIt?
If you don’t have a WordPress site of your own, you can test-drive the WordPress plugin which is already installed on the demo.citeit.net website.↩
You can also drag and drop the file onto the “Choose file” button.↩