WordPress Landing Page Custom Fields Inhouse Media Tutorial

Posted on by
WordPress Landing Page Custom Fields Inhouse Media Tutorial

WordPress Landing Page Custom Fields Inhouse Media Tutorial

The recent WordPress Landing Page Custom Fields Tutorial used window.open calls to access WordPress Blog Custom Field URLs, but some web browsers block these calls, and so, as of today, we’ve made the reasoning more complex to allow for the possibility of …

  • displaying “inhouse media” ( ie. on domain rjmprogramming.com.au ) in this same webpage up above the dropdown in an HTML iframe that is invisible to the user unless needed … as per …
    1. on domain rjmprogramming.com.au
    2. URL ends with .m* is opened in an HTML video element
    3. URL ends with .a* is opened in an HTML audio element
    4. URL ends with .* is opened in an HTML img element

    … else …

  • open URL in window.open([derivedURL],’_blank’); // call

These changes involve changes to three TwentyTen themed PHP files as per …

  • header.php …

    <<?php echo $heading_tag; ?> id="site-title">
    <span id=hdgspan>
    <a itemprop="name" id="ahomeis" href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a><iframe style="width:600px;height:600px;display:none;" name=hdgiframe id=hdgiframe srcdoc=''></iframe>
    </span>
    </<?php echo $heading_tag; ?>>
  • single.php …

    if ($encsuffix == "") { $encsuffix="<select id='linkhints' class='linkhints' TITLE='Our link hints for this blog posting' style='margin-right:20px;float:right;display:inline-block;width:60px;' onchange=\"if (this.value.length > 0) { if (this.value.toLowerCase().indexOf('rjmprogramming.com.au') != -1 && this.value.toLowerCase().indexOf('.htm') == -1 && this.value.toLowerCase().indexOf('.php') == -1 && this.value.toLowerCase().indexOf('.pdf') == -1 && this.value.toLowerCase().replace('.au','').slice(-5).indexOf('.') != -1 && document.getElementById('hdgiframe')) { document.getElementById('hdgiframe').style.display='block'; document.getElementById('hdgiframe').className='linkhints'; document.getElementById('hdgiframe').style.marginTop='20px'; document.getElementById('hdgiframe').style.marginBottom='20px'; document.getElementById('hdgiframe').onclick=function() { location.href='#linkhints'; }; location.href='#hdgiframe'; if (this.value.toLowerCase().indexOf('.m') != -1) { document.getElementById('hdgiframe').srcdoc='<html><body><video controls><source SRC=' + this.value + '></source></video></body></html>'; } else if (this.value.toLowerCase().replace('com.au','').indexOf('.a') != -1) { document.getElementById('hdgiframe').srcdoc='<html><body><audio controls><source SRC=' + this.value + '></source></audio></body></html>'; } else if (this.value.toLowerCase().replace('.pdf','').replace('com.au','').slice(-5).indexOf('.') != -1) { document.getElementById('hdgiframe').srcdoc='<html><body><style> html { background: url(' + this.value + ') no-repeat center fixed; background-size: contain; } </style><br></body></html>'; } else { document.getElementById('hdgiframe').src = this.value; } } else { window.open(this.value,'_blank'); } }\"><option value=''>&#128161;</option></select>"; }
  • loop.php …

    if ($encsuffix == "") { $encsuffix="<select id='linkhints' class='linkhints' TITLE='Our link hints for this blog posting' style='margin-right:20px;float:right;display:inline-block;width:60px;' onchange=\"if (this.value.length > 0) { if (this.value.toLowerCase().indexOf('rjmprogramming.com.au') != -1 && this.value.toLowerCase().indexOf('.htm') == -1 && this.value.toLowerCase().indexOf('.php') == -1 && this.value.toLowerCase().indexOf('.pdf') == -1 && this.value.toLowerCase().replace('.au','').slice(-5).indexOf('.') != -1 && document.getElementById('hdgiframe')) { document.getElementById('hdgiframe').style.display='block'; document.getElementById('hdgiframe').className='linkhints'; document.getElementById('hdgiframe').style.marginTop='20px'; document.getElementById('hdgiframe').style.marginBottom='20px'; document.getElementById('hdgiframe').onclick=function() { location.href='#linkhints'; }; location.href='#hdgiframe'; if (this.value.toLowerCase().indexOf('.m') != -1) { document.getElementById('hdgiframe').srcdoc='<html><body><video controls><source SRC=' + this.value + '></source></video></body></html>'; } else if (this.value.toLowerCase().replace('com.au','').indexOf('.a') != -1) { document.getElementById('hdgiframe').srcdoc='<html><body><audio controls><source SRC=' + this.value + '></source></audio></body></html>'; } else if (this.value.toLowerCase().replace('.pdf','').replace('com.au','').slice(-5).indexOf('.') != -1) { document.getElementById('hdgiframe').srcdoc='<html><body><style> html { background: url(' + this.value + ') no-repeat center fixed; background-size: contain; } </style><br></body></html>'; } else { document.getElementById('hdgiframe').src = this.value; } } else { window.open(this.value,'_blank'); } }\"><option value=''>&#128161;</option></select>"; }

