Author Archives: Fanghua Li

Building a website with WordPress and its plugins

As you may know, we are now constructing a website to vote for the hottest 3D models in Columbia University. As a newcomer in the field, I found the task nothing easy. Therefore, I feel obliged to introduce WordPress, or more specifically, its plugins, to you, for all the time they have saved me.

WordPress ( is a typical CMS, Content Management System. It’s amazingly convenient in the first place: just click the “download” button on its homepage and install it on your server, basically a well-behaving website that is ready to use. A lot of functionalities are already there: writing new blogs, posting them out, adding various media types, etc. If you are not looking for a really customized one, you’ve done most of the work you need.

In some cases you may not be satisfied with that basic installation. So here comes the most fascinating part of the WordPress system: the themes and the plugins.

The functionality of themes is straightforward: they allow the constructor to alter the appearance of the website. As you can imagine, one whose main objects are images must look very different from one who is serving articles. Choosing a theme is the first step I’ve done for my site.

What the plugins can do is much more diversified. The most important lesson I’ve learned in my using of WordPress is that whenever you need to add a new function, search for the corresponding plugins first. The plugins are contributed by users all over the world as they share their solved problems. Thus chances are that your problem is already solved by someone else. Here are the plugins I have used, maybe this can give you some intuition about how powerful the plugins can be:

1. Advanced Access Manager

When you are building your own website, it is very likely that you would like to assign different authorities to different users. WordPress itself has provided five roles, but sometimes they are not enough.

For example, we want to check each post before it is officially published, i.e. we would like to allow users to upload their models only after they have been checked by the administrator. Instead of going through all these source codes to customize my own role, Advanced Access Manager offers an administrating panel to assign the capability:

The solution to our goal is now as simple as unclicking the “Publish Posts” on the leftmost column.

2. Custom Content Type Manager

WordPress allows users to upload various media types to their posts, but in some cases we need more than that. Usually when one would like to create a new input type, a series of tasks are involved, including adding a new widget in the new post page, storing the new file type in the database, and display it correctly. The core of the website we are constructing now is the uploading and demonstration of 3D models(especially .stl file, which is not included in the original WordPress system, or any other current plugins.


As you can see, the plugin offers a panel of creating some other field types. In most cases you can get what you want by clicking the “create” button. In my situation, though it does not provide me with 3D model content type, it offers an easy-to-use interface of creating new widgets in the new post page, and more importantly, what comes with the content types it provides are several examples of how to create a customized one. And its documentation is really informative because the problem they are solving is now similar to yours. Thus, by reading its source codes, I get a much more intuitive insight about how to go through the whole process.

3. Featured Posts with Multiple Custom Groups – FPMCG

After you have got a certain amount of posts, it is necessary that they are classified into several categories for management purpose. This is exactly what this plugin does. What we want in our website is a little different: since the voting for the best 3D model is periodical, some models would still appear in the website as winners, but not available for voting any more. Therefore a banner on the corner of its thumbnail on the homepage denoting that they are already printed is needed.

In order to do that, FPMCG is helpful in that it provides a panel of managing the labels I would like to put on my banners, and has set a specific location to store them. What’s left for me to do is to find this location, extract the desired information, and design a banner style. As always, looking for the existing information is always much easier than creating some. So if your model gets this banner one day, don’t forget the plugin that makes it happen.

I hope that describing these plugins as powerful or even omnipotent does not make me seem useless. Nevertheless, they definitely saved me time and effort throughout the whole website-building process. Next time when you are enjoying the fun of WordPress, don’t forget these little helpers!

What does it feel like to be a non-native English programmer?

Just imagine if you are asked to code in Chinese.

The very first trouble is the vocabulary. Although many programing languages mainly consist of simple words such as if, else, and for, the languages that are used to make webpages are often more complicated to read.

This is part of the homepage of Lindt, just an example.

Suppose I have a certain standard of knowledge of English, then the majority of the code is accessible to me. However, the real problem lies in those purple pieces. What do div, ul, li mean? As for the native speaker, it is easy to make an educated guess, but for me, no way. It kills me to deal with these abbreviations which often occur in webpage editing languages. I need to look up to the related documentations to find out their meanings (whose link is located at the end of this article). And the obstacle becomes larger when it comes to writing the codes myself.

Apart from vocabulary, the logic in the programming languages counts even more. Chinese and English have little in common in their constructions of sentences. There is no grammatical tense or pluralize words in Chinese and Chinese tends to emphasize on the meaning of the sentence with little conscience on how the words are arranged. You can find some interesting writings regarding this topic at the end of this article.

Looking back at the html code above, it is possible for anyone, without any knowledge of programming, to recognize the first sentence <form name=”search_form” action=”search.php” method=”GET”> as “there is a form whose name is ‘search_form’, and is used for getting informations and might jump to the page ‘search.php’”.

Here is another example, a little piece of C code:

You may also notice that after executing the code, the variable sum would turn out to be equal to 1+…+10.

On the other hand, although not being popular, people are developing programming languages in Chinese. Here is an example:

However, this is mainly just a translation from the corresponding English code, i.e.

And the majority of the code does not make sense to ordinary Chinese reader.

In fact, all of the codes we have seen here is human-readable, and must be transformed into machine-readable codes before actually executed. And as the machine-readable code is in English, it would always be weird to present the human-readable ones in Chinese. Nevertheless people in China are still working on developing their own programming languages, and here comes one of them which is made of classical Chinese:

Wiki also has a document of Chinese programming languages, check if you are interested:

Below are some guides for one who is curious about “div”, “ul”, and “li”:

  • “div”:
  • “ul”:
  • “li”:

And here are some articles of the difference between English language and Chinese language you might find interesting:

  • Wikipedia has an article regarding the mix and match of the two languages:, which has attracted many Chinese people’s attention for a while.

JSC3d – What we are using to show 3D Models

Not until I started working on this 3D model voting website did I find out that there are so many people building various tools in this field. There are thousands of websites out there, providing millions of 3D models to anyone who are in the need. Basically, you can get access to any models of any themes whenever you want.

However, most of these websites share the same problem: although what they offer are 3D models, what they present on their pages are 2D images. This is the most common way they demonstrate the models:

Face the reality, dude. You have determined yourself to pay $119 for a single model, and the fact is that you would not get the true 3D preview of it until you give them the money.

So here comes the amazingly simple solution, which is also being used in our website, JSC3D, whose homepage is

A rough demo of it is available on my homepage, . This is an open source project which enables people to present their 3D models in the real 3D way, as user can rotate and zoom in or out the model when viewing. The most fascinating part of this project is that it is really straightforward. It is entirely coded in Javascript, meaning that no other tools or plugins are required for you to view the models or build your own website on it.

What's more? Even the source code is simple! You do not have to read through all the documentations to find the way to use the technology. The modification can be applied mainly on the source code of the webpage, regardless of the back end supports.

On the other hand, there are some drawbacks about this project. The most important aspect is that it only supports two kinds of file formats, .stl and .obj, which means that models made by many mainstream softwares cannot be directly applied. The good news is that the majority of these softwares have the option of "save as .stl". So in our coming website we would probably ask our user to upload .stl files only. Sorry for that.

Anyway, JSC3D provides a rather ideal way to present true 3D models on webpage. Please refer to our coming website to see its application.