Get Custom Post Type Taxonomy name using angularJs search filter
Wednesday, March 01, 2017
Follow this simplest steps for getting custom post type data using angularJs text input search filter.
First of all include live jQuery, angularJs live Library and create a custom js file.
Download and install WordPress REST API (Version 2)
you can skip next step if you want to fetch default post type data only.
otherwise,
we need to add REST API Support for Custom Content types
for already created taxonomy,
add:
add_action( 'init', 'my_custom_taxonomy_rest_support', 25 );
function my_custom_taxonomy_rest_support() {
global $wp_taxonomies;
//be sure to set this to the name of your taxonomy!
$taxonomy_name = 'your_custom_taxonomy_name';
if ( isset( $wp_taxonomies[ $taxonomy_name ] ) ) {
$wp_taxonomies[ $taxonomy_name ]->show_in_rest = true;
// Optionally customize the rest_base or controller class
$wp_taxonomies[ $taxonomy_name ]->rest_base = $taxonomy_name;
$wp_taxonomies[ $taxonomy_name ]->rest_controller_class = 'WP_REST_Terms_Controller';
}
}
read full here : http://v2.wp-api.org/extending/custom-content-types/
open browser and navigate: http://example.com/wp-json/wp/v2/your_custom_taxonomy_name
It should show you your taxonomy in JSON format.
open js file and
add
angular.module('myApp', []).controller('namesCtrl', function($scope, $http) {
$http.get("http://example.com/wp-json/wp/v2/your_custom_taxonomy_name")
.then(function (response) {
$scope.names = response.data;
})
});
open template
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input id="txtbilal" type="text" ng-model="test"></p>
<ul id="customData">
<li ng-repeat="x in names | filter:test">
<a href="{{ x.link }}">{{ x.name }}</a>
</li>
</ul>
</div>
here's my text box which fadeIn result on text input
you can also add a simple fadeIn jQuery function like me,
$('#customData').css('display','none');
$('#txtbilal').on("focusin", function(){
$('#customData').fadeIn('slow')
});
First of all include live jQuery, angularJs live Library and create a custom js file.
Download and install WordPress REST API (Version 2)
you can skip next step if you want to fetch default post type data only.
otherwise,
we need to add REST API Support for Custom Content types
for already created taxonomy,
add:
add_action( 'init', 'my_custom_taxonomy_rest_support', 25 );
function my_custom_taxonomy_rest_support() {
global $wp_taxonomies;
//be sure to set this to the name of your taxonomy!
$taxonomy_name = 'your_custom_taxonomy_name';
if ( isset( $wp_taxonomies[ $taxonomy_name ] ) ) {
$wp_taxonomies[ $taxonomy_name ]->show_in_rest = true;
// Optionally customize the rest_base or controller class
$wp_taxonomies[ $taxonomy_name ]->rest_base = $taxonomy_name;
$wp_taxonomies[ $taxonomy_name ]->rest_controller_class = 'WP_REST_Terms_Controller';
}
}
read full here : http://v2.wp-api.org/extending/custom-content-types/
open browser and navigate: http://example.com/wp-json/wp/v2/your_custom_taxonomy_name
It should show you your taxonomy in JSON format.
open js file and
add
angular.module('myApp', []).controller('namesCtrl', function($scope, $http) {
$http.get("http://example.com/wp-json/wp/v2/your_custom_taxonomy_name")
.then(function (response) {
$scope.names = response.data;
})
});
open template
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input id="txtbilal" type="text" ng-model="test"></p>
<ul id="customData">
<li ng-repeat="x in names | filter:test">
<a href="{{ x.link }}">{{ x.name }}</a>
</li>
</ul>
</div>
here's my text box which fadeIn result on text input
you can also add a simple fadeIn jQuery function like me,
$('#customData').css('display','none');
$('#txtbilal').on("focusin", function(){
$('#customData').fadeIn('slow')
});


2 comments
ReplyDeleteThank you for your post. This is excellent information. It is amazing and wonderful to visit your blog.
iPhone training courses in bangalore
ios app development course
iOS course fee in bangalore
iPhone training classes in bangalore
I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting angular certification
ReplyDelete