Every now and then you would need to display the total post count in your WordPress application (website). There are several methods you can use for such a simple task, but can you tell the difference and choose the right method (function) which runs faster and consumes less resources? I’d like to share my findings with you in this post. Continue reading
Last time we just learned about Getting Attached Media For A Certain Post With REST API, now we should be ready for implementing this technique and fetching all attached images into a slider.
After this quick tutorial, you’ll have a Slick carousel showed in each post, when there are more than one image attached to the post. It will look like the following GIF animation:
In this tutorial I’ll be showing you how to add category archive pages to our AngularJS WordPress theme. Topics will be covered including:
- Get categories with WP REST API
- Display category links
- Create the route to category pages
- List posts in a certain category
- Replace the current category link with plain text to improve the usability
- Bonus: Display the featured image in posts list
- Bonus: Use JSON Formatter to improve the readability of JSON data and help you debug
Before we get started, I hope you’ve read some tutorials from my Building themes with AngularJS and JSON REST API series, so we can be on the same page later when we dive into the code. If you’re new here, I’ll recommend that you start from the first post in this series: Using AngularJS and JSON API in Your WordPress Theme, which is listed on the Resources page at wp-api.org. It will definitely help you to build a quick and dirty AngularJS WordPress theme, so please go check it out. Continue reading
When trying to get attached media for a certain post in WordPress with JSON REST API, I thought it would be something like:
But it didn’t work. So I turned to wp-api.org to find the solution. Continue reading
Page fragment caching is a must-have function for cache plugins like W3 Total Cache, it’s a shame that such functions didn’t get much attention.
W3 Total Cache answered the “How do I implement page fragment caching?” question in the Developers section in their plugin FAQ page:
First you need to define W3TC_DYNAMIC_SECURITY in your wp-config.php file. define('W3TC_DYNAMIC_SECURITY', 'somesecurestring'); Edit your templates with the following syntax to ensure that dynamic features remain so. Replace W3TC_DYNAMIC_SECURITY with content of the constant or use echo to print constant: Example 1: <!-- mfunc W3TC_DYNAMIC_SECURITY any PHP code --><!-- /mfunc W3TC_DYNAMIC_SECURITY --> Example 2: <!-- mfunc W3TC_DYNAMIC_SECURITY -->any PHP code<!-- /mfunc W3TC_DYNAMIC_SECURITY --> Example 3: <!--MFUNC W3TC_DYNAMIC_SECURITY --> echo rand(); <!--/mfunc W3TC_DYNAMIC_SECURITY --> Example 4: <!-- mclude W3TC_DYNAMIC_SECURITY path/to/file.php --><!-- /mclude W3TC_DYNAMIC_SECURITY --> Example 5: <!-- mclude W3TC_DYNAMIC_SECURITY -->path/to/file.php<!-- /mclude W3TC_DYNAMIC_SECURITY --> Be aware that WordPress functions will not be available.
The answer itself is pretty much clear except it forgot to mention a most important step: YOU NEED TO ADD ‘mfunc’ TO THE ‘Ignored comment stems’ SETTINGS.
Without this step you’ll waste 100 hours on testing the page fragment caching and never getting it worked. Thanks to WooThemes pointed it out and hope I can save someone else’s 100 hours.
Added on March 27:
After couple of days I found the fragment caching still acted weird. Sometimes it worked fine but sometimes didn’t. After some research I believe it’s related to the “Page cache method” I set.
The site I need to implement fragment caching is sometimes very high volume. So if I set the “Page cache method” to “Disk: Enhanced”, which is recommended by W3TC, the old cache files would be used while the new cache files are being generating. Read explanation here. Changed the setting to “Disk: Basic” can fix the issue.
The other thing to note is if you need to use WordPress functions in your fragment caching block, you should enable the “Late initialization”, which may increase response time.
Now the fragment caching finally worked on my client’s website. I highly recommend anyone who needs a powerful WordPress cache plugin, just go with W3 Total Cache. WP-Rocket is great but it doesn’t support fragment cache yet.
Changing the page title dynamically is an important feature in our AngularJS WordPress Theme. If you have checked some articles related to this topic, you might find it’s a bit hard to integrate those methods to our theme. There are two reasons:
We just moved the
#pagediv, that means the
titleelement is beyond the scope of our
app. Most of the tutorials use the
$scope.titleapproach to change page title, unfortunately it won’t work with our theme.
Most tutorials will predefine a title for each route, for example there are 3 files
c.html, and their titles are like
Page C. In such scenario it’s much easier to get and set the page title on
$routeChangeSuccessevent. But our case is a bit different that we’ll need to get a post from WP API first to know what the title is.
This post from stackoverflow gave me an idea to change the title with the global variable
document. Here’s the snippet I use to change the page title dynamically (line 7, line 14).
Note that I use
document.querySelector('title').innerHTML rather than
document.title, so special characters like HTML entities won’t be decoded. You can get full project files from the GitHub repo.
If you have any question related to my AngularJS WordPress theme series, just leave a comment here, I’ll get back to you as soon as I can.
In my tutorials of AngularJS WordPress theme, I’ve always put
html tag. Maybe I haven’t mentioned, but in fact, the
ng-app="app" can go with any HTML tag in your page, as long as it makes sense. For example, it’s obvious the
body tag should be the second best place to insert the
ng-app="app" if we’d like to enable AngularJS on the whole page.
There is another topic Ryan reminded me few days ago, he noticed the admin bar can’t work with our AngularJS theme. It looked all right, but when clicked the links, the page wouldn’t go to admin panel, but stayed on the same page without content:
You should realize now that with my hint in the first paragraph, it has to do with the position of
ng-app is basically a way AgularJS declares that “this part of page belongs to me“. When we set the whole
html to be manipulated by AngularJS, clicking any link on the page, AngularJS will check if the pattern of the URL matches a route, then display the template accordingly.
Since the URLs in the admin bar don’t match any of the routes, it starts acting weird.
So what can we do? We need to move the admin bar to somewhere not ruled by All Mighty AngularJS.
- If you use the project files from my previous tutorial, please add
index.phpfirst, and make sure there’s nothing like
add_filter('show_admin_bar', '__return_false');in the
functions.php, or the admin bar won’t be displayed.
index.phpto code below, so admin bar can get away from AngularJS:
Another thing to note is we should add a default route to our app for the best practice. We can do so by adding
otherwise method at line 15, and please note that I changed the route of content page either, or the
$routeProvider will never fall back to
Now if a visitor tries to go some page doesn’t exists, the homepage will show.
Just download the full project files on GitHub (with bonus content that I will introduce in my next article – How To Dynamically Set the Page Title). While waiting for the next post, you can find more information about ngApp on the official AngularJS documentation.
Couple days ago Ryan asked me can we use
slug instead of
ID, and reminded me that in the original demo video (Eric Wolfe: Building a WordPress Theme Using AngularJS), Eric did use the
slug rather than
ID. At first I replied to him it’s because Eric used the JSON API not WP API (JSON REST API), by default the WP API can only get post by ID.
So here are the snippets you’ll need to update, if you prefer to use slug in our project files (from my previous tutorials):
- line 6: Change
- line 16: Change
'wp-json/posts/' + $routeParams.IDto
'wp-json/posts/?filter[name]=' + $routeParams.slug
- line 17: With this approach, we’ll get an array of posts, so we need to change
- line1, line2: Change
- line 5: Change
You can get the full code from a branch of the project repo. I hope short posts like this can also help readers understand better about AngularJS and WordPress, especially how to accomplish a specific task. See you soon.
I’ve got lots of plugin ideas but don’t have much time on developing recently, due to I’m fascinated by AngularJS since last November and prepare to grow my freelancing business. Despite that I still try to take some time to update my plugins based on suggestions from users.
Today I just pushed the latest version of Media Search Enhanced to WP.org, the major updates are inspired by a comment left here last week. Basically Don requested if I can make the plugin work on the frontend, so website visitors can search for media by all fields (title, caption, alt text, filename and terms).
I found it interesting because I’ve considered to implement functions like that but not sure if it’s of use enough. According to Don’s comment, it will be a very good idea.
So I made a major change that moved all main functions from admin class to public class in my plugin, and create a shortcode
mse-search-form to insert a media search form into posts or templates. The media search form is a default WordPress search form but customized:
- Add a hidden field to force it only to search for
- Add a class name
mse-search-formto help if user would like to modify the form with CSS.
- Two custom filters in the form:
mse_search_form_classto change the form class name,
mse_search_form_placeholderto change the input placeholder.
For now the frontend media search form might not be that helpful that it just display all media as posts in search results page. You have to custom the page to make sense of it, so maybe I should improve it in the next release by adding a media search results page or creating a media search results shortcode.
Other comments on the WP.org support forum proposed to display the media search results but group them by post id, and search for meta values. These opinions are useful to some extend so I’ll keep in mind. Your feedback is always welcome. Let’s improve the media search workflow together!