Tag Archive: wordpress

Create A Custom Module in the Enfold Advanced Layout Builder

April 8, 2020

If you’ve done any custom WordPress development in the past 10 years, you’ve probably stumbled upon or worked on the Enfold theme which uses the Advanced Layout Builder.  This is a proprietary page editor used by the popular theme developed by the theme’s creators.  The theme alone has 200k sales, so it’s fairly common. It comes with a lot of built in modules and elements, but there may come a point where you’d like to extend this editor to allow for custom elements.

Below is an example code snippet that builds this custom element.  I’m going to describe how to use it in more detail below.

There are 4 parts to this code snippet and they all play an important role in how your element appears and functions.

  1. Declaring the element and defining its name, description, icon, etc
  2. Determining what fields the user can edit while using this element
  3. Determining what the element looks like inside the editor when used
  4. Determining what is output on the front-end with your element

We are going to describe how and where to set this up in greater detail.

Setting up your files and calling them

The first step in extending this custom builder is determining where these files are going to live.  In my case, I set them up in my WordPress theme and then referenced them in my functions.php  file.  That is what I would recommend.

So, in your theme, set up a directory called “custom-elements”.  You are probably going to make multiple custom elements and they all need a separate file.  You would place them inside this directory.  Here is the code snippet you would place in your functions.php  file to call that directory so Advanced Layout Builder knows where to find them:

That declares that going forward, check out “/custom-elements/” to see if there are files.

Next, let’s set up a demo custom element file within that directory.  Any custom element files in that directory going forward will be recognized and included when the Advanced Layout Builder loads on the back-end.

Make a file in that directory called “custom-element.php”.  Copy the entire code snippet that builds the custom element in there and save.  You should now see a custom element when you refresh the page editor in the back end on it’s own tab.

Let’s break down those parts to see how you can re-purpose those for your needs.

Extending the Avia Shortcodes Class

This part of the code defines your custom element’s name and function:

You are going to need to make avia_your_new_custom_element  a unique function name for each of the custom elements you make.  Make sure you update it on both lines.

Customize the element declaration

Let’s look at this piece of the code:

This section is defining a lot of important details about your new custom element.  Most are self explanatory, but the key things are the name, icon, shortcode, and tooltip.  These all need to be unique and help identify what they are and do to to your content editor.

I got the icon by literally “Right Click > Inspect Element > Image Name” of the icon I wanted to steal from another Advanced Layout Builder Module.  They almost always start with “sc-” and you can find the best one that fits your element.

Another important piece is the “tab” section.  If you notice in the editor, you can separate the custom modules by “Layouts Elements, Content Elements, etc”.  Do you want this element to be in one of those?  If so, label it the same.  If you want it to be on a separate tab, give that definition a different name.  Other custom elements you make can also reference that exact tab name to group them together.  Feel free to experiment!

Customize the Editable Fields

We move on to the next chunk of code:

In this example, I’ve only made 1 field, called “Field 1”, where a user can add some custom content in the element.  The “type = input” describes if this is a text field, a text area, a radio button, image, etc.  There isn’t a ton of documentation on your options, but the best way to explore more is to dig into the Advanced Layout Builder.  If you look at the code for other default elements, they will have a similar set up with waaaaaaay more fields and you can cut/paste parts of those to set up your editor how you wish.

One important note, the ID for each should be unique.  You can also group them in tabs which is what the 2nd array in this code snippet does.  You can start new tabs and place other editable fields on those.  It’s just a nice way to group things and as your custom modules become more complex, you can make editing content easier.

Define what your element looks like in the editor

This piece of code does exactly that:

I simplify this a lot of times.  You can call the editable field’s content and spit it out, but for my case, I just liked having the element’s name displayed and only that.  When a content editor wants to see how the page is structured and where certain content blocks are, they can easily identify the module’s name and that is sufficient for me.

Determine What Your New Element Outputs

The important stuff, right?  What does the actual element output on the front-end when used.  Let’s take a look at that function:

This is a fairly simple example, but you can get a really good reference on how to modify it for what you need.  Remember that earlier function where you defined the editable fields?  Well we made one called “Field 1” and gave it an ID of “field_1”.

While we output the HTML we want, you can called that value with the syntax $atts['field_1'] .  As you begin to build more complex elements, you will need to give those unique identifiers and reference them in the same way.

Conclusion

Hopefully, this is a simplistic example to get you started on building custom Advanced Layout Builder elements.  Here is a great reference that helped me immensly in starting out on this endeavor and I believe there may be more valueable information in that article, as well.  I hope this helps.  Leave your comments and questions in the section below.  Happy Coding!

 

 

CSS Fix For Sticky Headers with the WordPress Admin Bar

December 8, 2019

If you’ve developed themes with HTML & CSS for WordPress, you know that the admin bar often interferes with sticky headers.  The elements overlap each other making one illegible. Both elements are usually placed at the very top and depending what z-index value is used, one is going to appear on top of the other.

Let’s assume you are using a mark-up similar to what is below:

And your CSS for that element could be as simple as:

Well, that unfortunately renders right where WordPress likes to put the admin bar.   It will render something like the image below where the header and admin bar overlap one another.

Luckily, there is a quick CSS fix which will move the sticky element below the admin bar when it is rendered.  If the WordPress admin bar is being used, the <body>  element gets a class of .admin-bar which makes it incredibly easy to make a rule for.  Since the admin bar is 32px in height on desktop and 46px on mobile, we can simply add:

This moves your sticky element below the admin bar, if present, and renders the site how you would expect to see when having two position:fixed; elements.

Spacing for Fixed Elements in the Header

You’ll notice on this site that I use a position:relative; element called .header-spacer  to serve as a “margin” for the fixed header.  I like using this trick to account for the correct spacing you’d like to see with a sticky element so the relative elements aren’t pushed to the top of the page.  Below is an example of the mark up on how I prefer to accomplish this:

And the CSS would be:

The caveat is you need to know your fixed element’s height.  I have found over the years that it is pretty easy to identify and maintain this, even when styling for responsive and mobile. People often use Javascript to calculate the height of the header and then apply that to the header-spacer, but this can often be inconsistent when there are images involved depending on when they are rendered.

I prefer to just code the fixed element, figure out the height, and hard code it in my CSS.  There are many ways to accomplish what I am doing, but I have found that this is the most seamless when manipulating with Javascript actions on scroll.  When the margin/spacing for the main page content is determined in the header, rather than the content, it tends to be more consistent for development going forward.

So in the event I would like this spacing to remain the same with the admin bar present, I would add this to my CSS:

This means going forward, I will have a 100px spacing that is calculated into my page height and content, whether I have the admin bar present or not.  It will adjust accordingly thanks to my CSS.

Again, there are a myriad of ways to accomplish this same task but I prefer this method.  Hopefully it helps you going forward.  Happy coding!

Embed A Tumblr Feed In WordPress

January 19, 2017

Below is an example showing how to embed multiple Tumblr posts as a feed into a WordPress site.  You will need a little coding experience with PHP and access to your WordPress theme files.  It is also required to have a Tumblr API key.

1. Get A Tumblr API key

This is required to use Tumblr’s API for requests.  In this case, we will be using it to fetch the latest posts from a Tumblr user.  You can visit here to set up an APP and retrieve your API key.

2. Set Up Your Shortcode

A shortcode is a simple WordPress snippet that you can pop into the page/post editor to place some code, make a query, or anything else you could possibly want.  Today, we are going to fetch Tumblr posts with PHP and place them in the site.

Editing the functions.php file of your WordPress theme, place this code at the bottom before the PHP end tag:

Let’s talk a little about what is happening here.

There are 3 variables you need to define at the beginning of the code:

  1. Your API key
  2. The amount of posts you want
  3. The Tumblr URL of the posts you want

The code will then fetch those posts and return them in JSON format.  In your foreach loop, you could cycle through each one of those objects in the array and pull any information you would need from each post.  In this case, I only want the post URL.

I only want the post URL because I am going to use a very handy function from WordPress to do the hard work for me.  Instead of figuring out whether each post is a link, a video, a photo, an embed, and then trying to format the HTML for each one, I will use what WordPress already provides, the oEmbed function.  That functionality takes whatever URL you paste in your WordPress text editor and then tries to find the embed code for it and place it within your content.

WordPress also provides a function to initiate this feature however you please: wp_embed_get();

So for this line of code:

we are just looping through each returned Tumblr post via JSON, and running it through the WordPress embed function wp_embed_get().

3. Place your shortcode where you want the feed

By adding the line below, you will call the function we placed in our functions.php file, and it will place it where the shortcode was used.

This shortcode can be placed anywhere on a page, post, or custom post type in the content editor.

You can customize a lot of the functionality to suit your needs, but hopefully this gets you started working with the Tumblr API and the many ways you can dynamically call Tumblr content on your WordPress site.

Credit

I want to credit @groovycarrot for his post describing how to first work with the Tumblr API in PHP which inspired the idea.

WordPress Permalink URL for Add This Sharing

July 4, 2011

AddThis is the leading developer tool for sharing your blog posts, pages, and pics. Just embed the simple code into your website, and visitors will be able to share your content with all of the leading social media networks with just a click. It’s an essential tool.

Today I will be showing you how to embed this into your WordPress site. By placing this directly into the WordPress Loop, ADDthis will now be displayed for every post that is called.

You need to do this for at least 2 pages. The index.php file and the single.php file. It is also a good idea to place it within your archive.php file as well.

Here’s how :

1. Find the WordPress loop

Open any of the following files (index.php, single.php, archive.php) and find your WordPress loop. The coding looks like this :

That tells WordPress to call to any post and display whatever follows until the loop is over.

2. Grab the AddThis code for your site

What you need to do is place the code AddThis provides into wherever you see fit into the post. Let’s hop over to AddThis and get the code.

Follow that URL and hit ‘Get AddThis.’ Copy the code it provides for whatever look you select.

3. Place the code within the Loop

Place that code within your Loop now wherever you wish. You will probably need to style it somehow once all is said and done, but it should look something like this :

What this is saying is basically : While you have a WordPress Loop, display the title, and then below it, display the AddThis tool.

Now this works good and well except for one thing. Your AddThis tool will grab the URL from the current page and attempt to share it.

What if you have a index.php page that displays multiple posts on one page? How will a visitor share just one post on that page? WE NEED TO FIX THAT!!

4. Add a Permalink URL to the AddThis script

There is a simple line that you need to add to make the AddThis tool fully functional within the WordPress Loop. Find the very first line :

and add this :

so it appears as :

That’s it! Now, whenever AddThis is used, it calls to the Permalink of each individual post and that URL as opposed to the full page.

Get to sharing!