{"id":31982,"date":"2017-08-07T03:01:11","date_gmt":"2017-08-06T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=31982"},"modified":"2017-08-07T16:36:24","modified_gmt":"2017-08-07T06:36:24","slug":"wordpress-blog-cut-to-the-chase-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-cut-to-the-chase-integration-tutorial\/","title":{"rendered":"WordPress Blog Cut to the Chase Integration Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Blog Cut to the Chase Integration Tutorial<\/p><\/div>\n

You may recall some time back we set up into our WordPress Blog modified “Recent Posts” logic to improve on the existing WordPress widget for this. When we wrote WordPress Recent Post Image Follow Up Tutorial<\/a> we first introduced a Javascript function rptwo<\/i> which did a lot of the modified look to the WordPress TwentyTen theme’s “Recent Posts” logic within (our usual suspect) header.php PHP code (ie. PHP writes out Javascript).<\/p>\n

Following up on “reminiscences” above, can you remember back to yesterday’s Landing Page Cut to the Chase Interactivity Tutorial<\/a>, as shown below, and how we tackled part 1<\/font> of 2<\/font> of …<\/p>\n

\n
    \n
  1. fix the “building block”<\/font> today<\/li>\n
  2. fix the “supervisory integration”<\/font> tomorrow<\/li>\n<\/ol>\n<\/blockquote>\n

    … and so, with “tomorrow” being “today” we find ourselves at … fix the “supervisory integration”<\/font> … that integration being with our WordPress Blog TwentyTen theme’s “Recent Posts” widget, allowing for the emoji<\/i> endowed HTML li<\/i> unordered list elements be able to be clicked or touched to “Cut to the Chase” straight to the adjacent tutorial’s pertinent “Cut to the Chase Tutorial Slideshow\/Image\/Web Application\/Video” … whatevvvvvvvvverrrrr. This allows for the skipping out of our tutorial blurb … how could you?!<\/font> … straight to the “synopsis” of that tutorial, if you will … hence … “Cut to the Chase”.<\/p>\n

    The bold<\/b> PHP writes out Javascript code of the WordPress Blog TwentyTen theme’s header.php that is of relevance here is shown below …<\/p>\n


    \nvar nothanks=false, findthing=\"\";
    \nfunction rplater() {
    \n if (findthing != \"\") {
    \n window.open(\"\/\/www.rjmprogramming.com.au\/slideshow.html?title=\" + encodeURIComponent(findthing), \"_blank\");
    \n findthing=\"\";
    \n }
    \n nothanks=false;
    \n}<\/b>
    \nfunction rptwo() {
    \n var tworp=document.getElementById('recent-posts-2');
    \n if (tworp != null) {
    \n if (tworp.innerHTML.indexOf('<u' + 'l>') != -1) {
    \n var ihs=tworp.innerHTML.split(\"<\/a>\");
    \n tworp.innerHTML = tworp.innerHTML.replace('<u' + 'l>', '<u' + 'l class=\"iconlist\">').replace(\/a href\/g,'a title=\"Go to the tutorial\" onclick=\"if (1 == 2) { findthing=' + \"''\" + '; } nothanks=true;\" href')<\/b>;
    \n var eight=new Array(\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\");
    \n var ieight;
    \n tworp.innerHTML = tworp.innerHTML.replace(\/<\\\/a>\/g, \"<\/a><img class='iiconlist' src='\/\/www.rjmprogramming.com.au\/wordpress\/transparent.png' style='z-index:3;margin-left:0px;margin-top:0px;opacity:0.2;width:140px;height:100px;box-shadow:rgba(0,0,255,0.2) 2px 2px 2px 2px inset;' onmouseover='getRpnow();' onmouseout='yehBut();' ontouchstart='getRpnow();' ontouchend='yehBut();' title=' ... welcome to the long hover functionality that shows Blog Post regarding Recent Post images'>\");
    \n for (ieight=0; ieight<eight.length; ieight++) {
    \n if (ihs.length > eval(0 + ieight)) {
    \n tworp.innerHTML = tworp.innerHTML.replace(\"<li>\", \"<li title='Cut to the Chase' onclick=' findthing=\\\"\" + ihs[eval(0 + ieight)].split(\">\")[eval(-1 + ihs[eval(0 + ieight)].split(\">\").length)] + \"\\\"; setTimeout(rplater,1000); nothanks=false; ' class='\" + eight[ieight] + \"'>\");
    \n } else {<\/b>
    \n tworp.innerHTML = tworp.innerHTML.replace(\"<li>\", \"<li class='\" + eight[ieight] + \"'>\");
    \n }<\/b>
    \n tworp.innerHTML = tworp.innerHTML.replace(\"<img class=\", \"<img onclick=\\\"if (1 == 2) { findthing=''; } nothanks=true;<\/b> clickaid('a\" + eight[ieight] + \"');\\\" class=\").replace(\"<img title=\\\" \", \"<img onclick=\\\"clickaid('a\" + eight[ieight] + \"');\\\" title=\\\"\");
    \n }
    \n }
    \n }
    \n}
    \n<\/code><\/p>\n

    We have for you, today, an illustration of how this works, in that if you click or touch this link<\/a> (or today’s tutorial picture, above) you should get the tutorial picture above displayed in a new window, via the auspices of the RJM Programming “Cut to the Chase”<\/a> webpage being called in a particular $_GET[] address bar ? and & arguments way, and it responding to this, appropriately, which was “readied” in yesterday’s work.<\/p>\n

    We hope you get to use this new chance to streamline your learning here at this WordPress TwentyTen themed Blog.<\/p>\n

    \n

    Previous relevant Landing Page Cut to the Chase Interactivity Tutorial<\/a> is shown below.<\/p>\n

    \"Landing<\/a>

    Landing Page Cut to the Chase Interactivity Tutorial<\/p><\/div>\n

    We want to refine our “Cut to the Chase” functionality here at RJM Programming, working from the “building blocks” out to the end aim of our endeavours, to show you tomorrow. We, here, like to integrate, and if possible, have the “supervisory” web application get the “smarts” emanating from the change, yet, perhaps, allowing for the “building block” to be given an obvious user interactive way in as well, though, if truth be told, we more often just want this for the supervisory web application (if existant, that is).<\/p>\n

    Currently, our “Cut to the Chase” has the thinking we talked about in the previous Landing Page Cut to the Chase Primer Tutorial<\/a> …<\/p>\n

    \n

    A lot of people learning programming are trying to get information quickly, and “move on”, shall we say. While this is all well and good, it might be a “fob job” to think that many of us will really learn something well enough for the challenging bits adopting this approach, but there’s no doubt there are pressures these days to learn more and more, and perhaps come back to things in detail at a later, quieter, date. Anyway, “to cut to the chase” … chortle, chortle … this is what today’s blog post is about!<\/p>\n

    Let me explain it this way. Our tutorial blog postings here at RJM Programming always involve a bit of, but not too much, we hope …<\/p>\n

      \n
    1. the background to an issue … that is always preceded by …<\/li>\n
    2. an image or slideshow or web application or game etcetera that is “the cut to the chase” part of the blog posting clickable off an image up the top of it (for all but the earliest postings we ever did) … and for those who get it through a feed (that can summarize the blog posting with words only, perhaps) …<\/li>\n
    3. if we can remember we also always have a link within the blurb of 1 that links to “the cut to the chase” that is 2<\/li>\n<\/ol>\n<\/blockquote>\n

      … integrated, only, into our Landing Page<\/a> as an entirely separate modus operandi<\/i> should we say. That “Cut to the Chase” can be called on by a link in that Landing Page, and you further “drill down” via an HTML select “dropdown” element choice to hone in on a tutorial of interest. But what if you know something about the title, for example, of a tutorial of interest, ahead of time, and want to drill straight into that applicability of that tutorial’s content, directly? To make this “dream” come true, we’re breaking this mini project<\/i> into two …<\/p>\n

        \n
      1. fix the “building block” today<\/li>\n
      2. fix the “supervisory integration” tomorrow<\/li>\n<\/ol>\n

        So what’s the “building block” of this? It involves the amendment of the Cut to the Chase<\/a> slideshow.html<\/a> HTML and Javascript DOM to add one “overlayed” HTML a<\/i> link (the ol’ no “href” type, we’re getting fonder and fonder of) … “Find?” … that when clicked\/touched asks of the user (via good ol’ Javascript prompt<\/a> window) if they have words they can enter to try to find the Blog Tutorial of interest, most likely via a string that uniquely identifies its title, then send it off, to, if successful, slap on top of the current “Cut to the Chase” webpage, rather, the relevant apt “Cut to the Chase Tutorial Slideshow\/Image\/Web Application\/Video” … whatevvvvvvvvverrrrr.<\/p>\n

        You can see step 1 (of 2) changes for our “dream”, happening this way<\/a>.<\/p>\n

        You can also see this play out at WordPress 4.1.1’s Landing Page Cut to the Chase Interactivity Tutorial<\/a>.<\/p>\n

        \n

        Previous relevant Landing Page Cut to the Chase Primer Tutorial<\/a> is shown below.<\/p>\n

        \"Landing<\/a>

        Landing Page Cut to the Chase Primer Tutorial<\/p><\/div>\n

        A lot of people learning programming are trying to get information quickly, and “move on”, shall we say. While this is all well and good, it might be a “fob job” to think that many of us will really learn something well enough for the challenging bits adopting this approach, but there’s no doubt there are pressures these days to learn more and more, and perhaps come back to things in detail at a later, quieter, date. Anyway, “to cut to the chase” … chortle, chortle … this is what today’s blog post is about!<\/p>\n

        Let me explain it this way. Our tutorial blog postings here at RJM Programming always involve a bit of, but not too much, we hope …<\/p>\n

          \n
        1. the background to an issue … that is always preceded by …<\/li>\n
        2. an image or slideshow or web application or game etcetera that is “the cut to the chase” part of the blog posting clickable off an image up the top of it (for all but the earliest postings we ever did) … and for those who get it through a feed (that can summarize the blog posting with words only, perhaps) …<\/li>\n
        3. if we can remember we also always have a link within the blurb of 1 that links to “the cut to the chase” that is 2<\/li>\n<\/ol>\n

          … and so what you end up with, if you want to objectify it into a “tutorial-posting” object<\/i><\/a> perhaps, is two data members, of relevance, that are URLs, that being …<\/p>\n

            \n
          1. the URL to the WordPress blog posting tutorial … and …<\/li>\n
          2. the URL to “the cut to the chase” intention of the WordPress blog posting tutorial<\/li>\n<\/ol>\n

            … and what we’re proposing today, is that a lot of users can easily forgo the “blurb” and “cut to the chase”, perhaps going back to the blurb for a further read should they want to delve further after a “cut to the chase” session.<\/p>\n

            We wanted a way to present this idea on our RJM Programming landing page<\/a>. There must be a way to add another HTML select<\/a> “dropdown” element to facilitate this? Well, yes, that could be done, but we thought it would be better to dedicate another RJM Programming Landing Page “clone” webpage that has a “cut to the chase” HTML select “dropdown” element substituted for its “listed and clickable” existing HTML select “dropdown” element, and then set it up that either web page can get you to the other “clone” web page, and to the user all they “feel” is the toggling of the “dropdown” data content.<\/p>\n

            So we just used the term “data content”, and that means you need to delve into where the “data” is from. With a WordPress blog, the “data” is from a MySql database, and to do anything about any changes here will revolve around involving a server side language like PHP … no way around that. So what we do is …<\/p>\n