Fixing Style Issues While Editing Beaver Builder

I’ve started using Beaver Builder with a few clients after having played with it a bit and hearing lots of great reviews. I’ve looked into multiple WordPress Page Builders, and have had experience with quite a few of them through my work offering WordPress maintenance service.

I’ve found that Beaver Builder is able to handle a lot of the customizations that my clients may want to make, but there are still a few things that I have to setup externally to get a feature that they want. As an example, a client wanted to use the callout module to make an entire box clickable, not just a button after text and images.

Doing the above was fairly straightforward for this use-case: I set the entire callout link to be relatively positioned in CSS, so that I could absolutely position the anchor tag within the link to be the full height and width of that box. Finally, I added a hover and focus state to the button so that when hovering with the mouse or focusing with the keyboard there would be a visual indication that it was clickable, besides the cursor icon that was already set.

.callout-link {
	position: relative;
}

.callout-link a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.fl-callout-button a:hover,
.fl-callout-button a:focus {
	box-shadow: 1px 1px 3px 0 #315E7D;
}

So what’s the issue?

That looked like a simple solution to the problem that we had, but like many bits of code, I inadvertently created a new issue.

Beaver Builder is a front-end content editor, which means that it uses the same HTML and CSS structure to display the content while editing. While this is normally a good thing, it means that you need to pay attention to custom code that you’ve added to modify Beaver Builder.

Since I changed the layout of links in the callout module, I changed the layout of links for the editor of that module. Additionally, I’d styled unordered list bullets with pseudo-elements, which also caused a display issue. This is what the editor looked like when I tried to modify those links:

Broken Beaver Builder editor CSS
This is what happens when you let me touch code!

After I determined that I was the cause of the issue, I set about to fix it. Thankfully, Beaver Builder adds several body classes while the page editor is open, including the class fl-builder-edit which I used to fix this particular issue. I hid the li::before pseudo-elements, and restored the link anchor to relative positioning.

/* Beaver Builder Editor Fixes */
.fl-builder-edit .entry-content ul li::before,
.fl-builder-edit .fl-builder-content ul li::before {
	display: none;
}

.fl-builder-edit .callout-link a {
    position: relative;
}

With that code in place, the editor layout looked as it should before I mangled it.

Fixed Beaver Builder editor settings
That’s a lot better and actually usable!

Check for unintended consequences of your code.

This broken CSS wasn’t a major problem, and was thankfully easy to fix. But it did bring up a good reminder: when you make one change to your code, you may change something else that you didn’t mean to. It’s always good to review every time that you make a change. Having some version control in place that you use regularly doesn’t hurt either!

Display a Notice for New WordPress Posts

If you’re like me, it might not always be easy to get new posts out to your blog. I’m trying to keep a new tech-tip going every regular weekday for a while to see how I keep up with that.

Since my content might not always be the newest, I may want to highlight when something was recently published.

Calculate posts published in the last two weeks

In the following example, I’m going to check to see if a post was published within the past two weeks. If so, I’m going to attach a notice to the title of the post. I’m assuming that the following code is going to go into a loop of posts, or somewhere that we’re already using the correct post ID.

$post_title = get_the_title();
if ( get_the_date( 'U' ) >= date( 'U', strtotime( '-2 weeks' ) ) ) {
    $post_title .= ' — New Post!';
}
echo $post_title;

First, on line one, we’re creating a variable in PHP called $post_title. This will hold the title of the post, which we get with the built-in WordPress function get_the_title(). Again, I’m assuming that we’re already in a loop for a specific post, but if not you can pass the ID of the post as an argument in that function.

Next, line two is going to get the date that the post was published in Unix Timestamp format. I’ve put it into that format to make it easy to compare. I am grabbing the date instead of the exact time since it doesn’t really matter to me if it was exactly within two weeks down to the second, just generally two weeks by day count.

