JSON Viewers

As I am working on a web application using WordPress and Pods.io, I had the need to find something specific on a very big array.  This took me to a few searches as to how to best output this array for my troubleshooting.

I ended up finding some good JSON Viewers that pretty much helped me solve my (array) challenge.

I think most of them are great, I even installed the Chrome extension which lets me see view local JSON files.

Here’s the list for someone out there looking for JSON viewers … or even for my own reference:

How To Structure a WordPress Plugin

There are different ways to organize the structure. And as other say in this Stack Overflow post, it depends on the plugin and what it does.

It is good to test what works best in terms of having things organized in order to find easier and maintain code.

As it happens with coding, sometimes you start with just a few lines of code and end up with hundreds and a few files to include and then there’s the classes and the styles, and, and, and.

This reminds me how it goes with any type of project when the scope becomes not so clear.  And this may be in part because of the many parts involved not understanding the technical parts and what it really takes to make structural or functional changes.

Typewriter Effect

I may even try to implement this as a simple plugin, this code is modified from a post by CSS-Tricks.

[codepen_embed height=”265″ theme_id=”light” slug_hash=”WdGmoM” default_tab=”result” user=”armandoduran”]See the Pen <a href=’https://codepen.io/armandoduran/pen/WdGmoM/’>WdGmoM</a> by armandoduran (<a href=’https://codepen.io/armandoduran’>@armandoduran</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

How to Pass PHP Data and Strings to JavaScript in WordPress

This one post by TutsPlus is JUST what I was needing this morning.  I got so excited when I found that there is a way to pass info from WordPress to the enqueued JavaScripts, that I could not help and put here the code that will do the trick and of course the original post.  For my (o other’s) future reference.

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
wp_localize_script( 'my_js_library', 'php_vars', $datatoBePassed );

Original Post

UPDATE: I had to use this example instead from Pippins Plugins: Use wp_localize_script, It Is Awesome

Remove HTML tags using jQuery

I will need this simple jQuery code in order to remove some HTML tags as opposed to doing it with CSS.  Because there is a web application I am working on that runs on WordPress, I am making a requirement to have JavaScript enabled in the browser, otherwise the user will be redirected to a static HTML page that suggests to enable JavaScript.

Having said that. Here is the code I am planning to use with which I will be able to remove certain elements that are not necessary.  Even based on the roles and permissions of the user.

[codepen_embed height=”265″ theme_id=”light” slug_hash=”bgyBYB” default_tab=”js,result” user=”armandoduran”]See the Pen <a href=’http://codepen.io/armandoduran/pen/bgyBYB/’>jQuery Remove</a> by armandoduran (<a href=’http://codepen.io/armandoduran’>@armandoduran</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Getting Relationship Fields

This title may get confused someone not familiar with coding in WordPress for a moment!

I am leaving some code here for my own reference as I think I will need to have this handy for a number of times or even share it with others that may need it as I continue to work on creating a Web Application using WordPress and Pods and a number of other cool plugins.

This I found from a very good post from SaltnPixels called Playing With Pods.

That said, here is the first peace of code that I will need to adapt on my own logic for traversing the different tables associated with relationship fields in Pods.

Basically the field() function will return an array of pod items from the relating post type. You can then go through these pod items and do what you want with them.

//getting one pod item
$pod = pods('animals', get_the_ID() );

//make sure it exists
if( $pod->exists() ){

  //get the related zoo's field and store it in a var
  $related = $pod->field('related_zoos');

  //check if the field is empty. If not lets show some of the zoos!
  if ( ! empty( $related ) ) {
   foreach ( $related as $rel ) { 
     //$rel is an array of one pod item
      echo get_the_title( $rel['ID'] );

Here I am getting the zoos that are connected to this animal. Then I am going through each of them and echoing out each zoo’s name. I find the most important piece of info is the related ID’s. With those you can do everything.


Getting Related ID’s Easier

I don’t usually need all the stuff that comes with the related posts. An array of ID’s is usually simpler to work with for me. Here is a little trick to get the related ID’s as opposed to all of the stuff.

Above I have changed the field function to field('related_zoos.ID') which gets the ID’s only. Now when I make a for each loop, I’m looping through simply ID’s and nothing else. Pretty nifty. You can fine tune the field function to get a list of anything in those posts!

//getting one pod item same as before
$pod = pods('animals', get_the_ID() );

//make sure it exists
if( $pod->exists() ){

 //get related ID's
 $related = $pod->field('related_zoos.ID');

 //check if the field is empty. If not lets show some of the zoos!
//NOTE: foreach loop only needed if the relationship field is  multi-select
 if ( ! empty( $related ) ) {
   foreach ( $related as $id ) { 
     echo get_the_title($id);

In fact the field() function can take a string that traverses through the tables and gets anything! I can do field('related_zoos.zoo_location') to get a list of zoo locations from each zoo related to this animal!


I happened to find this website called SaltnPixels  after googling some specific things about Pods.  Then I could not help but archive this under my UX folder (or tag should I say).

The site not only look clean, but it makes good use of some CSS, HTML and jQuery goodies.

Commerce Notebook

This looks like an interesting page to add to the yet another site on the list to ready (dashes added to this last sentences).

I am member of Post Status and I do enjoy being in the know of what’s happening with WordPress, so this should be another good reference.

Commerce Network

Automation: The Future of WordPress Development

I’ll be attending another WordPress meetup this Wednesday, this time the presentation is SASS, Gulp and WordPress and it promises to be a good one for expanding my possibilities as I continue to get more engaged with developing using WordPress.

Since someone shared a post on the meetup group titled Automation: The Future of WordPress Development, I found some interesting things there that relate to the future of WordPress development.

You simply can’t avoid it. The standards for Web Development have changed significantly over the last few years. Just as an example, not too long ago, relying on JavaScript completely was considered a bad practice. Nowadays, you can easily find countless websites embracing JavaScript libraries like it’s the new norm.

Not only that, but JavaScript has proved itself as the leading language for the web, and the term “full stack developer” in the context of JavaScript has finally bridged the gap between front-end and server-side, bringing massive change and innovation to the web development world.

Inevitably, with that crazy wave of change, a handful of fresh and game-changing technologies have showed up in the recent years.

I have heard about Gulp and Bower, but I guess I need to dig in more on these tools.