Stop Press

In a future blog posting (that will be accessible via this WordPress Recent Post Bug Fix Tutorial link in days to come) you will read how our work here interfered a little with the WordPress “Recent Posts” widget inhouse enhancements we last talked about at WordPress Recent Post Semi-Transparent Background Tutorial. Where we have blue code snippets above you can see us getting this work to live in its environment better with some uppercase and spacing changes.

23/10/2019

Did you know?

Did you wonder about (the code snippet comparison) …


<style> html { background: url(' + this.value + ') no-repeat center fixed; background-size: contain; } </style>

… rather, than, say …


<img src=' + this.value + '></img>

… above? Well, it’s to do with the situation where you set aside a set width and height of space (600px X 600px for us) in an HTML iframe and want to “host” an image media source. The question you need to ask is … “Is it more important to show an image in its original dimensions, or would a proportional view (ie. keep the same aspect ratio) of the image be okay?” If the latter is the case, then that style tag approach way above (that can be placed into the webpage’s head or body sections) that we started using when we presented the recent Full Sized Fixed Background Image Primer Tutorial (except on that occasion cover was used rather than today’s contain usage) allows for a full view of the image’s content.

Previous relevant WordPress Landing Page Custom Fields Tutorial is shown below.

WordPress Landing Page Custom Fields Tutorial

WordPress Landing Page Custom Fields Tutorial