The post publish date is compared to the current time minus two weeks, also in Unix Timestamp format. The PHP function strtotime() allows you to use human readable formats for time conversions, which we’re using to say “give me the time in Unix seconds for two weeks ago”.

If that comparison is true and the post was published less than two weeks ago, we’re going to append the text ” — New Post!” to the post title. By using a period followed by the equals sign, we’re saying that we want to concatenate, or add the new value to the existing variable.

Finally, on line five we’re echoing out the value of $post_title, meaning we’re printing it to the screen. So if I were to use the above code to display titles for this site and this post was published less than two weeks ago, the title would display as Display a Notice for New WordPress Posts — New Post!

How else could this be used?

One way that I use this code is for a custom post type that displays properties for sale for a client. They wanted to highlight some recent listings, and using this code along with some CSS let me put a fancy ribbon on the corner of property listings, as well as list the number of days that the home has been on the market.

Property Listing with new listing notice and number of days on the market

If you have the need to calculate WordPress post publish date compared to the current date, I hope the above snippet has been a good place to start!

How to Keep Gravity Forms Displayed After Submission

Sometimes you’ll have a Gravity Form that you want to keep visible after it is submitted. Maybe you want people to be able to fill out the same form multiple times, or maybe your design looks better with the form still showing.

Gravity forms has a filter hook built in called gform_pre_submission_filter, which can be used to make changes to the form, among other things, after the form has validated (ensured that required fields are filled, nothing is blocked, etc), but before the form submits and notifications are sent. You can learn a bit more about that filter on the Gravity Forms documentation.

We’re going to use this filter and create our own PHP function that will check the form before it is submit, and create a div that holds any confirmation messages that we have set.

First, on line two we add our function, dw_show_confirmation_and_form, to the filter. Notice that we use the parameter $form in our function, which gives us access to details about this specific form.

On line four I’m getting the shortcode that inserts the form into the page. In this case I want it to get the proper ID of the form, and I want to display the title of the form but not its description.

Below that, from line six to line ten, we’re checking to see if there are any confirmations for this form. If so, we’re going to loop through each confirmation and append it to the form shortcode (so the form will display again), then put the confirmation text inside of a div that we’ve given the class .confirmation-message. That class can then be used to style the display of the confirmations.

Finally, on line twelve, we return the form. Since we’ve prepended the shortcode with the ID of the form, when the form submits it will display the form again, followed by our confirmation message.

Gravity Form displaying with confirmation text below it.
Our post-submission form, with the confirmation text displaying below

The code above will make this change to all forms. If you need to target just one form, use the ID of the form and change the filter to include the form number after an underscore at the end. For instance, if we’re making this change to form three, we’ll change our filter call to 'gform_pre_submission_filter_3'.

You may also want to do other things, like control whether any fields stay filled or not, update without refreshing the page, or scrolling down to the confirmation when complete, but those are lessons for another day!

What I’ve Learned Hosting the WordPress Orlando Meetup For Almost Seven Years

I’ve been organizing the WordPress Orlando Meetup since near the start, all the way back in late 2011. For me that was my first introduction to the idea of a community around WordPress, and that led to my involvement in my first WordCamp in 2012. Since then I’ve traveled to dozens of WordCamps, speaking, volunteering, organizing, and even occasionally attending without having all of that extra pressure ????

WordPress Orlando Organizers and Matt Mullenweg
Having Matt Mullenweg stop by your Meetup is ????????????

There are a few things that I’ve learned about hosting recurring events for people that you don’t always see outside of that community. Some of these were taught to me by others locally, some were shared from the supportive network of the Make WordPress Community, and some were those harder learned lessons, where I had to experience firsthand when things don’t always go according to plan.

I can’t say that these are the most important lessons of all, but since I’m prepping for our WordPress QA Meetup tonight, I thought I could jot down a few of the things that I find important for a Meetup.

It Doesn’t Matter Where You Are

