An expansive guide to writing and formatting on the idobi.com website.

1.0 – Shortcodes

2.0 – General Do’s & Don’ts

3.0 – Styles

1.0 – Shortcodes

Shortcodes are custom tools for formatting elements and content in making WordPress posts. We’ve developed a number of these custom shortcodes for the site.

For readability on the site, the article container cannot exceed 640px wide, in order to keep text lines from being too many words long, causing the reader to lose track of their place. On larger screens such as laptops and desktop computers, this leaves a large amount of empty space along the gutters of the articles. Shortcodes can be implemented to include special content that is responsive to the screen size, and can allow items such as block quotes, images, and embedded elements to expand past the limited text size, creating a much more appealing experience for the reader.

1.1 – YouTube Embeds

Use this shortcode when embedding a YouTube video to make the video expand to the full width of the page. Within the shortcodes, use the embed code, accessible via a video’s page on YouTube by pressing “Share” below the video. Pick a large video size, such as 1280 x 720.

The Code:

[youtube] <iframe width="1280" height="720" src="https://www.youtube.com/embed/3hbcBrsUuz4" frameborder="0" allowfullscreen></iframe> [/youtube]

The Result:

1.2 – Images

The shortcode imgright creates an image that is 50% of the width of the page. imgleft creates the same element, aligned to the left of the page. Both of these shortcode elements work best when placed in longer articles with lots of text, because they have padding above the image to separate it from the text. The images expand past the 640px text width limit.

The Code:

[imgright] <img src="https://i.ido.bi/assets/lights-bokan-2015.jpg" alt="Lights 2015" width="1536" height="1058" class="alignnone size-full wp-image-46"> [/imgright]

The Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut felis ornare, interdum justo in, convallis neque. Mauris porta neque quis commodo sollicitudin. Phasellus ante quam, ultricies et enim eu, tempus fermentum magna. Vivamus in sem ac felis ultricies dignissim non in mauris. Ut interdum, lectus et consequat pulvinar, leo nibh blandit purus, quis luctus nulla risus dictum quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vulputate urna vitae turpis tempor, ac feugiat velit ornare.

The Code:

[imgleft] <img src="https://i.ido.bi/assets/lights-bokan-2015.jpg" alt="Lights 2015" width="1536" height="1058" class="alignnone size-full wp-image-46"> [/imgleft]

The Result:

You can also include captions with images. WordPress has built in caption options when adding images, and you can utilize this then put your shortcode tags around it to have more control over the image’s size and alignment.

The Code:

[imgleft][caption id="attachment_236" align="alignnone" width="3091"]<img src="https://i.ido.bi/assets/the-used-2013.jpg" alt="The Used (2013)" width="3091" height="2302" class="size-full wp-image-236" /> testing captions 123 actually i need two lines or more so i'm going to keep writing in hopes that this text extends all the way to the second line here[/caption][/imgleft]

The Result:

[caption id="attachment_236" align="alignnone" width="3091"] The Used (2013)

testing captions 123 actually i need two lines or more so i’m going to keep writing in hopes that this text extends all the way to the second line here[/caption]

1.3 – Blockquotes

Blockquotes or pull-out-quotes can be utilized as well.

The Code:

[blockquoteleft] I'm not superstitious but I am a little stitious. [/blockquoteleft]

The Result:

I’m not superstitious but I am a little stitious.

The Code:

[blockquoteright] I'm not superstitious but I am a little stitious. [/blockquoteright]

The Result:

I’m not superstitious but I am a little stitious.

The Code:

[blockquotefull] I'm not superstitious but I am a little stitious. [/blockquotefull]

The Result:

I’m not superstitious but I am a little stitious.

The above shortcode functions the same as using the built-in blockquote tags in the WordPress editor.

2.0 – General Do’s & Don’ts

WordPress has a lot of ins and outs, but there are some things you can do to really help our site!

When adding images

Use a recent, large, high quality image. You can use Google Images and search “band name 2015” to find a recent image if you can’t find one on the band’s Facebook. To find a high quality image, after searching for the image, press “Search Tools” -> “Size” -> “Large”

Complete the “Title”, “Alt Text” and “Description” fields when uploading an image. This is important because it helps search engines find our website.

When naming posts

Rename the URL when possible! Naming the URL accurately to the content and eliminating superfluous words helps improve search engine optimization and help find the correct content.

https://idobi.com/2015/10/08/against-the-current-release-music-video-for-talk/ â€Ž

Rename to:

https://idobi.com/2015/10/08/against-the-current-music-video-talk/ â€Ž

3.0 – Styles

With basic HTML, you can enrich the page with a lot of cool content. Here are some basic styles and how they look on our site:

Writing Guide

Table of Contents

1.0 – Shortcodes

2.0 – General Do’s & Don’ts

3.0 – Styles

1.0 – Shortcodes

1.1 – YouTube Embeds

The Code:

The Result:

1.2 – Images

The Code:

The Result:

The Code:

The Result:

The Code:

The Result:

1.3 – Blockquotes

The Code:

The Result:

The Code:

The Result:

The Code:

The Result:

2.0 – General Do’s & Don’ts

When adding images

When naming posts

Rename to:

3.0 – Styles

<h1> – Where are the turtles?

<h2> – I am Beyonce always

<h3> – I am not to be truffled with

<h4> – I don’t even consider myself part of society

<h5> – Well happy birthday Jesus, I’m sorry your party’s so lame

<h6> – The worst part about prison was the dementors

Table of Contents

1.0 – Shortcodes 2.0 – General Do’s & Don’ts 3.0 – Styles

1.0 – Shortcodes

1.1 – YouTube Embeds

The Code:

The Result:

1.2 – Images

The Code:

The Result:

The Code:

The Result:

The Code:

The Result:

1.3 – Blockquotes

The Code:

The Result:

The Code:

The Result:

The Code:

The Result:

2.0 – General Do’s & Don’ts

When adding images

When naming posts

Rename to:

3.0 – Styles

<h1> – Where are the turtles?

<h2> – I am Beyonce always

<h3> – I am not to be truffled with

<h4> – I don’t even consider myself part of society

<h5> – Well happy birthday Jesus, I’m sorry your party’s so lame

<h6> – The worst part about prison was the dementors

1.0 – Shortcodes

2.0 – General Do’s & Don’ts

3.0 – Styles