{"id":49089,"date":"2020-05-25T03:01:03","date_gmt":"2020-05-24T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49089"},"modified":"2020-05-24T17:11:47","modified_gmt":"2020-05-24T07:11:47","slug":"wordpress-bold-for-strong-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bold-for-strong-tutorial\/","title":{"rendered":"WordPress Bold for Strong Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/b_to_strong.gif\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Bold for Strong Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/b_to_strong.gif\" title=\"WordPress Bold for Strong Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">WordPress Bold for Strong Tutorial<\/p><\/div>\n<p>It pans out the CSS styling changes introduced for this WordPress Blog outlined in <a title='WordPress Bold Within Code Styling Primer Tutorial' href='#wpbwcspt'>WordPress Bold Within Code Styling Primer Tutorial<\/a> work a lot of the time but not always.   It is when the &lt;b&gt; &#8230; &lt;\/b&gt; &#8220;&#8230;&#8221; bits have more than about four lines worth of data.  So, rather than ditch that CSS &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bold-within-code-styling-primer-tutorial\/'><p>\n&lt;style&gt;<br \/>\n\/* Thanks to https:\/\/cssgradient.io\/blog\/css-gradient-text\/ below *\/<br \/>\n<br \/>\n<b>b:not(.dyk) { <\/b><br \/>\n<b>  background: -webkit-linear-gradient(#eee, #333);<\/b><br \/>\n<b>  -webkit-background-clip: text;<\/b><br \/>\n<b>  -webkit-text-fill-color: transparent;<\/b><br \/>\n<b>}<\/b><br \/>\n<b>code b { <\/b><br \/>\n<b>  background: -webkit-linear-gradient(#eee, #333);<\/b><br \/>\n<b>  -webkit-background-clip: text;<\/b><br \/>\n<b>  -webkit-text-fill-color: transparent;<\/b><br \/>\n<b>}<\/b><br \/>\n&lt;\/style&gt;\n<\/p><\/blockquote>\n<p> &#8230; we settled on an alternative idea.  Being as the &#8220;b&#8221; tag faces <a target=_blank title='Deprecation' href='https:\/\/softwareengineering.stackexchange.com\/questions\/255366\/why-are-the-b-and-i-tags-deprecated'>threats of deprecation<\/a> from the web browser renderers (who&#8217;d rather see you use CSS &#8220;font-weight&#8221; instead), why not &#8230;<\/p>\n<ul>\n<li>detect the scenario of what causes the problem &#8230;\n<ol>\n<li>in good ol&#8217; WordPress Blog TwentyTen theme&#8217;s header.php PHP identify all &lt;b&gt; &#8230; &lt;\/b&gt; &#8220;&#8230;&#8221; bits<\/li>\n<li>count the number of lines in said &lt;b&gt; &#8230; &lt;\/b&gt; &#8220;&#8230;&#8221; bits<\/li>\n<li>if the number of lines if greater than four in any such piece of HTML &#8220;b&#8221; content &#8230;<\/li>\n<li>change all &lt;b&gt; &#8230; &lt;\/b&gt; &#8220;&#8230;&#8221; bits to &lt;strong&gt; &#8230; &lt;\/strong&gt; &#8220;&#8230;&#8221; throughout the content &#8230;<\/li>\n<\/ol>\n<\/li>\n<li>as per &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($post-&gt;post_content)) {  \/\/ Bold to STRONG perhaps<br \/>\n    $bolds=explode('&lt;\/' . 'b' . '&gt;', $post-&gt;post_content);<br \/>\n    $worryb=false;<br \/>\n    for ($ichb=0; $ichb&lt;(-1 + sizeof($bolds)); $ichb++) {<br \/>\n      if (strpos($bolds[$ichb], '&lt;' . 'b' . '&gt;') !== false) {<br \/>\n        $bcontent=explode('&lt;' . 'b' . '&gt;', $bolds[$ichb])[-1 + sizeof(explode('&lt;' . 'b' . '&gt;', $bolds[$ichb]))];<br \/>\n        $crlflines=explode(\"\\n\", $bcontent);<br \/>\n        if (sizeof($crlflines) &gt; 4) { $worryb=true; }<br \/>\n      }<br \/>\n    }<br \/>\n    if ($worryb) {<br \/>\n      $post-&gt;post_content=str_replace('&lt;' . 'b' . '&gt;', '&lt;' . 'str' . 'ong' . '&gt;', str_replace('&lt;\/' . 'b' . '&gt;', '&lt;\/' . 'str' . 'ong' . '&gt;', $post-&gt;post_content));<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p>The colour coding we have been preferring these days such as <font color=blue>&lt;font color=blue&gt; &#8230; &lt;\/font&gt;<\/font> &#8220;<font color=blue>&#8230;<\/font>&#8221; or <font color=red>&lt;font color=red&gt; &#8230; &lt;\/font&gt;<\/font> &#8220;<font color=red>&#8230;<\/font>&#8221; is unaffected by this new logic, and remains an alternative alternative.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bold-for-strong-tutorial\/'>WordPress Bold for Strong Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpbwcspt'>Previous relevant <a target=_blank title='WordPress Bold Within Code Styling Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bold-within-code-styling-primer-tutorial\/'>WordPress Bold Within Code Styling Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/bold_code_wp.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Bold Within Code Styling Primer Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/bold_code_wp.jpg\" title=\"WordPress Bold Within Code Styling Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">WordPress Bold Within Code Styling Primer Tutorial<\/p><\/div>\n<p>Can&#8217;t remember when it happened, but the HTML &lt;b&gt; <b>bold text<\/b> &lt;\/b&gt; is under threat of deprecation, and this has affected how it no longer &#8220;packs a punch&#8221;, in WordPress blog styling, within a &lt;code&gt; <code>code tag text<\/code> &lt;\/code&gt; as it used to.<\/p>\n<p>This has been annoying news for us trying to link a concept with a code snippet.  But all is not lost, as we can try flagging the link in another way, independent of text line thickness (by the way, the &lt;strong&gt; &lt;\/strong&gt; HTML is an alternative to &lt;b&gt; &lt;\/b&gt;, here).  We read about the concept of Text Gradient at <a target=_blank title='Useful link regarding Text Gradient, thanks' href='https:\/\/cssgradient.io\/blog\/css-gradient-text\/'>this useful link<\/a>, thanks, and applied it to our WordPress TwentyTen themed header.php file <b>as per<\/b> the CSS (code) snippet (within the PHP) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n\/* Thanks to https:\/\/cssgradient.io\/blog\/css-gradient-text\/ below *\/<br \/>\n<br \/>\n<b>b:not(.dyk) { <\/b><br \/>\n<b>  background: -webkit-linear-gradient(#eee, #333);<\/b><br \/>\n<b>  -webkit-background-clip: text;<\/b><br \/>\n<b>  -webkit-text-fill-color: transparent;<\/b><br \/>\n<b>}<\/b><br \/>\n<b>code b { <\/b><br \/>\n<b>  background: -webkit-linear-gradient(#eee, #333);<\/b><br \/>\n<b>  -webkit-background-clip: text;<\/b><br \/>\n<b>  -webkit-text-fill-color: transparent;<\/b><br \/>\n<b>}<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; the result of the deployment of which shows you this very affect, to look above <font size=1>(as our golden retriever, Nala, is apt to do &#8230;<br \/>\n<img src='\/\/farm8.staticflickr.com\/7328\/11972198873_0cde4c496f.jpg' title='Nala'><\/img><br \/>\n)<\/font>.<\/p>\n<p>Notice the use of a <a target=_blank title='CSS Combinator' href='https:\/\/www.w3schools.com\/css\/css_combinators.asp'>CSS Combinator<\/a> &#8220;code b&#8221; (ie. the &#8220;descendant selector&#8221;, specifically &#8220;Selects all &lt;b&gt; elements inside &lt;code&gt; elements&#8221;)<br \/>\n &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css_combinators.asp'><p>\nA CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.<br \/>\n<br \/>\nThere are four different combinators in CSS:<br \/>\n<br \/>\ndescendant selector (space)<br \/>\nchild selector (&gt;)<br \/>\nadjacent sibling selector (+)<br \/>\ngeneral sibling selector (~)\n<\/p><\/blockquote>\n<p> &#8230; CSS Selector above, as a tool for that more forensic CSS styling on your webpages!<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>We found with mobile platforms, that within code elements, when a bold (ie. b element tag) had multiple lines to it, the CSS above caused it to only show the first line, so in TwentyTen theme&#8217;s header.php we had to add onload=&#8221; lookforbincode(); &#8221; code as per &#8230;<\/p>\n<p><code><br \/>\nfunction lookforbincode() {<br \/>\n  var cdsis, bsis, icdsa, jcdsa, xbsis, repwith='', kdsis, vparts;<br \/>\nif (navigator.userAgent.match(\/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n  cdsis=document.getElementsByTagName('code');<br \/>\n  for (icdsa=0; icdsa&lt;cdsis.length; icdsa++) {<br \/>\n    bsis=cdsis[icdsa].innerHTML.split('&lt;\/b&gt;');<br \/>\n    for (jcdsa=0; jcdsa&lt;eval(-1 + bsis.length); jcdsa++) {<br \/>\n       vparts=bsis[jcdsa].split('&lt;b&gt;');<br \/>\n       if (vparts[eval(-1 + vparts.length)].indexOf(String.fromCharCode(10)) != -1) {<br \/>\n         xbsis=vparts[eval(-1 + vparts.length)].split(String.fromCharCode(10));<br \/>\n         repwith=\"\";<br \/>\n         if (xbsis.length &gt; 2) {<br \/>\n           for (kdsis=0; kdsis&lt;xbsis.length; kdsis++) {<br \/>\n             repwith+=xbsis[kdsis] + '&lt;\/b&gt;' + String.fromCharCode(10) + '&lt;b&gt;';<br \/>\n           }<br \/>\n           if (repwith != '') {<br \/>\n             \/\/cdsis[icdsa].innerHTML=cdsis[icdsa].innerHTML.replace('&lt;b&gt;' + vparts[eval(-1 + vparts.length)] + '&lt;\/b&gt;', '&lt;b&gt;' + repwith + '&lt;\/b&gt;');<br \/>\n             \/\/if (cdsis[icdsa].innerHTML.indexOf('&lt;b&gt;' + vparts[eval(-1 + vparts.length)] + '&lt;\/b&gt;') != -1) { alert(repwith); } else {   alert('0:' + repwith);   }<br \/>\n             cdsis[icdsa].innerHTML=cdsis[icdsa].innerHTML.replace('&lt;b&gt;' + vparts[eval(-1 + vparts.length)] + '&lt;\/b&gt;', '&lt;strong&gt;' + vparts[eval(-1 + vparts.length)] + '&lt;\/strong&gt;');<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; changing b tags into strong tags in this mobile platform &#8220;b within code&#8221; scenario.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47147' onclick='var dv=document.getElementById(\"d47174\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47147' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49089' onclick='var dv=document.getElementById(\"d49089\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49089' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It pans out the CSS styling changes introduced for this WordPress Blog outlined in WordPress Bold Within Code Styling Primer Tutorial work a lot of the time but not always. It is when the &lt;b&gt; &#8230; &lt;\/b&gt; &#8220;&#8230;&#8221; bits have &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bold-for-strong-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[151,3147,218,257,281,3309,932,997,3307,1209,1212,1319,1324,3308,1456],"class_list":["post-49089","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-bold","tag-code","tag-content","tag-css","tag-font-weight","tag-php","tag-programming","tag-strong","tag-style","tag-styling","tag-tutorial","tag-twentyten","tag-twentytentheme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49089"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=49089"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49089\/revisions"}],"predecessor-version":[{"id":49098,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49089\/revisions\/49098"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}