I mean you should try to choose a place that is quiet enough to hold conversations, but not so quiet that you’re intruding on it. Ideally select a location where you won’t be a disturbance to others nearby, and they won’t be a disturbance to your group.

Libraries have been good for us for this, as well as private office spaces generously donated by supportive businesses. These are places that you can generally have a multi-hour meeting without disturbing anyone else, and if you look hard enough you can find people willing to give you space for free. We generally choose companies that are in the web and marketing space, since they would have a natural overlap with our group.

Coffeeshops and other public venues can also be used if they fit what you’re looking to do. We host a monthly coffee Meetup at a local coffeeshop near my house. I chose that location because they make the best coffee around Orlando, they are locally owned and get a business boost by us being there, and they have faster internet than I have at home. The casual environment is a good setup for our conversational Meetups, where we naturally form small groups to chat, help each other with websites, and meet new people.

WordPress Orlando User Workshop
Hands-on Workshops are a huge hit for our group.

It Doesn’t Matter What You Do

Again, have some guidelines, and certainly let people know in advance what you want to do at the Meetup so they can determine if it’s good for them to attend. You can do a variety of Meetup styles, and they don’t all have to be lectures or be the same from event to event.

We’ve hosted events that are standard lectures, deep dives on one topic, several short talks with a general theme, QA sessions, hands-on workshops, and the aforementioned coffee chats. We even hosts parties and social events, like the WordPress 15th Anniversary Party that we’re holding next week.

A group you’d love to party with

I’ve found that having different topics each month, as well as giving an idea of the level of familiarity that you should have with that topic before attending helps.

We’ve had people mention that they thought the group would be too technical for them, so we do our best to make everyone feel welcome. Indeed, our makeup of events skews heavily toward business owners and bloggers, the people that make up the largest portion of the WordPress user base by far. It’s our job and my pleasure to make sure they get something valuable out of attending an event.

It Doesn’t Matter How Many People Attend

Orlando is lucky to be situated to have one of the largest WordPress Meetups in the world. We’ve got a passionate base of attendees that show up to most events, and a healthy cycling of new members each month.

Though a crowd is always nice when you’ve got a stage!

That said, we’ve noticed attendance dipping. Not always that we have fewer people attend, although that’s sometimes the case, but that we have higher RSVPs and a higher number of no-shows. Sometimes this can be upsetting when I provide food for the Meetup that goes uneaten, but it’s worst when we’re in a venue that we have to limit RSVPs and I know that there are people who didn’t make it because someone took a seat and didn’t show up.

We’ve hosted individual events that had a handful of attendees all the way up to 100+ people who are passionate about WordPress. The size of the event doesn’t matter as long as some time can be made to let everyone know what they can do, who is welcome, and that whatever reason they chose to come will be heard.

Irina Blumenfeld, Chris Edwards, David Wolfpaw, and Adam Soucie answering WordPress Questions

Sometimes those smaller Meetups can be even more fun, since they take less planning and can have more intimate conversations. I get to learn a lot from a wide group of people who know lots about something that I know nothing about, and they can hopefully learn something about WordPress from me.

General Notes

Just a few things that didn’t fit into the above sections:

  • Maintaining some sort of online presence is useful to keep people connected outside of events. Our website, Facebook group, Youtube, and Slack team, are resources for all members with notes from our previous Meetups and new discussion.
  • Having some way to remind people how they can reach you is important. We have a banner that we bring to each event, so that someone can snap a picture of it to remind themselves of our URLs later. I shortened them with redirects from our main website to make them even easier to type in.
  • Having a Code of Conduct is super important. We haven’t had too many issues where we had to enforce ours, but they’ve happened. Having some sort of guiding document is a good start to ensure discussions flow around inappropriate behavior.
  • Having a few organizers helps to stop burnout. Each event involves booking a venue, setting dates, getting refreshments, arranging speakers, and ensuring all of the little things around those go off without a hitch, like say ensuring the venue isn’t locked (happened multiple times), that people have the right date and address (same), and that speakers aren’t stuck without the right laptop adapter (yup)
  • Have fun with it! This is a volunteer group with all volunteer driven events. I try not to let it consume all of my time, and try not to go overboard on fancy venues and food when it’s coming out of pocket. Survey after survey have shown us that people come for the content and community, and that everything else is secondary.

