Purpose:
Notes directed to the engineers. Written by Engineers or WebDev for Engineers.
Adding Scripts for FB Pixel, Google Tag Manager etc:
If you need to add any kind of custom scripts, please navigate to WordPress dashboard > Appearance > Custom Layouts > [Header/Footer] Scripts. Note: Footer scripts are aka “before closing body tag” scripts.
Paste your scripts in, then click update.
Where’s the Footer?
WP Admin Menu > Appearance > Custom Layouts > Footer
WP Admin Bar > (Hover Over)Edit with Elementor > Footer
How do I edit the Home Page Featured Slider?
The Slider is made up of Elementor Templates with the Category “GACC Featured Slide”.
There is a custom plugin called bt Elementor Slider that can turn any set of template into slides.
Add or Remove Slides:
 Go to WP Admin Menu > Templates > Saved Templates > (Select in All Categories DropDown) GACC Featured Slide > Clone the slide that’s most like the one you want to make. Some are dynamic, (labeled such) so do not remove the shortcodes or clone these. Once finished… Edit the bt Elementor Slider module on the Home Page and under the Content tab add or remove the templates in the “Select Slides” field.
Change Slide Content
Find the Slide you want to edit by observing the editing the bt Elementor Slider module on the Home Page and see the name of it. Go to WP Admin Menu > Templates > Saved Templates > (Select in All Categories DropDown) GACC Featured Slide > Edit the matching template
I need to add a PDF with a PDF Button to a Post, how do I do it?
When editing the post, Click the “Add Media” button, upload, name and include into you post. A pdf-embedder shortcode should appear. Next, add the shortcode pdf-button underneath it. On saving, a button will appear on the frontend. Even easier: Just clone a PDF based post!
How do I edit the Event Slider on the home page?Â
It is a custom plugin called addmi Event Slider.
Add an addmi Event Feed link in the content field and it does the rest.Â
If you need to change any information, login to addmi using credentials found in Fuse2 in Tech Assets. Change wisely and with client’s permission however.Â
An addmi event image looks best at 300px x 200px.Â
Purpose:
Notes that apply specifically to web developers. For your future self or the developer behind you.
SCSS-based Site:
Need to add CSS, don’t add it to the style.css, add it to the applicable partial and sass it style.scss.
sass style.scss ../style.css
Custom Code:
Shortcodes:
pdf-button:
Checks for a url parameter that’s given by a pdf-embedder plugin shortcode. Dirty but only way to dynamically generate a button I could think of. (Found in gacc-theme/shortcodes/pdf-button-shortcode.php)
addmi-calendar-iframe-shortcode:
So, addmi has no API, just an iframe embed. This shortcode requests the url found in the embed as a page, filters and tweaks the links so that it https/base address for relative referenced URLS work and echos the output. It also allows you to inject your own stylesheet into the mix. So that we can avoid specificity issues, FOUC, etc.
(Found in gacc-theme/shortcodes/addmi-calendar-iframe-shortcode.php)
This shortcode has a couple of attributes:
addmi_url: The url of the addmi page you want to fetch content
css_file_url: The url of the CSS file you want to inject.
Plugins:
bt-elementor-slider:
bt-addmi-slider:
FluentDOM :Â https://github.com/ThomasWeinert/FluentDOM
Elementor Slick Slider Library, if you need to add more options:Â https://kenwheeler.github.io/slick/
TODOs:
This section is for the next developer who finds some thing that made them think I was crazy for implementing it, and I defend my decision. Maybe the next developer is me.Â
addmi-calendar-iframe-shortcode and the addmi-slider-plugin:
1. For the shortcode Two errors/warnings in the console, however these appear even if you are using the addmi iframe, without this shortcode. ((Shrug))
2. Yes, it’s loading a ton of unused HTML/CSS, and I’m using display:none to hide the dicey bits. If a client, wants any of the addmi branding or features back just comment the display:none;Â
3. Yes, I targeted data-attributes and id’s, this is because at the time there was no other option. Most of their HTML had no class, or a class that was irrelevant to the intention of the CSS like “unstyle”.Â
4. The base HTML tags will cause problems for any relative URL’s on that page, e.g. add the addmi address in front of it. I am aware of it, so just use direct links. This isn’t a problem with Elementor links/buttons, but might stump an Engineer or yourself in the future if you add custom HTML. This reiterates another issue however, using relative url’s in content when working for a Digital Marketing company should be forbidden anyway: (https://developer.yoast.com/relative-urls-issues/)
pdf-button-shortcode:
1. Love to make this part of the site with a Media Button or as part of an extension for PDF embedder so it would just do it.
2. The code is assuming that the strings that are created by the pdf-embedder shortcode will always be the same. If an update changes the shortcode strings for any reason the code will fail gracefully by telling you that “No PDF link found”. This is a basic check for the string being set and it including the string “.pdf” somewhere in it. Not bulletproof, I know, but works for now. Â
I created the box colors from the Plan of Action PDF… I slightly darken them for screen purposes.
We will be receiving a new logo soon…
Also, we need to get the images from their social media… Marlon might be doing this, but Jake can probably select them with a better idea of placement on page and content.
I created three page ‘templates’ but the interior one will be more suggestion as the content will dictate the use of boxes and white space.
home:Â https://greaterabq.com/
About Us:Â https://greaterabq.com/about-us/
Leadership ABQ:Â https://greaterabq.com/leadership-albuquerque/
Colors
#1d285a logo blue > #412e6b logo indigo
#049e92 logo sea foam green (link hover)
#56AE63 green (box) >Â #049e92Â sea foam green (box)
#87B8BE light blue (box) > #AEDFE4 periwinkle (big box bg)
#41A391 teal (box) > #1B75BC (box)
#bf9b8e pink (box) >Â #31224f light green (box)
#D35643 light red (box) > #EC5E44 new (contrast dark #8F504A)
#D3A153 mustard yellow (box) > #F9BD58 new
#10385D dark blue (top bar and footer) > #412e6b desaturated indigo
#444444 Dark Gray (Most Font on white bg) > #333 DArker Gray
Fonts
Raleway Headings
Cabin Body