[ Useful Internet Links ]
** Primary Note, ..
[ Read more ]
Note: if you see a (*) against a menu option, means that the article has a download link associated with it.
WordPress developer, ..
(( search box )) located here.
WPBeginer, gotta say here: that this website has some really cool stuff on it, and it ain’t just for beginners neither, but it does has a Noob approach to searching for stuff. It also has a very heavy emphasis on the over-use of paid Plugins in my opinion.
StackOverFlow, not a Noob in sight: except for some of the unresearched questions being asked, here be the questionable search box in, ..
(( question ))
The Mozilla support site is a right royal bitch to navigate, but it does have some real neat stuff on it to peruse. Downside, you do really need to know what you want to find — before even looking for it. The place is not Noob friendly at all, that said, it’s got shed loads of brilliant examples.
But above all, there’s the king ‘n’ queen of all searches, ..
Google itself.
** Remember, this stuff discussed here can kill your website stone dead, so only proceed with a current backup under your belt.
This page title is, ..
[ Howtoo: making your own personal Popups ]
Operational Rider 1.)
Yes, you can simply use one of the many (hundreds) of Plugins out there to achieve this POPUP effect on your own website, but they all come complete with spy code built in, especially BoxZilla, that craftily wants your 5 start reviews, but after a certain amount of time in using it, so by default: it’s watching you.
Another reason, is that the text content of your Popups, is duplicated on every page that WordPress displays.
** So, if you have twenty or so popups, then twenty or so of the Popup’s content is also duplicated — again and — again, which happens when the Plugin itself is reactivated, and that happens every time the WordPress page changes, or reloads: which means that there is a website loading overhead issue, before you even start.
Popup Plugins and BoxZilla loading issues aside, BoxZilla isn’t as bad as some of them, with one the very popular fancy WP popup plugins in particular, actually offering (unsolicited users) to populate your site, and the wretched thing does so; almost immediately after you install it, (go figure!)
Operational Rider 2.)
I don’t use the Gutenberg Editor, and God’s honest truth here: I’ve no idea how it works, and nor do I want too either.
On my website, I exclusively use the original TinyMCE editor for producing all of my work.
The examples below, actually assume that you are also using the same editor.
That said, what’s shown, should also (theoretically) work with the crappy gut-less-thing.
Operational Rider 3.)
You’ll need access to your sites root folder — done through an FTP program of some sorts.
Or even by using Notepad(++) with the NppFTP Plugin installed and enabled.
** See the (software review page) for more information on those two basic software programs, these programs are required for all of my tutorials.
** You also need to be very comfortable in editing your theme files.
To stop your theme developer from over righting your edits, done when they update their theme, then use a child theme for this wet work. There’s a theme developing here, (groan!) I’m personally writing my own theme, (from scratch), so I haven’t gone down the child path.
So without further ado, and if you have root access: then lets get down to the nitty gritty, ..
The PHP code below needs placing somewhere inside your (footer.php) file.
<!--// this div and iFrame is used as my own popup help system. //--> <div id="somediv" title="≡ [ MCARS ] ≡" style="display:none;"> <iframe id="thedialog" width="100%" height="100%" allowfullscreen" ></iframe> </div> <!--// end of the div and iFrame used as my own popup help system. The normal WP-FOOTER is NEXT. //--> ** Place it at the very bottom, just before <?php wp_footer(); ?> command is good.
The PHP code needs putting here, because the jQuery file needs to be run, but only (after) the page proper has loaded.
It’s also in this location, if you actually need to call on the Popup features at any time.
** And that’s the only page display overhead used by this code.
The placement has been done like this, because the (footer.php) file is included on every WordPress Installation, and is also found in every template.
** Speaking of templates — then I have to inform you that I also use one of them as well in this popup Howtoo, with the basic layout included below. jQuery and the CSS code used, is also found at the bottom of this tutorial.
Popup Usage:-
Inside your WP (Post) or (Page), of your written text content in the editor, and by only using the TEXT Tab of the tinyMCE editor itself, then place your < a href > link as follows.
<a id="bxtn" class="trigger" href="https://b92.in/cuttings/local-ad/" target="_blank" rel="noopener">Popup Information:</a>
Here is a live popupop, that’s actually based on the above code.
Operational Notes on what’s going on:-
1.) The WP Paths Used:
(https: // b92.local/), is my own websites address.
(cuttings) is the parent page that I’ve put all of my Popups pages in.
** A quick note of explanation, WordPress dutifully includes it when selecting a file to display, but only if you was to employ the insert edit link (Ctrl + K) function that’s used to actually located the (Page) (Post) feature in the TinyMCE editor proper.
(/local-ad/) is the actual address of the WordPress (Page) that I’ve previously created.
** Take note here: the above WP Page has been saved to a blank PHP Template.
Here is my Blank Page Template, it’s located in my main root directory, and is where all of the other WordPress PHP files are found.
<?php /* Template Name: mCars Blank */ ?>
<style>
#bxtn { background-color: #1e90ff; font-weight: bold; color: #000000; border-radius: 1em; padding: 0 1em .1em 1em; } a#bxtn:link, a#bxtn:visited { text-decoration: none; background-color: #1e90ff; color: #000000; } a#bxtn:hover, a#bxtn:active { background-color: #0000ff; color: #ffffff; } .hr.dot { border: 1px dashed; opacity: 0.5; } .alignleft { height: auto; line-height: 0; max-width: 100%; float: left; margin: 0 1.5em 1.5em 0; }
</style>
<?php
if ( have_posts() ) : while ( have_posts() ) :
the_post();
the_content();
$masterPost = get_post();
writeOn_set_new_edit_link( esc_html($masterPost->ID) );
endwhile;
else:
echo '<p>Nothing Found!</p>';
endif
?>
All this Template basically does, is simply output the WordPress file contents — to the screen display only: it doesn’t even have any WP Header or Footer support functions.
** The CSS code shown in-line, has been put in for my preferred (link) rollover colors that I put in as id=”bxtn”, otherwise they’d be system bland, the .alignleft class is for any images that I might have included as well.
2.) the JS file used:
The JavaScript file that I’ve employed is called ‘/js/my-custom-script.js’
** That’s located off of my websites path in a folder called (js), and that’s also enqueued using this very simple string found in the top of my (functions.php) file.
wp_enqueue_script( 'my-custom-script', get_template_directory_uri( __FILE__ ) . '/js/my-custom-script.js', array(), '1.5.0', false );
Before we go on, .. inside your own (functions.php) file, you should have a function that loads your local resources, and looks something like this:-
function writeOn_resources()
{
wp_enqueue_style( 'writeOn', get_stylesheet_uri() );
/* this actually loads the themes stylesheet itself */
}
add_action( 'wp_enqueue_scripts', 'writeOn_resources' );
What this does, is load all of your JS and CSS files into WordPress proper, and it *won’t* look like this. I’ve called mine writeOn_resources(), and the internal WordPress hook add_action( ‘wp_enqueue_scripts’, xxx ) – xxx being the function name I used called writeOn_resources().
This function actually loads my css and scripts into the head of every WordPress page. This subject is worth a study all on it’s own, but know this: missing just one comer off of the end of a line of text, will stop your site dead.
Frightened yet? – You should be – (NOT!) Just make sure that you cross the (Is) and dot the (Ts) and you’ll be fine.
Here’s the JS code itself.
// The JQuery code is as follows.
// Note the use of (.trigger)
jQuery( document ).ready( function( $ )
{
$( ".trigger" ).click( function ()
{
var submitUrl = $(this).attr("href");
if ( !submitUrl )
{
var submitUrl = $(this).find("a[href]").attr('href');
}
$("#thedialog").attr('src', submitUrl );
$("#somediv").dialog(
{
width: 460,
height: 500,
modal: true,
close: function ()
{
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
I will also mention here, that the class=”trigger” as used above, is mandatory.
** That said, you can call it want you want, if and when you re-edit these files to suit you own system.
3.) CSS Operational notes:
<div id="somediv" as used above in the HTML code, is a simple target identifier used by the JS script.
** side note: ‘somediv’ is not styled, so the identifier won’t be found in the (style.css) file.
My own ‘thedialog” class, is found in my normal (styles.css), and is as follows, ..
#thedialog {
border: 0;
display: block;
padding: 8px;
margin: 0;
border-radius: 4%;
background: #ffff00; /* yellow */
color: #000000; /* black */
height: 97%;
height: fit-content;
height: -webkit-fill-available;
}
All it does, is style the box, but crucially: it also links the dialog function to the dialog class, and all by using this line of code in the JS file.
$("#somediv").dialog(
The styling below, is for the jQuery dialog itself, and is cut directly from my locally held copy of the (jquery-ui.css) file.
** It’s also something else that I’ve placed directly inside my css directory. Which if you remember, is a folder that’s located off of the website’s main root path.
Here is the WP enqueue code, as used in my own (functions.php) file, and found near the top along with the rest.
wp_enqueue_style( 'jquery-effects', get_template_directory_uri( __FILE__ ) . '/css/jquery-ui.css' , array(), '1.5.0' );
Note: I’ve also heavily modified the jQuery CSS dialog class to suit my own websites individual look and feel.
In my humble opinion — the original dialog offering was grey, bland and very boring.
** The jQuery CSS classes used, do go on a bit; so I’ve wrapped it up in a tag called [ Read more ]
This is how the Popup works.
1.) the <a href (blank) link > — opens up the blank WP file.
2.) That in itself: via the (.trigger) class, actually triggers the jQuery code to open up the dialog.
3.) That then fits the text-content inside via the — $(“#thedialog”).attr(‘src’, submitUrl ); — line of code.
Finishing off — to actually get the jQuery JavaScript stuff to work, you have to enqueue it, which is done below.
wp_enqueue_script( 'writeOn-A', get_template_directory_uri( __FILE__ ) . '/js/jquery-ui-min.js', array( 'jquery', 'jquery-ui-dialog' ), '1.5.0', false );
Security concerns:-
I’ve taken a copy of all of the jQuery stuff, and am loading it locally, done so to basically to save the download API calls, as I’ve also done with my Google Font called Fondamento — that in itself, resides in a directory called (fonts), again – it’s a folder found off of my websites root path, that sits along side (js) and (css).
This is what’s included in my (style.css) file, it’s being shown here as a guide to what can be done, and nothing more:- [ Read more ]
Now, .. the trouble in doing it this way; is that the locally held set of files; will miss out on any important updates, or even security patches, but from my own perspective, its working, and working very fast at that – which is all that I’m basically interest in at the end of the day.
Horses for courses and all that ..
EPILOGUE:
So, you now have the basic framework for creating your own website Popups.
** But I will warn you now: iFrame(s) are system hogs, that also suffer from performance issues.
This can dealt with by simply using DIVs, instead of the jQuery dialog iFrame route, but that path opens up yet another can of vanilla flavored JavaScript worms.
Using jQuery over JS, is my prefered method for (some) functions, ..
Unfortunately, an awful lot of professional programmers, disagree with that statement, (vehemently), preferring to (snffily) suggest that *one* should always use the standard Vanilla JavaScript — for everything!
My own preference in using jQuery over vanilla JavaScript (for some coding situations), is entrily based on the fact that WordPress now includes it as standard.
So it follows, that you’d be silly not to employ its simplicity, and anyhow: achieving the (.trigger) thing by using JS alone, is a bloomin long-winded DOM venture, as you’re forced to search for (all) of the classes on the page — to then find the right class to work on.
There isn’t the equivalent function of a document.getElementById( “ID-Name” ); for finding individual classes, they are global by default, JavaScript only works best, when using ID declared HTML page elements.
Whereas jQuery simply finds the (unique) class name for you, as in:-
$( ".trigger" ).click( function ()
.. And that little nugget of information for a novice Noob diving into JS and jQuery for the first time, is worth its weight in gold.
Happy Coding.
Thanks for reading, Jessica: Praise be the ORI.
-
Hardware Rim
-
MiscellaneousHolding Page (Miscellaneous) Matrix AboutMy Site Security BreakdownMy Plugins ExplainedMy NonCom PlugsA discussion on how writeOn is built (*)Howtoo: (pulled) kick out the hacker BotsCurrent eBook File FormatsInstalling eBooks on other eReadersWordPress – an Argument for Changethe WP EpilogueDownload (Demo) Template Page
-
Note: if you see a (*) against a menu option, means that the article has a download link associated with it.
- ☰ Disclaimer
- ☰ Contact
This is my email address.
If you understand these legally binding terms and conditions. Whereby, a one year cookie will be set on your browser: thusly declaring you to be an adult, (a constitutional time-Warrior), with all of your timely facilities intact.
