Content Creator

Usage Guide

The nuts and bolts of making Prototyping Corner

This post is for authors of Prototyping Corner to demonstrate how to use the features of WordPress and the plugins installed. Examples will be shown along with how to use various components, and conventions when writing articles for Prototyping Corner

Conventions

Permalinks take the form: prototypingcorner.io/{category}/{post_name}. It is important to correctly set the category at the beginning of a new post. The post name should be the title of the post, less conjunctions (‘and’, ‘or’, etc). Shortlinks can be generated from bit.ly with the custom domain goand.dev/{short_link}

Excerpts and feature images should be set prior to publishing. The excerpt should briefly describe the post, while being captivating. Feature images should also be captivating and draw attention to the post. This image will be featured in an links to this post (i.e. social media links) and should accurately represent the post.

Once a post has been reviews and published, links from social media accounts should be created. These posts should include the excerpt, and feature images along with a traceable link through the link shortening service. Short links should include Google Analytics medium tracers, to assist in analyzing site traffic.

Short Codes

These short codes have been created for use in regular posts

Code Blocks

These code blocks pull their data from gists or similar repositories. The URL for these blocks should come from the raw output of a GitHub file or Gist. If highlighter.js does not automatically detect the language correctly, the language tag should be set with the correct value.

[sc name="code_block" title"<title>" description="<description>" url="<url>" (optional)language="<code_language>"]

GitHub Code

Loaded from GitHub project repository


    

GitHub Gist

More code loaded from GitHub


    

For smaller code blocks that are small enough to be included inline. Optionally the code language can be set. Multi line code that isn’t loaded from an external source can be set with a native WordPress code block with the additional ‘code’ class added under Advanced Options.
Note depending on the contents of the code, it may be required that the contents are properly html_entities escaped with a tool such as https://mothereff.in/html-entities.

[sc name="code_simple" code="<code>" (optional)language="<code_language>"]
int i = 100; // Some sample c#
$ echo $EDITOR

Download Block:

The download block is a full-width inline widget, used to promote the download of a file. This file would most likely refer to a zip file of the entire project source. The description should include the license under which the files are released (e.g. Licensed under the MIT license, you have access to all the source code and schematics to build your own version)

[sc name="download" title="<title>" description="<description>" url="<url>"]

Download Project Source

Licensed under the MIT license, you have access to all the source code and schematics to build your own version

MathJax LaTeX

To use MathJax, create a block of type Custom HTML and insert LaTeX code. To surround in a scroll-able block, encase MathJax in the following code

<div class="codebox"><div class="row" style="border-top: 0; overflow-x: scroll;">
MathJax LaTeX here
</div></div>
$$ \text{Substitute into formula for volume for }1 \leqslant x \leqslant 13 \\ \begin{align} V &= \pi \int_{1}^{13} \Big( 0.00003136x^{6}-0.00129764x^{5}+0.02336509x^{4}-0.1837937x^{3}+0.1310893x^{2}+3.68874x+4.2849 \Big)\,dx \\ &= \pi \Big[ 0.00000448x^{7}-0.00021627333x^{6} + 0.004673018x^{5} – 0.045948428x^{4} + 0.104961x^{3} + 1.84437x^{2} + 4.2849x \Big]_{1}^{13} \\ &\begin{aligned} &= \pi \Bigg( \Big(0.00000448\times13^{7}-0.00021627333\times13^{6} + 0.004673018\times13^{5} – 0.045948428\times13^{4} + 0.104961x\times13^{3} + 1.84437\times13^{2} + 4.2849\times13 \Big) – \\ &\quad\Big( 0.00000448\times1^{7}-0.00021627333\times1^{6} + 0.004673018\times1^{5} – 0.045948428\times1^{4} + 0.104961x\times1^{3} + 1.84437\times1^{2} + 4.2849\times1 \Big)\Bigg) \\ \end{aligned} \\ &= \pi\Big( 257.930667622 – 6.19274379667 \Big) \\ &= \pi\Big( 251.7379238 \Big) \\ &= 790.8580121 \\ \text{Rounded to 3 decimal places} \\ V &= 790.858\,cm^{3} \\ \end{align} $$

Native WordPress Content

Quotes

Intelligence is the ability to adapt to change.

Stephen Hawking

Embedded Social Media Posts

Layout Elements

Content Creator

Yes, I’m going keep reusing this image


Thisis
atable
Withrows
This is a verse block.

Cover an image


Content Creator
Just an image

A gallery


Some video

This has been set to autoplay and loop since it is a very small file and has no audio.


And that’s that