WordPress blog PHP logic, such as used behind the scenes of WordPress Custom Fields Primer Tutorial, as far as its “loop” arrangements go, separates into two modes, those being …

  • single blog posting mode of access that suited yesterday’s changes to the WordPress TwentyTen themed blog’s “single.php” modifications (for URLs like https://www.rjmprogramming.com.au/ITblog/?p=[postID] or https://www.rjmprogramming.com.au/ITblog/[post-slug-permalink]) which distinguish themselves that during the “loop” logic of “single.php” the PHP $post object exists (and so the $post->ID of “$enclosurev = get_post_meta($post->ID, ‘linksofuse’, true);” below makes sense) … whereas, today …
  • multiple blog posting non-search, non-tag, non-category mode of access suits, instead, (just before) the last reference to “<?php the_content(” within its “<?php while ( have_posts() ) : the_post(); ?gt; … innards … <?php endwhile; // end of the loop. ?>” code snippet of WordPress TwentyTen themed blog’s “loop.php” (we found out, again, via “<?php echo ‘yoo hoo!’; ?>” experiments) modifications (for URL like https://www.rjmprogramming.com.au/ITblog/) which replace the “$enclosurev = get_post_meta($post->ID, ‘linksofuse’, true);” with “$enclosurev = get_metadata(‘post’, get_the_ID(), ‘linksofuse’, true);” (because in “loop.php” (last incarnation of “<?php the_content(“) the $post object does not exist)

In summary, the intervention code directly before “loop.php”‘s “<?php while ( have_posts() ) : the_post(); ?> … innards … <?php endwhile; // end of the loop. ?>”‘s last incarnation of “<?php the_content(” goes, for us …


<?php
$encsuffix='';
$enclosurev = get_metadata('post', get_the_ID(), 'linksofuse', true);


if ($enclosurev) {
if (strpos($enclosurev, "-") !== false || strpos($enclosurev, ",") !== false || strpos($enclosurev, "//") !== false) {
$encs=explode(",", $enclosurev);
for ($iqs=0; $iqs<sizeof($encs); $iqs++) {
if ($encsuffix == "") { $encsuffix="<select id='linkhints' class='linkhints' title='Our link hints for this blog posting' style='margin-top:-30px;margin-right:20px;float:right;display:inline-block;width:60px;' onchange=\"if (this.value.length > 0) { window.open(this.value,'_blank'); }\"><option value=''>&#128161;</option></select>"; }
if (strpos($encs[$iqs], "//") !== false) {
$enctitle="URL " . $encs[$iqs];
$enccont=@file_get_contents("http://" . explode("//", $encs[$iqs])[1]);
if (strpos($enccont, "</title>") !== false) {
$enctitle=explode(">", explode("</title>", $enccont)[0])[-1 + sizeof(explode(">", explode("</title>", $enccont)[0]))];
}
$encsuffix=str_replace("</select>", "<option value='" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "-") !== false) {
$encsm=explode("-", $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='//www.rjmprogramming.com.au/ITblog/" . $encs[$iqs] . "'></option></select>", $encsuffix);
$enctitle=strtoupper(substr($encsm[0],0,1)) . strtolower(substr($encsm[0],1));
for ($jqs=1; $jqs<sizeof($encsm); $jqs++) {
$enctitle.=" " . strtoupper(substr($encsm[$jqs],0,1)) . strtolower(substr($encsm[$jqs],1));
}
$encsuffix=str_replace("></option></select>", ">" . $enctitle . "</option></select>", $encsuffix);
} else {
if (substr($encs[$iqs],0,1) >= '0' && substr($encs[$iqs],0,1) <= '9') {
$enctitle="Blog Posting " . $encs[$iqs];
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog/?p=" . $encs[$iqs]);
if (strpos($enccont, "</title>") !== false) {
$enctitle=explode(">", explode("</title>", $enccont)[0])[-1 + sizeof(explode(">", explode("</title>", $enccont)[0]))];
}
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog/?p=" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "/tag/") !== false) {
$enctitle="Blog Tag " . str_replace("-"," ",str_replace("/tag/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "/category/") !== false) {
$enctitle="Blog Category " . str_replace("-"," ",str_replace("/category/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "tag/") !== false) {
$enctitle="Blog Tag " . str_replace("-"," ",str_replace("tag/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog/" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog/" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "category/") !== false) {
$enctitle="Blog Category " . str_replace("-"," ",str_replace("category/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog/" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog/" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
}
}
}
}
}
echo $encsuffix;
?>

And so, again, we say …

I spy with my little eye something beginning with … 💡
Yes, 💡
Up above, 💡

… and which a click on the blog image today gets you to, a webpage of all this blog’s recent posts.

Previous relevant WordPress Custom Fields Primer Tutorial is shown below.

WordPress Custom Fields Primer Tutorial

WordPress Custom Fields Primer Tutorial

I spy with my little eye something beginning with … 💡
Yes, 💡
Up above, 💡


Aw ... what a bright idea?! How come I click on the light bulb (💡) and it has dropdown options unique to this blog post?

Glad you asked. And all because …

Let’s talk about WordPress blog Custom Fields, and an associated great link we stumbled upon. We followed its advice to change Theme code … yay!!!! Except this time, it wasn’t (good ol’) header.php that changed for our Custom Field foray (we’ve codenamed “Operation 4A” … tee hee).

Working to a plan like this, often the first question is (especially with event-driven programming code) “Where is the intervention point?”.

You will need to enter your custom fields code inside the WordPress loop.
Look for the line that looks like this:

<?php while ( have_posts() ) : the_post(); ?>
You want to make sure that you add your code before the following line:

<?php endwhile; // end of the loop. ?>

… good advice, and looking in the themes “twentyten” folder several PHP files had these two. But trial and error (just placing <?php echo ‘yoo hoo!’; ?>) we found that “single.php” could be tweaked to change the WordPress blog webpage here, and intervene. Place the intervention near “endwhile” and it goes down the bottom of the post’s content, and near “while ( have_posts() ) : the_post();” you get it up near the top of the post’s content (the placement we opted for).

Working to a plan like this, often the next question is “What do you want to do now that you know where to intervene?” and here we decided we wanted a dropdown way to navigate to links that are related to the content in one of 5 ways …

  • a number corresponds to a posting number webpage at the WordPress (TwentyTen themed) blog here
  • a “-” (no spaces) delimited single “slug” word corresponds to this WordPress blog permalink
  • “tag/[tag-words]” corresponds to this WordPress [tag-words] tag lookup
  • “category/[category-words]” corresponds to this WordPress [category-words] category lookup
  • absolute URL will add to dropdown and try to navigate there

… to allow the user to “read up” on the posting to follow, perhaps.

And so … “How come I click on the light bulb and it has dropdown options unique to this blog post?”

The intervention code in “single.php” directly under “<?php while ( have_posts() ) : the_post(); ?>” …


<?php
$encsuffix='';
$enclosurev = get_post_meta($post->ID, 'linksofuse', true);

if ($enclosurev) {
if (strpos($enclosurev, "-") !== false || strpos($enclosurev, ",") !== false || strpos($enclosurev, "//") !== false) {
$encs=explode(",", $enclosurev);
for ($iqs=0; $iqs<sizeof($encs); $iqs++) {
if ($encsuffix == "") { $encsuffix="<select id='linkhints' class='linkhints' title='Our link hints for this blog posting' style='margin-right:20px;float:right;display:inline-block;width:60px;' onchange=\"if (this.value.length > 0) { window.open(this.value,'_blank'); }\"><option value=''>&#128161;</option></select>"; }
if (strpos($encs[$iqs], "//") !== false) {
$enctitle="URL " . $encs[$iqs];
$enccont=@file_get_contents("http://" . explode("//", $encs[$iqs])[1]);
if (strpos($enccont, "</title>") !== false) {
$enctitle=explode(">", explode("</title>", $enccont)[0])[-1 + sizeof(explode(">", explode("</title>", $enccont)[0]))];
}
$encsuffix=str_replace("</select>", "<option value='" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "-") !== false) {
$encsm=explode("-", $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='//www.rjmprogramming.com.au/ITblog/" . $encs[$iqs] . "'></option></select>", $encsuffix);
$enctitle=strtoupper(substr($encsm[0],0,1)) . strtolower(substr($encsm[0],1));
for ($jqs=1; $jqs<sizeof($encsm); $jqs++) {
$enctitle.=" " . strtoupper(substr($encsm[$jqs],0,1)) . strtolower(substr($encsm[$jqs],1));
}
$encsuffix=str_replace("></option></select>", ">" . $enctitle . "</option></select>", $encsuffix);
} else {
if (substr($encs[$iqs],0,1) >= '0' && substr($encs[$iqs],0,1) <= '9') {
$enctitle="Blog Posting " . $encs[$iqs];
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog/?p=" . $encs[$iqs]);
if (strpos($enccont, "</title>") !== false) {
$enctitle=explode(">", explode("</title>", $enccont)[0])[-1 + sizeof(explode(">", explode("</title>", $enccont)[0]))];
}
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog/?p=" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "/tag/") !== false) {
$enctitle="Blog Tag " . str_replace("-"," ",str_replace("/tag/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "/category/") !== false) {
$enctitle="Blog Category " . str_replace("-"," ",str_replace("/category/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "tag/") !== false) {
$enctitle="Blog Tag " . str_replace("-"," ",str_replace("tag/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog/" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog/" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
} else if (strpos($encs[$iqs], "category/") !== false) {
$enctitle="Blog Category " . str_replace("-"," ",str_replace("category/","",$encs[$iqs]));
$enccont=@file_get_contents("https://www.rjmprogramming.com.au/ITblog/" . $encs[$iqs]);
$encsuffix=str_replace("</select>", "<option value='" . "//www.rjmprogramming.com.au/ITblog/" . $encs[$iqs] . "'>" . $enctitle . "</option></select>", $encsuffix);
}
}
}
}
}
?>

… looks for an optionally filled in blog posting Custom Field called “linksofuse” for a comma separated list of links as per the 5 types of definitions above, and shows these as dropdown option values under that light bulb (💡) under the blog posting title before the blog posting content (that includes the blog posting image we always have).

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *