Preface

Come to think of it, it's been almost exactly a year since I wrote the first post on my blog. Through more than a year of continuous learning and all kinds of tinkering, I guess I've just about graduated from the WordPress novice phase.

However, actually, for about a month before writing my first post, I was concentrating on "laying the foundation": supplementing the absolute most basic knowledge about building a website. In other words, I studied for a month just to basically set up the blog's framework to a level where it was barely presentable (since then, it has undergone at least 3 major revisions and countless minor revisions), and only then did I feel like starting to write posts formally~.

But why was the efficiency so low? Because I started learning completely as a pure novice in website building. How pure? I didn't know a single professional term, let alone any structural knowledge. Taking my current blog homepage as an example from my perspective back then:

If each red box in the image above counted as a knowledge point and required one or more steps to set up, I wouldn't even know which red boxes counted as knowledge points, let alone know the professional names corresponding to these red box sections. This led to a very troublesome situation: I didn't even know how to search, and I didn't know how to ask questions online. I couldn't just ask like this: "There's a website I saw and thought was okay, but I forgot to take a screenshot. Anyway, on the far left and far right of the website, there are several boxes from top to bottom: there's a calendar, a search function, some can be clicked directly, some even have a Sun Wukong avatar, and at the very top of the webpage, there's a horizontal row that can be clicked, but I don't know what it is. But I want to achieve that effect, how should I do it?" Well, would I get beaten to death if I asked a question like that?

Therefore, during this month, I read many articles introducing how to use WordPress to build a blog, piecing things together to finally associate website elements with commonly used professional terms, such as: themes, navigation menus, left (right) sidebar menus, categories, custom links, pages, posts, comments, archives, status updates, icon fonts, etc. (some of which I only figured out in the last two days~~).

Precisely because I have been through this stage, I know how difficult this period can be. Therefore, I hope that through this article, more friends who want to build their own websites with WordPress but lack the relevant basic knowledge can quickly get through this awkward beginner phase (I believe this entry stage has discouraged many friends, and even I almost gave up, because divergent learning without direction is too painful): at least knowing the various elements (components) of a website page, knowing the corresponding professional terms, knowing roughly where to configure them, and when encountering problems, at least knowing in which direction to look for solutions.

Therefore, this article takes a brand new WordPress site as an example, looking at "how to build a personal blog framework from scratch with WordPress" from the perspective of a complete beginner.

Note: For how to use the docker run format command to build a brand new WordPress site, you can refer to my other article:Docker Series: Using Docker to Set Up a Blog Slave Site Based on WordPress and Implement Regular Backups of Master-Slave Site Configurations, but for beginners, the docker-compose method is more user-friendly. There are tutorials for this everywhere online, just search for it. Of course, using the Pagoda Panel to build WordPress via source code is also fine~ In short, there are many options, just choose the method you are used to.

Using WordPress to build a blog framework

The strongest assistant for beginners: Themes

When we open the WordPress homepage for the first time, we can see an initial interface similar to the following:

Actually, as you can see, this interface still has the most basic functions: under the "New" menu, you can create new posts, new media, new pages, and new users; editing the site even allows you to directly start designing the entire website structure. However, because it is too basic and requires very solid relevant professional knowledge, it is very unfriendly to beginners.

So we need to use some tricks to make our subsequent website design simpler and more intuitive. It would be best if we only need to use the mouse to select "yes" or "no" to design the website~~.

So, is there such a trick? Of course there is, and the simplest one is actually to choose a suitable "theme".

Then what is a "theme"? In one sentence: A theme is where someone else has already designed the overall appearance of the website, including page layout, image display, and color matching, according to a certain style, and also provides visual customization options. You only need to choose styles and functional modules according to your preferences to generate a website framework in your favorite style.

This is simply a blessing for complete beginners. Surprised or not?

Argon theme: From installation to use

Choosing a suitable theme

