Tag Archives: WordPress.com

WordPress.com – create a custom tag list widget

I never really like Tag Clouds. Just from the UI point of view, making tags big and small is just chaos and ugly. WordPress.com free or personal plan don’t allow you customize the CSS so this is a hacky way to get around it.

Unfortunately, this way doesn’t automatically generate the list and it takes a lot of manual processes to maintain it, but you can do this. Note, it requires you a bit of knowledge in CSS and Javascript. I’ll try my best to walk you through.

Anyways, let’s get started. Here are the 4 steps to get the following result:

Continue reading →

WordPress.com – Emoticons

The difference between Emoji and Emoticon is that Emoji are made up of keyboard characters and Emoticon is the icon image. Emoji comes from Japanese which is 顏文字, meaning words/characters that have expression. ツ

Still confused? Here’s a little trick:

  • Emo-ji: JI is 字 (character)  => : D
  • Emo-t-icon: ICON => 😀

Now you know the difference. Let’s take a look at what emoticons WordPress.com provides. (Remember, emoticons are the ones that turn into little icons).

🙂 :) 😉 ;） 😀 :D >:D >:D
😦 :( 😥 :'( 😐 :| :/ :/
😮 :o 😛 :P 😡 >:( o_O o_O
😎 8-） ^^’ ^^' ❤ <3 😕 :?

Continue reading →

Posting Source Code on WordPress.com

To post some syntax highlighting code on WordPress.com, you should switch to Text mode and then only need to surround it with code-block like so:

[code]
    your code here
[/code]

The following is directly copied from the documentation page [1]:

  • autolinks (true/false) — Makes all URLs in your posted code clickable.
  • collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts.
  • firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  • gutter (true/false) — If false, the line numbering on the left side will be hidden.
  • highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19”.
  • htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Only work with certain code languages.
  • light (true/false) — If true, the gutter (line numbering) and margin (see below) will be hidden. This is helpful when posting only one or two lines of code.
  • padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
  • title (string) — Set a label for your code block. Can be useful when combined with the collapse parameter.
  • language (string) — Set the language for syntax highlight of the code block. Default to text
actionscript3
bash
clojure
coldfusion
cpp
csharp
css
delphi
diff
erlang
fsharp
go
groovy
html
java
javafx
javascript
latex (you can also render LaTeX)
matlab (keywords only)
objc
perl
php
powershell
python
r
ruby
scala
sql
text
vb
xml

 

Reference:

[1] WordPress.com. Posting Source Code. Retrieved June 09, 2018, from https://en.support.wordpress.com/code/posting-source-code/

How to show posts with text widget when on certain category in WordPress.com

So you may or may not notice from my site that there is a text widget that lists all the posts if you are reading certain posts that belong to a category. It doesn’t show up on all pages. For example:

Notice that the text widget on the left doesn’t appear on every page. The widget only showed up because the post currently belongs to that category.

Here’s how you set it with 5 simple steps!

Continue reading →