How To Add A Note To WordPress Blog Post / Page

Published by Salwa Patel on


Eye-Catching Gif Notes & Topics Will Let User Read More On Your Blog. Shortcode would turn a simple note into attractive one. Learn how to add a note to WordPress blog post and webpages.

It took 2 days for me to find out a perfect design and appearance for every note that I would want on my blog’s sub-topic. May be I’m not that good at coding but still you would appreciate the outcome of note that you would definitely add to your blog post and pages. WordPress is a dynamic and customised system to enhance the development and designs of your website. Basically it has an option to ‘Insert Shortcode’. Initially I found it less-useful as for me it was a limited and less interesting tool. Well that was one of my mistakes that I jumped to the conclusion without actually studying the benefits and usage of shortcodes.

Normally in a post or text content we use H1, H2, H3 Headings….and further. Besides these I wanted to add a Sub-Topic Heading with Attractive, Responsive but Simple Design. Some of the popular bloggers don’t use this design because they might be unaware of beautifying notes and blog’s appearance in responsive way.

Designed Example of Sub-Topics / Notes / Titles:

  • For Topic/Note-Resolving Blog Issues

FoeTube Resolving Blog Issues:

  • For Topic/Note-Improving Writing & Reading Skills

FoeTube Improving Writing & Reading Skills:

  • For Topic/Note-Follow Digital Business Strategy

FoeTube Follow Digital Business Strategy:

How to create similar Sub-Topic or Heading Notes?
There come 2 methods to learn how to add a note to WordPress blog post or page. Follow mentioned one of the two methods in sequence manner as per given steps to add notes to your blog or web pages:


METHOD A — Paste Code

1. Upload Images – First, upload images that you would like to add to your Note (Format: JPEG, GIF, PNG, etc). Note: Save Image URL in word or other document.


2. Insert Shortcodes – Go to ‘Insert Shortcodes’ that would be enable in admin on your post or page. If you see no Shortcode option in your edit section of post or page; Add new Plugin ‘Shortcodes Ultimate’ by Vladimir Anokhin. Another plugin ‘Mojo Marketplace’ to get Shortcodes, Widgets and Themes for your website.

Plugin I have used is ‘Shortcodes Ultimate’.


3. Paste This CodePaste code in ‘Text’ section of the blog / page (not in Visual section) whereever you want to display the Note or Topic.

Make sure you use prefix and suffix of Note:

How to add a note to wordpress blog post

Full Sample Code

How to add a note to wordpress blog post
Code With URL :

4. Change Matter – Here in this code you may change note_color=”#f5f5f5” to any other hex; Change Text Color; Change radius (rounded corner of the box) =”3″ (between “0” to max “20”); Change Class; and Eventually Changing ‘Content’.

Content would include – Image URL, Alt Attribute and Style of the Note Box:


5. Settings – Further, crucial Text and Font Settings as:

   <font color=”white” size=”4″>

              Add Note To WordPress Blog Post? – By FoeTube


You may add a simple text as well as paste html code as per your requirement. This would enhance the appearance of the note.

METHOD B — Add Simple Text or HTML Code

1. Images Upload – Upload Images required

2. Insert Shortcodes – Install plugin ‘Shortcodes Ultimate’ as mentioned in Mehod A (2)

3. Search or Filter – “Note” or Filter By Type ‘Box’ –> Note

4. Select & Change – Select Background Color of the Box, Select Text Color, Change Radius and Class (optional)

5. Add Matter – Add Simple Text as your Sub-Topic or Sub-Heading or a Note you want to display

6. Preset – Save the structured format and settings you made to this note in 1st attempt. This is because it won’t be saved by default. Presetting seems to be helpful as it auto-fills the designing and content fields of the note; so you won’t waste time in adding or writing every note you make next time.


Use ‘Preview‘ option to see the appearance of the Note’s design you made; And hit Insert Shortcode button. Note: For Smart-Good-Habits, paste and save your own-made ‘Note Shortcode’ in word or other document for future use just in-case last design gets deleted or you forget the same.

Make a trial paste of the code and give your Title a Refreshing look as never before; in order to attract your readers to subscribe and interact.

Besides knowing ‘How to Add a Note to WordPress Blog Post’

Categories: +

Salwa Patel

A Digital Marketing Explorer Who Furnishes In-Depth Comprehension Of SEO Strategies, Social Media Trends, Inter-Niche Competition and Analysis. Formulates Over Vanquishing The Competing Foes! Overall, Content Strategist and Tradition Lover!

Leave a Reply

Notify of