How’d you do that? WordPress, HTML, CSS and more

We’ve shared a few tips recently in the Facebook WordPress for Nonprofits group and Give Community that are worth re-sharing here.

Before we get to the tips, here’s a setting we recently found:

In your user profile in WordPress, there is a box you can check to disable the Code Mirror syntax highlighting, auto-completion / hinting and linting features in the Custom HTML Widget and the Additional CSS Editor in Customizer. The Code Mirror helpers are nice to have when you’re writing new code but they drive me crazy when editing existing code as they want me to fix unclosed tag before I finish what I’m working on. I’ve disabled Code Mirror for now.

Now for the tips

First up, how to best present PDF files. This was in response to a question in the WordPress for Nonprofits Facebook Group.

Generally we insert PDF files with the Add Media button. After inserting them, if you’re in the Visual editing tab, click on the link, click the pencil icon then click the gear icon. Check the box to open the link in a new tab. PDFs should usually open in a new tab because they lack your site’s header, navigation and footer so the user will have a harder time navigating away from the PDF once opened. By opening it in a new tab, they can just close the tab when done and be back in your site where they left off.

If you’re using a theme that includes Font Awesome Icons, you can add a little CSS to make a PDF icon appear after links to PDF files like in image below. Here’s the CSS:

a[href$=”.pdf”]:after {
font-family: FontAwesome;
content: “0a0f1c1”;
}

Put this in your site-wide CSS such as in style.css for a child theme or Additional CSS in Customizer for some themes.

If you’re not using Font Awesome, you can do the same thing with a tiny PDF icon image file. Google “Add PDF icon after links to PDF files” or similar and you’ll find several tutorials and articles.

 

Next up, a tip specific to the Tributes add-on for the Give donations form plugin:

Someone asked in the Give Community on Facebook how they could open a donation form with the Dedication button already checked so the Tribute fields would be displayed. They were building a form specifically for honorariums and memorials.

You can put a little bit of javascript at the end of the page (use the text view in the WordPress editor) to check the yes button but the id of the yes button includes the form ID number so it is different for each form. Here’s an example for the form with ID = 112 in my test system:

<script>
giveTribute_Yes_Btn = document.getElementById(“give-tributes-yes-112”);
giveTribute_Yes_Btn.checked = true;
</script>

Make sure the script is after the form shortcode on the page so that the form is already there when the script executes. Otherwise the button may not be there to check when it runs.

We’ll share more tips soon.