If you want to start a Meetup in your area or get involved in an existing one, do it! It doesn’t have to take a lot of time and energy to get started, and the Make WordPress Community can provide additional resources, including funding for venues.

WordPress US Contributor Day
Seriously, these people are amazing!

A Starter Child Theme For Genesis

While my last post about a theme was for my my first Gutenberg-ready theme, Malik, I do a good portion of my work with the Genesis Framework, and often use the custom themes that StudioPress sells.

I like to save time and repurpose code wherever I can, and several years ago I decided that I needed to build my own starter theme. This theme would be a Genesis child theme, and it would incorporate many of the features that I use over and over again for client sites. I put the code up on Github, so you can download or repurpose my Genesis child theme used for Orange Blossom Media projects.

Overview

I will clarify now that I haven’t updated this theme in a few months, and I clearly need to give it some TLC this weekend. For instance, I’m still loading version 4.7.0 of FontAwesome, when the superior version 5.0.13 (as of writing) is even better and easier to use. I’ve included it already, but I need to update the maintenance version and remove the unused, older files. Likewise, I need to remove the favicon which has been replaced with a WordPress customizer feature.

In addition to providing an icon font, the theme enqueues a login stylesheet, as well as some functions that allow you to change the login page title, icon, and layout. This makes it easier to add client information to the WordPress login screen, making it feel more custom to them.

I also pre-include a few scripts that I use for a lot of sites. This includes Sidr, a script for pull out menus which I use for responsive site menus. I have another script that will load a different type of menu, depending on the use case. Finally, there are some Modernizr scripts included to help integrate with older browsers, and a Javascript file with some modifiable scripts included.

There are a few includes that load on initialization, including a PHP based mobile detector in the event that I want to selectively run some server-side code. Functions that run on the admin side of the WordPress dashboard are loaded in a separate file from frontend code, and includes lots of hooks and filters to manage dashboard display and Genesis features, making it easier to toggle them on or off as needed. I’ve been slowly moving some of these functions to plugins that I load on client sites in the event that they change themes, but I kept them here for ease of use.

There are some customizer defaults that get loaded, as well as custom front-page.php, page-landing.php, and single.php. These handle a homepage separate of the latest posts, a page template that removes the header and footer, and an individual post, respectively.

Finally, the functions.php file defines a lot of sane standards, includes more hooks and filters to toggle as needed, and allows some quick repositioning of Genesis actions on specific page types. The stylesheet likewise makes assumptions of how the site will be designed, allowing you to modify as opposed to create from scratch each time. This should still be updated (for instance to be mobile-first), but it’s a familiar standard for me, and for everyone who’s modified a StudioPress theme already.

Why Spend Time on This?

Initially I put extra effort into creating this starter over building a specific client site. I even spend some time now reviewing it and making minor changes over time. Why would I spend time that I could be using for productive work doing something like this?

The investment of time and focus on planning and making templates and defining standards is a long-term gain. I’ve created a collection of code that can be reused over and over again, and set myself up for success every time I start a new site. It’s almost not a joke when I say that I activate this theme and half the work of building a client site is done for me.

By using the same codebase over and over again, I’ve allowed myself mental shortcuts that overall make me more productive, and allow me to provide better value by not reinventing a feature or layout every time I get started. It turns out that time was well spent, as I’ve been able to repeatedly apply this code.

Tomorrow I’ll discuss how I made this process just a bit easier, and learned some new things along the way, to create a theme generator.

For now, download the starter theme here if you want a leg up on building a custom Genesis themed site! 


https://github.com/davidwolfpaw/obm-genesis-child