WordPress Mini Program Open Source Version Installation and Usage Tutorial

WeChat Mini Programs are becoming popular. So, can we use WordPress to build a WeChat Mini Program? The answer is definitely yes, and you can even use open-source WordPress Mini Program code to build your own blog mini program for free. First, here's a demo. Scan the QR code below with WeChat to view it.

Prerequisites for Building a WordPress Mini Program

A registered domain name and a WordPress website that has already been set up

If you don't have a domain name or website, you can refer to the articles Naiba wrote earlier about registering a domain name and building a website. Note thatThe website must be filed for record. How to Choose a Domain Name for Beginners Building a Website Steps and detailed tutorial for beginners to build a website

Enable SSL access for the entire website

You can easily add SSL to your website either in Baota Panel or using the LNMP one-click installation package. If you don't know how to configure it, you can contact Naiba for help. WeChat: vv15_zhi

Server environment

Installing the WordPress mini-program requires a minimum PHP version of 5.6, with PHP 7.2 recommended. Beginners can use Baota Panel for one-click installation.#WebsiteBuilding# Beginner-friendly Baota Panel setup tutorial

WeChat Mini Program account

Just go to https://mp.weixin.qq.com/ to register an account.

WordPress WeChat Mini Program support plugin

在WordPressSearch for 'REST API TO MiniProgram' in the backend plugins and install it.

WordPress Mini Program Plugin and Website Settings

Website permalink settings

First is the website settings. The WordPress mini-program author recommends using a pseudo-static format like /%category%/%postname%.html.Using this permalink format enables internal link navigation within the mini-program. Other formats are not currently supported.If your website has been live and operating for a long time, do not modify your permalink structure, as it will affect your website's SEO performance.

Mini-program plugin settings

Obtain the AppID and AppSecret from the WeChat Official Platform backend. The specific location is: Development -> Development Settings -> Developer ID. Merchant IDs are only for enterprise use; individual users cannot use them, so leave them blank.

Obtaining the homepage slider article IDs for the mini-program

The homepage slider article IDs for the mini-program are the articles you want to display in the homepage slideshow, as shown in the red box in the image below:Method to obtain the article ID: In theWordPressbackend, go to Posts -> All Posts, hover your mouse over the edit button of the article title you want to use, and the number in the address bar URL is the ID.If you need to set multiple articles, separate the article IDs with English commas.

Comments and default poster address

If you need to enable comments, it is recommended to also enable the comment moderation feature. The default poster address is the poster image used when a published article does not have a featured image set. If many articles on your website lack featured images, it is recommended to install theWordPress Random Featured Image plugin

WeChat Official Account Backend Settings

Server domain settings

In Development -> Development Settings -> Server Domain, fill in the domain name you need to use.Note: For the downloadFile legal domain, please fill in your website's domain, the domain used by your website's CDN (if any), and wx.qlogo.cn.

Message template settings

In the WeChat Official Platform backend left menu: Features -> Template Messages -> Personal Template Library -> Add. Add two message templates: „Comment Reply Notification“ and „Reward Success Notification“.

Modifying the WordPress Mini Program Source Code

Import Mini Program source code

Download the WeChat Mini Program Developer Tools,Download Linkinstall it after downloading. Download the WordPress Mini Program source code,Download Linkand extract it after downloading.When creating a new Mini Program project, select 'Import Project', write your own project name, and choose the directory of the previously extracted Mini Program source code folder. Fill in your own AppID.

Developer Tools Interface Introduction

By default, after opening the Mini Program source code, you will see the following interface.The left side is the preview interface, the upper half of the right side is the source code window, and the lower half is the error information window. Pay attention to the prompts in the error window.

Modify Mini Program Configuration Information

Open the utils-config.js file in the source code window. You need to modify the content highlighted in red in the image below.The author has commented on the function of each item; just modify them according to your needs. var ABOUTID = 1136; If your website does not have an About page, you need to create one yourself by going to WordPress Admin > New > Page. Then enter the introduction of your website in the content and publish it. Get the page ID (the method is the same as getting the article ID above, but look for it in the Pages section). Fill in the encouragement message and reply message templates with the ones you created earlier.

Set downloadFile Legal Domain

This is a key point; it needs to be consistent with what you filled in your WeChat Official Account backend. The format is as follows:

var DOWNLOADFILEDOMAIN = [
  { id: 1, domain: 'blog.naibabiji.com'},
  { id: 2, domain: 'img.wordpressjc.com' },
  { id: 3, domain: 'wx.qlogo.cn' },

];

Fill in the domain according to your actual situation. Here, I have a CDN acceleration domain (the one with ID 2). Save the code (CTRL + S), and you should be able to see the appearance of your website's Mini Program on the left.

Modify Homepage Icon Navigation, Weimo, Enterprise Edition, and other information

The navigation icons in the image above are also modified in the config.js file, right below the code for setting the downloadFile domain. Modify the name by changing the value of name: 'Weimo', and modify the image by changing the corresponding picture in the local folder. The author's comments explain the links. If you want to achieve a click-to-jump to a category page like the Naibabiji Mini Program, the code is as follows:

{ id: '1', name: '建站知识', image: '../../images/websitepng.png', url: '../../pages/list/list?categoryID=141', redirecttype: 'apppage', appid: '', extraData: '' },
  { id: '2', name: '奇技赢巧', image: '../../images/jiqiao.png', url: '../../pages/list/list?categoryID=142', redirecttype: 'apppage', appid: '', extraData: '' },
  { id: '3', name: '软件分享', image: '../../images/softw.png', url: '../../pages/list/list?categoryID=140', redirecttype: 'apppage', appid: '', extraData: '' },

Note: The image in the code above is my own modification. For the method to extract the category ID, refer to the article ID extraction method mentioned earlier. The author defaults to 5 icons; I deleted two and only used 3. Modify according to your actual situation.

Modify the Ranking List and WeChat Mini Program two image navigations

The file to modify is located at pages-index-index.wxml, below line 72. Modify the name yourself. If the link url is to jump to a specific article, enter \/pages\/detail\/detail?id=864 (ID is your own article ID). The background images are in pages-index-index.wxss, lines 184 and 195, referencing Weibo image hosting pictures. It is recommended to modify them to your own linked images.

LOGO Image Modification

Directly modify the corresponding image in the local source code folder.

Modify the Mini Program title text, default is „Shouwangxuan“

The WeChat Mini Program Developer Tools toolbar has a magnifying glass icon for search. Click it, enter „Shouwangxuan“, and modify the results that appear without an asterisk (*). Content with an asterisk will not be displayed whether modified or not, as it is commented out.

Modify Other Content

For other modifications, such as styles, you can use the search function to find and then modify them. More advanced modifications like reworking the template are likely difficult for those without a foundation in web template creation; it is not recommended for beginners to attempt arbitrarily. Finally, thanks to Shouwangxuan for open-sourcing the WordPress Mini Program. If your enterprise needs a WeChat Mini Program with more comprehensive features,Please click hereto get the commercial version of the WordPress Mini Program, which has more features and a more polished interface. If you don't understand the graphic tutorial, please check theWordPress WeChat Mini Program Setup Video Tutorial