But what kind of theme is considered a suitable theme? I think at least aesthetically it should match your preferences, and the default "page layout" and "function" options provided should cover your routine needs.

In view of the above requirements, I recommend the Argon theme. As for why I recommend the Argon theme, it's because it's the one my blog currently uses (so I'm familiar with it), and I started using it by following someone else's tutorial (when I knew nothing). Since I have only used this theme (this is the most crucial point), I recommend this one. Quite reasonable, right?

The Argon theme style is simple and elegant, very refreshing, and its built-in functions are also very complete. It is very suitable for beginners to use when starting to learn how to build a personal blog. Currently, I see many bloggers (including many high-aesthetic experts) who use WordPress to build blogs are using this theme. Most importantly, there are also many very detailed tutorials on using the Argon theme and numerous articles sharing optimization experiences online that can be referenced, so this article also uses this theme as an example for explanation.

---

Let's first look at what special features the Argon theme provides:

• Light and beautiful – Uses the Argon Design System front-end framework, with exquisite details, light and beautiful
• Highly customizable – Customizable theme colors, layouts (double-column/single-column/three-column), top bar, sidebar, Banner, background images, different backgrounds for day/night modes, background immersion, floating action buttons, etc., providing rich customization options
• Night Mode – Supports day, night, and pure black modes, and can automatically switch based on time or follow the system night mode
• Numerous Features – Tag and category statistics, author links, extra links, article word count and estimated reading time, article obsolescence information display
• Pjax – Supports Pjax no-refresh loading to improve the browsing experience
• Links – Supports using WordPress's built-in link manager for friend link management, supporting multiple friend link styles
• "Shuoshuo" (Status) Feature – Publish thoughts at any time and display them on a dedicated "Shuoshuo" page, also supporting interspersing Shuoshuo with homepage articles
• Comment Feature Extensions – Ajax comments, comments support Markdown, captcha, re-editing, UA display, whisper mode, email notification on reply, edit history viewing, infinite loading, and other features
• Many Features – Article directory, reading progress, Mathjax or Katex formula parsing, image zoom preview, Pangu.js text formatting, smooth scrolling, etc.
• Rich Shortcodes – Supports inserting TODOs, tags, warnings, tips, folding blocks, Github info cards, timelines, hidden text, videos, and other modules in articles via shortcodes
• Adapted to Gutenberg Editor – Supports visual insertion of blocks using the Gutenberg editor
• Multi-language – Supports Chinese, English, Russian, and other languages
• Others – Responsive, carefully optimized article reading interface CSS, switchable serif/sans-serif fonts, customizable CSS and JS, supports using CDN to accelerate static file access, SEO friendly, Banner typing animation, message board page, article footnotes, etc.

---

The project address of the Argon theme on Github is:GitHub Argon, which you can download directly. Friends who find it inconvenient to access Github can also download it from my blog's dedicated file sharing link:Invincible File Sharing, access password "blog.tangwudi.com".

Installing the Argon theme

"Dashboard" directly enters the backend management:

In the backend management interface (this is the most original and cleanest backend management interface), first click on the "Appearance" item to see the default content here:

As you can see, under the default appearance, there are only 2 items: "Themes" and "Editor" (mark this here, you can compare it with the content under appearance after installing the Argon theme later). The themes section contains 3 very simple themes:

Click directly on "Add New Theme":

Then click "Upload Theme":

Select the Argon theme package (argon-theme-master.zip) downloaded earlier to install:

Then you will generally encounter the following error:

This is because WordPress is developed using the PHP language, and php.ini is the main configuration file of PHP. It defines the global settings of PHP, including parameters such as upload_max_filesize and post_max_size. Among them, upload_max_filesize controls the size of uploaded files, with a default value of 2M, which exceeds the 5.5M size of the Argon theme zip package, hence the error. At this time, you need to first break through the 2M upload limit. For specific operations, please refer to the article:Tips and Tricks Series: Summary of Solutions to the Problem of WordPress Upload File Size Exceeding php.ini LimitThen re-upload the Argon theme zip package, success:

You can already see the Argon theme in Themes:

Next, click "Activate" in the red box to make the Argon theme the current theme:

What does the Argon theme bring?

First is the change on the homepage:

Doesn't it feel like the class has gone up a lot instantly? Let's look at the huge changes in the backend management page after enabling the Argon theme. Note the red boxes in the image below, which are all new items compared to the previous default interface:

These are the "visual customization options" I mentioned earlier in my article: "Someone has already designed the overall appearance of the website according to a certain style, including page layout, image display, and color matching, and also provides visual customization options." It is by relying on these customization options that newcomers can immediately start building their own blog framework.

However, I do not plan to introduce these features one by one in detail. After all, this article is just a "General Outline of Dugu Nine Swords". Besides, to explain it clearly is not something that can be done in one article; it would be enough to write another series of tutorials. Therefore, I only plan to introduce several basic concepts and the most common operations needed to build a blog framework.

Sorting out several basic concepts of framework design in the Argon theme

Menu

In WordPress themes, "Menu" is a very important concept. It refers to a collection of links displayed in the website's navigation bar, sidebar, or other locations. Menus allow users to easily navigate different parts of the website and access specific pages, categories, articles, or custom links. You can think of a menu as the navigation structure of a website, which determines how visitors move around and find content on the site.

Let's take my blog homepage as an example to show which parts are "menus":

There are 2 menus in the image above: the top navigation menu and the left sidebar author's personal links. These 2 menus are essentially collections of various "links" pointing to anything that can be represented by a link: categories, articles and pages, images, videos, audio of this site, or content of other sites. However, with the blessing of the Argon theme, if the link collection is placed in the "top navigation" menu position, it will be displayed as shown in the upper red box; if placed in the "left sidebar author's personal links" position, it will be displayed as shown in the left red box.

In addition to the top navigation menu and the left sidebar author's personal links menu, there are actually "left sidebar friend links" menu and "left sidebar" menu:

These 2 menus are also located above and below the "left sidebar author's personal links" menu. However, when I tried them, there was an issue with the displayed format, and they didn't look good, so I didn't use them. Generally speaking, the "top navigation" and "left sidebar author's personal links" menus are sufficient.

Categories

In WordPress themes, "Categories" is a common way of organizing content. Administrators can classify articles into different categories, and readers can directly enter from the category entry to browse and find content of the same category. Under a category, there can be direct content such as articles and pages, or other categories (if there are still categories under a category, then the upper category can be called a primary category, and the lower category can be called a secondary category).

In menus, categories can also provide a more intuitive hierarchical content display effect, taking my blog homepage as an example.
Categories can be nested under categories, for example, the "Tech Hall" section of my blog:

Categories can also contain direct content, for example, the "Other Features" section of my blog:

Posts

In WordPress, "Posts" are dynamic content types published on the website, usually used for blogs, news, updates, etc. Posts are arranged in chronological order, with the latest posts displayed at the very front. They are one of the most commonly used content types in WordPress, suitable for publishing time-sensitive content, such as news, blog updates, reviews, etc.

Taking my blog as an example:

The parts in the red boxes in the image above are all posts, and the default arrangement order is from top to bottom, from newest to oldest publication time (except for the pinned posts at the top).

Main features:

1. Time-sensitive: Posts are published in chronological order, so they are suitable for websites with regularly updated content, such as blogs and news sites.
2. Categories and Tags: Posts can be classified into different categories and tags, helping to organize and classify content, making it easier for users to find related posts.
3. Hierarchical structure: Posts do not have a hierarchical structure; all posts are equal and arranged in chronological order
4. Dynamic content: Posts are usually superseded by new posts over time, but they remain in the archives, and users can still find past posts through categories, tags, dates, or search functions.
5. Comment function: Posts usually come with a comment function, allowing readers to interact with the content and express their views and opinions.
6. RSS Subscription: Post content can be subscribed to via RSS (Really Simple Syndication), allowing users to receive the latest post updates in their RSS readers.
7. Display location: Usually displayed on the blog homepage or post list page, and can be filtered and sorted by categories, tags, time, and other conditions.

Note: The content I usually write is written in the form of posts.

Pages

In WordPress, "Pages" are a static content type, usually used to publish permanent content on a website. Unlike posts, pages are not arranged in chronological order, nor are they associated with categories or tags. Pages are typically used to publish information that is not frequently updated or needs to be retained for a long time.

Taking my blog as an example, the content belonging to pages includes "Shuoshuo":

"Archives":

"Message Board":

"Links":

And so on.

Main features:

1. Static content: Pages are suitable for information that does not need frequent updates, such as “About Us”, “Contact Us”, “Services”, “Privacy Policy”, etc.
2. Categories and Tags: Pages do not use the category and tag system. Pages are more suitable for independent, permanent content rather than dynamic content that needs categorization.
3. Hierarchical structure: Pages support a hierarchical structure, which means a page can be set as a subpage of another page, making it easy to organize and manage. For example, you can create a page named “Company Introduction” and add subpages like “Team Members” and “History” under it.
4. Do not display publication date: Unlike posts, pages usually do not display the publication date because their content is typically time-independent.
5. No categories and tags: Pages do not use a category or tag system, making them more suitable for non-blog type content.
6. Page templates: Many WordPress themes provide multiple page templates, allowing you to choose different layouts and designs for different pages.
7. Display location: Usually used for fixed parts of the website, typically linked in the website's main navigation menu or footer as part of the website structure.

Note: The Argon theme provides 3 page templates for common blog functions: Shuoshuo, Archives, and Message Board. Different types of themes provide different numbers of templates and functions.

Left sidebar

The left sidebar is a very important display part of the Argon theme, and it is also provided by default.
For the original version of the left sidebar, see the red box on the left of the default homepage, as shown in the image below:

And for the full version of the left sidebar, see my blog homepage:

Doesn't it look much more impressive?

Widgets

Widgets are customizable content modules in the Argon theme. Users can add these modules to the website's sidebar, footer, or other widget areas. These widgets can help you enrich the website's content and functionality, providing a better user experience, mainly including 3 types of widgets:

Among them, "Left Sidebar Widgets" and "Site Overview Extra Content" are mainly optimizations for the left sidebar. The right sidebar widgets will only appear if you choose the three-column display in the Argon theme. For the actual effect, see my blog:

Note: The options that widgets can provide depend on the plugins you have installed.

Additional knowledge: Icon Fonts

What are icon fonts?

Icon Fonts(Icon Fonts) is a technology that stores icons in font files. Unlike traditional bitmap icons, icon fonts use vector graphics, so they can be scaled as needed without losing quality, making them ideal for responsive web design.

Saying it this way makes the concept too abstract, so let's take my blog as an example:

In the images above, all the icons in the red boxes are icon fonts. This is also a feature I wanted for a long time, but at that time I didn't know what it was called, and I didn't even know what keywords to use to search (the search results were all favicon.ico, website icons, which were not the same thing at all), which left me anxious for a long time.

How icon fonts work

Unlike general images (including the favicon.ico mentioned above) loaded via URL, icon files are loaded asappears in the form of, as shown in the figure below:

The navigation label bar in the image above could originally only be filled with text and only display text. However, icon fonts can display icons in areas that originally could only display text. This is thanks to the previously mentioned "storing icons in font files": font files are not only used to render text characters, but can also contain icon fonts. These icons are stored in the font files as font glyphs. When the browser loads and renders these font files, it can display both text and these icons. This allows icon fonts to be easily controlled in size, color, and style through CSS, just like text.

The font source is referenced by CSS's@font-facerules, for example:

Through this rule, the browser knows that it should download the font file at the specified local path (or URL) and apply it to the corresponding text on the web page.

When the browser parses HTML and CSS files, it finds and loads the necessary font files based on the font definitions in the CSS. If the font file is hosted on a local server, the browser sends a request to that server; if the font file is hosted on a CDN, the browser sends a request to the CDN, and the same goes for icon fonts.

Note: Since icon fonts are considered "fonts", browsers will automatically load and render these icons to ensure consistent display across different devices. Therefore, icon fonts are widely supported by most modern browsers and have excellent compatibility.

How to use icon fonts

By default, WordPress does not have an icon font library (for example, ’FontAwesome' in the rule above is one of the most popular icon font libraries, providing thousands of free and premium icons), so it needs to be installed separately via a plugin:

Then you can immediately use Font Awesome's icon fonts. Its official website address is as follows:https://fontawesome.com/。

Suppose we choose one of the icons, such as the house in the upper left corner of the image above, and click into it:

Click on the image aboveto copy the icon address. Everyone, please mark this point, as we will use it later.

Practical guide: Using the Argon theme to build a beginner blog framework

Note: To reiterate, this practical guide mainly focuses on building the blog framework theme and does not involve too many technical details; otherwise, it would be impossible to finish writing.

Creating commonly used pages for a blog

In Argon, there are 3 page templates, namely "Shuoshuo" (Microblog), "Archives", and "Message Board". Let's create these 3 pages first:

In the same way, create the Message Board and Archives pages (selecting their respective templates). For the Message Board, make sure to enable discussion. The final page status is as follows:

Creating sample first-level and second-level categories

In the same way, create multiple subcategories:

The final categories are as follows:

Creating the top navigation menu and the author's personal link menu

Top navigation menu

Then add the previous 3 pages to the top navigation menu, at the same level as the demonstration primary category:


Then let's look at the actual effect:

It looks very similar to my blog now, doesn't it?

Author's personal link menu

For this, just add a few links as a placeholder, but first, you still need to create a new menu just like the top navigation menu:

In the same way, add a few other arbitrary links. The final result is as follows:

Creating widgets

Among the widgets, "Left Sidebar Widget" and "Site Overview Extra Content" are the most commonly used. Both of them enrich the left sidebar section. As for the "Right Sidebar Widget", because it must be paired with the "Three Columns" option of the Argon theme, and the three-column layout itself is not very aesthetic and not many people use it (except for me, though I am also hesitating, as it indeed doesn't seem very useful and is not very good-looking~), it is not covered in this article. We will simply use "Site Overview Extra Content" and "Left Sidebar Widget" as examples.

Then add a poem section, which can make you look very cultured:


You can adjust the display order of the added content. For example, I want the time progress bar to be below the poem:

Operate the "Left Sidebar Widget" in the same way, and just add a "Login/Logout" function. I won't demonstrate the process, and the final effect is as follows:

Note 1: As more plugins are installed in the future, there will be more optional content in the "Site Overview" and "Left Sidebar Widget" sections.

Note 2: These widget areas are just provided by Argon by default, which is generally enough. However, if you feel it's not enough, you can use block tools to add them yourself.

The finishing touch: Icon fonts

Having written up to this point, the basic framework of the entire blog has actually been set up:

Simple and elegant, it's quite decent. But, does it feel a bit too plain? You can also add a little embellishment: icon fonts. The text corresponding to all menu items can have an icon font added in front of it as decoration.

First, based on the previous introduction, find your favorite icon on Font Awesome's official website for a certain menu item, then paste the "address" of the corresponding icon font before the navigation label text of the corresponding menu item, and then save the menu. Taking the Google link as an example:

Use the same method to handle the navigation labels of other menu items. The final effect is as follows (I was lazy and only used two icon fonts, but you get the idea):

From this point, the framework is basically set up. Many other display options, such as background images, avatars, announcements, and displaying the admin dashboard in the Argon theme style, are all configured in the Argon theme options:

You can just try it out slowly on your own, and I won't say too much more (otherwise it would be another long article). Also, there are many configuration tutorials for the Argon theme online, which you can refer to.

Commonly used plugins

Let me say a few words about this issue, because indeed some plugins are particularly important for WordPress.

Anti-spam plugin "Akismet"

This is one of the two default plugins that come with WordPress. It is very useful. If you have enabled the comment function, you really need this:

WP Githuber MD

A plugin that provides full-featured Markdown syntax support for WordPress websites. I usually write articles directly in Markdown format using Obsidian, but WordPress does not support Markdown by default. After using this plugin, for the vast majority of articles that do not contain special characters, you can directly paste and publish the written Markdown content (if there are special characters, you still need to convert them to HTML).
Before installing the plugin, the interface for creating a new post in the backend looks like this:

After installing the plugin, it looks like this:

WP Mail SMTP

Enables WordPress to send emails (required by plugins or its own functions):

Font Awesome

This has already been mentioned earlier, so I won't repeat it.

These are the plugins that I believe WordPress needs to install at the very least to provide basic functions. As for other optional plugins, there are simply too many. There are several options just for SEO, and it's impossible to write them all down. Besides, not everyone needs them, so I won't mention them at all.

Note: Regarding the use of WordPress plugins, everyone should also be cautious. In the beginning, everyone might spend a lot of energy trying out the functions brought by different plugins. This is normal, and I did the same. However, although plugins are convenient, they can also bring vulnerabilities to WordPress. For example, after I used "TranslatePress" to make my blog support multiple languages, it started being heavily scanned for trp-ajax.php every day:

I checked, and it seems there are vulnerability issues with certain permissions on this page. The new version might have fixed them, but for friends who haven't upgraded to the new version in time, it is quite dangerous. Therefore, it's best to only keep essential plugins; for those that are optional, try not to use them if you can avoid it.

Afterword

WordPress involves too many things. In fact, it is entirely possible to write a series of tutorials (taking plugins as an example, it wouldn't be an exaggeration to write an entire article to introduce the features provided by a single good plugin). However, I am currently only at a semi-understanding level myself and can only give a general overview. I really don't have the ability to write a series of tutorials. Therefore, the knowledge points introduced in this article basically revolve around the major goal of "building a personal blog framework," aiming to help everyone quickly get through the WordPress novice phase. As for other technical details, you will need to continue learning in depth after you have set up your blog framework.

However, there are many WordPress tutorials online; a quick search will yield a ton of them. After all, WordPress is currently the most widely used CMS in the world (with over 60% market share, and even the official White House website was switched from Drupal to WordPress by the Trump administration in 2017). Therefore, by using WordPress to build your website, you can even brag that you are using the same technology as the White House website, and the key is that no one can say you are talking nonsense~.

As for themes, whether you use Argon or not doesn't really matter. If you don't like Argon, just change it to one you like. The configurations are mostly similar, it's just a matter of habit. This article only uses Argon as an example to demonstrate, after all, I am only familiar with this one. Of course, Argon itself is lightweight enough (the zip package is only 5.5MB, while I see some themes are 20-30MB, which probably have invincible features), and I really like its style.

However, for a blog, the most crucial thing is actually not how cool the theme is or how many features it has, but persistence: as long as the blog continues to exist and the content is constantly updated (regardless of what the blog content is about), there will always be like-minded friends who can find you in the vast ocean of the internet and walk with you.

Note 1: Actually, after completing these steps, from a certain perspective, you can also claim to the outside world that you have done some front-end work~~.

Note 2: Actually, I didn't really want to write this article at first (it's too troublesome to write, requiring so many screenshots, and as a deep-seated lazy person, I'm not really suited for this kind of meticulous work). However, considering that the article I am currently conceiving, with a name like “Building a Website from Scratch: Zero-Cost, One-Stop Solution,” indeed lacks content in this area, I had to reluctantly write it.