Since WordPress is php based, in order to use shortcodes on the sidebar or anywhere on the theme, we have to use echo.
<h2><?php echo do_shortcode(‘ catlist categorypage=yes excerpt=yes excerpt_size =255)]’); ?></h2>
This is the shortcodes for catlist to list related posts in the same category on the sidebar for my single.php that I’m designing right now (the right bracket before ‘catlist’ is missing).
- Shortcodes For Boostrap CollapsibleI like to use Bootstrap for my blogs, so I created a few shortcodes for collapsible and link buttons when I need to use them. add_shortcode( ‘mybs’, ‘mybs_func’ ); function mybs_func($atts, $content = null) { extract(shortcode_atts(array( ‘data’ => ”, ‘title’ =>”, ), $atts)); return ‘”< “button class=”btn btn-info” type=”button” data-toggle=”collapse” data-target=”‘.’#’.$atts.”. ‘ “< “div id=”‘.$atts.'” class=”collapse”>’.$content.'< “/”div> ‘ ; } add_shortcode( ‘bs’, ‘bsscript’ ); function bsscript() { return ‘ ‘ ; } include ‘bs_full.php’; in function.php use shortcode to load the bs scripts use shortcode Make button links with different color display. technologies today <a href=”//www.dognmonkey.com/techs”></a> add_shortcode( ‘bsblue’, ‘bsbutton2’ ); function bsbutton2($atts, $content = null) { extract(shortcode_atts(array( ‘data’ => ”, ), $atts)); return ‘<button type=”button” class=”btn btn-primary”>’.$content.'</button>’ ; } technologies today <a href=”//www.dognmonkey.com/techs”></a> add_shortcode( ‘bsred’, ‘bsbutton1’ ); function bsbutton1($atts, $content = null) { extract(shortcode_atts(array( ‘data’ => ”, ), $atts)); return ‘<button type=”button” class=”btn btn-danger”>’.$content.'</button>’ ; } technologies today <a href=”//www.dognmonkey.com/techs”></a> add_shortcode( ‘bsgreen’, ‘bsbutton3’ ); function bsbutton3($atts, $content = null) { extract(shortcode_atts(array( ‘data’ => ”, ), $atts)); return ‘<button type=”button” class=”btn btn-success”>’.$content.'</button>’ ; }
- How To Remove Scripts On Mobile DevicesI use responsive viewport tags for my blogs and they’ve been working every well across all mobile devices. I have a jQuery called imgPreview and it works quite well on Desktops and tablets, but not well on small devices like iPhones, Android Phones, iPod Touches. I created a footer-phone.php to remove all scripts that don’t work well for small width devices. Now I need to load the footer-phone.php for all small mobile devices. Wordpress has wp_is_mobile() that works quite well for detecting mobile devices, but I want the imgPreview to work with Tablets: iPads, Android and Windows tablets. Mobile_Detect.php comes handy since it detects phones and tablets. This is how I did mine and it seems to work very well, imgPreview works on Desktop and iPads, Android pads. Download Mobile_Detect.php to the theme root folder. Add these codes to Theme function.php. (credit to Astrotim) require_once(‘Mobile_Detect.php’); function md_is_mobile() {$detect = new Mobile_Detect; if( $detect->isMobile() && !$detect->isTablet() ){ return true; } else { return false; } } Since imgPreview only exists in single page only, so we need to redirect footer-phone.php in Theme single.php. <?php if (md_is_mobile()){ get_footer(phone);}else{get_footer(single);} ?> When the single.php is loaded, the function.php will check for mobile, desktop and tablet devices: footer-phone.php will be loaded for mobile, footer-single.php for desktop and tablet devices.
- Detect and Warn IE8 To Update With Responsive ThemesFor web developers, Internet Explorer (ie6-9) have always been incompetent browsers and cause so much problems due to their incompatibility with conventional CSS. Many years later, the technology geared toward mobile devices and responsive themes are developed and make everything easier for desktop and mobile devices to use the same theme. There are still some ie8 or older computers out there surfing the internet, we can’t exclude these old goats. Anyhow, the problem with ie8 or older is that it will only display mobile theme css instead of Desktop css. Thanks to many coders out there that write codes to detect and recommend these ie8 users to update to the new and usable ie10 or ie11, the popular one is Browser-Update.org. All we need to do is to embed a script to our footer and it will recognize and ask ie8 and some old browers people to update their browsers. <!–script> var $buoop = {c:2}; function $buo_f(){ var e = document.createElement(“script”); e.src = “//browser-update.org/update.min.js”; document.body.appendChild(e); }; try {document.addEventListener(“DOMContentLoaded”, $buo_f,false)} catch(e){window.attachEvent(“onload”, $buo_f)} </script–> When we click the update your browser, the banner with all popular browsers icons for us to update.
- Selected Boot Image Did Not AuthenticateMy daughter HP Envy 4-1115dx laptop booted up with the black screen and blue banner “Selected boot image did not Authenticate – Press <Enter> to Continue.”, when I press <Enter>, the laptop shuts down. The problem was she some how hit F10 to access bios and selected the “Reset To Default” by mistake, the legacy support was disabled and the “Secure Boot” was enabled. The boot image was El Capitan OS X only supported with Legacy and Secure Boot disabled. All I had to do was turned on the power, hit F10 to get to the bios and set Legacy support to Enabled and Secure Boot was Disabled automatically. After F10 to save and reboot, I had to enter a 4 digit number to confirm and everything is back to normal.
- Centilium WordPress ThemeI stumbled onto Centilium Theme while looking for a theme that supports mobile devices native. It’s quite a nice theme, although it needs some customization for my websites. Anyhow, I documented all the customization I did on this post for future references. Features that need to customize: Next/Prev posts: I want to display the post names – need to modify the function.php Add content-post bullets and number ol and ul without affecting the sidebar: add lines in the style.css Remove the Author box: remove in single.php