Recently I came across an amazing plugin named Advanced Custom Fields. This thing allows me to rapidly develop themes with clean, easy to use forms for custom fields. Those custom fields become the main content of front end layouts, much like my current About page.
This plugin has the ability to have a JSON file that has your field structure in it, and if you update that file, it will ask you if you want to sync those changes. Well, since I am going to hide the plugin, and I want to just push updates to my clients, I needed a way to automatically sync the updates.
I opened up the code for the plugin to see how the sync worked, took some of the code, and wrote my own function to perform the sync. Enter the gist of it:
Jump to post “Automatically update Advanced Custom Fields field groups via JSON”
I am currently working on a project where the designer has created 5 top level items in the primary nav of site. These items are meant to look like buttons and have fixed widths, so there will be a problem if the end user of the theme then decides they want 6 top level elements and they retain that fixed width. I needed a way to add a class to the nav defining how many parent/top level items there are, and then I could style the nav based on that.
Here’s what I’ve come up with:
Jump to post “Add a parent count class to WordPress nav menu containers”
So, I keep expanding my bag of tricks for WordPress, and one of the tricks I have is a media uploader that be placed in a meta box or in widget settings by just adding a couple lines of HTML, jQuery does the rest from there. The problem I ran into was when a new widget was added the
click events were not bound to them, which is because the html for the widget is dynamically added, but you already knew that.
I dug into the WordPress jQuery code (/wp-admin/js/widgets.js to be exact) and found this:
This will allow you target the newly created widget with a function you’ve created:
Congrats, you have one less white hair today.
Let me preface this, this is only if you are creating a widget and not if you just want to add a class to an existing widget, there are plugins that do that.
It’s really actually simple, I just could not find the answer right away because it isn’t one of those things mentioned in the Widgets API section of the WordPress Codex.
The above link has this in the Example when creating a widget:
If there were one more line (like the below), then this post wouldn’t exist. The array that holds the description can also have a key of
classname, which can have a string value, which is turned into your widget’s css classes.
The project I am working on has several templates, some which do not use the main WordPress editor. For those templates, I typically hide the editor via jQuery’s
The problem I ran into was that when editing a page using a template that did not use the editor, then switching the template to one that used the editor, the editor would be broken until the user scrolled, resized the window, etc. This is due to how WordPress 4.0 now resizes the editor window automatically to fit the content in it.
The trick to fix this is to turn the auto resizing off and on again, which fires off all of the auto resize functions. The methods are:
The longer explanation is below the gist.
First I get the elements I am watching or modifying, I then create the function that is going to flip the switch off and on again.
In the function I first see if auto resizing is even on, because if it isn’t, then you don’t need to do this. Next you can see that I have it set to wait 401ms, the reason for this is due to I am using
.slideDown(), which has a default time of 400ms, and I want it to fire after that.
I then listen for the change of the page template select box, and show/hide my editor as needed. I also flip the switch every time there is a change, which may be too much, but it shouldn’t affect any usability.
And that’s it. If you have a better way of doing some of the things, let me know.