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).
- Magnific-PopupMagnific-Popup is a responsive lightbox. I modified the zoom-gallery.js to idoggallery.js using class=”idoggallery” for easy to remember. For image with no links use “igallery” and title only. Use “title” and “mylink” on href to display caption and create a link… <div class="idoggallery"> <p style="text-align: center;"><a class="preview" title="macOS Sierra On Windows Laptops" href="https://www.dognmonkey.com/mythemes/wp-content/uploads/z_macOS_Sierra.jpg" mylink="//www.dognmonkey.com/techs/macos-sierra-on-mac-wanna-be-windows-laptops.html"><img class="alignnone size-thumbnail wp-image-6013" src="//www.dognmonkey.com/techs/wp-content/uploads/z_macOS_Sierra-200x112.jpg" alt="macOS Sierra On HP Windows Laptop" width="200" height="112" /></a>
- Create Responsive Theme For WordPress With Twenty TenIn order for the blogs or website to be popular, they must be mobile friendly since mobile devices are on the rise. I’m sure there are many efficient themes for WordPress that support mobile devices, but I like to create a simple one for my blogs using Twenty Ten WordPress theme. This is how I modify the original theme since it’s no longer supported and updated. The goal is to have a theme that adjust the viewports to accommodate all screen sizes to read clearly and easily with both fonts, images and videos. I did create 2 css’s: 1 for the index and 1 for the single For all screens width above 1280px, full screen design. For all screens width greater than 800px but less than 1280px, we should have sidebar and content resized to fit (35% and 65% respectively), the footer widgets (50%). For all screens width less than 800px, we should have content, footer, sidebar widths = 100%, we increase font size t0 105%. For all screens width max-width = 600px, include all smart phones, we increase font size 110%. Page Speed Test Google To solve Android browsers NOT scrolling, use <meta name=“viewport” content=“width=device-width, initial-scale=1.02”>, increase the initial-scale=1.02 instead of 1.0. Or we can remove ...
- Fotorama.io In WordPress Without PluginFotorama.io V4.6.4 is a great Gallery display for WordPress. There is a plugin made for WP, but I want to customize for my website and NOT to load all scripts all the time, only when I need to use it. I do prefer this plugin over Galleria.io or lightGallery. I’ve been using the plugin for WP on many of my posts, so the shortcode for and my new shortcodes. add_shortcode( ‘myfotorama’, ‘myfotorama’ ); function myfotorama() { return ‘<link href=”/idogjs/fotorama464/fotorama.css” rel=”stylesheet”><link href=”/idogjs/fotorama464/fotorama-wp.css” rel=”stylesheet”><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script><script src=”/idogjs/fotorama464/fotorama.js”></script><script src=”/idogjs/fotorama464/fotorama-wp.js”></script>’ ; } This shortcode is for the images with all the options I want add_shortcode( ‘fotorama_body’, ‘my_body’ ); function my_body($atts, $content = null) { extract(shortcode_atts(array( ‘data’ => ”, ‘title’ =>”, ), $atts)); return ‘<div class=”fotorama” data-width=”600″ data-keyboard=”true” data-transition=”crossfade” data-allowfullscreen=”true” data-nav=”thumbs” data-arrows=”true” data-click=”true” data-swipe=”true” data-trackpad=”true” data-hash=”true”>’.$content.'</div>’ ; } In order for the shortcode to work, I need to copy the script from the plugin. add_shortcode(‘gallery’, ‘fotorama_gallery_shortcode’); add_shortcode(‘fotorama’, ‘fotorama_gallery_shortcode’); function fotorama_gallery_shortcode($atts) { if (!$atts) { $atts = array(); } if (array_key_exists(‘fotorama’, $atts) && $atts == ‘false’) { return gallery_shortcode($atts); } $atts = ‘file’; $atts = ‘dl’; $atts = ‘dt’; $atts = ‘dd’; $atts = 0; if (array_key_exists(‘orderby’, $atts) && $atts == ‘rand’) { $atts = ”; $atts = ‘true’; } $atts = ‘thumbnail’; $gallery = gallery_shortcode($atts); $width = array_key_exists(‘width’, $atts) ? ...
- Galleria.io In WordPressGalleria.io is a very nice gallery display for website, but the classic version is very basic and not very well documented to get it working responsively like the paid version, at least in my opinion. I finally customized the classic version so I can use with Wordpress, but I think I prefer Fotorama.io for my blogs. I just write up how I customized the Galleria.io to work with my responsive theme nicely. The “Fatal error: Could not extract a stage height from the CSS. Traced height: 0px” happens quite often until you set the “wait: 10000” = 10 sec from default of 5sec. The Responsive is not working every well across viewports and devices until you customize your own CSS. FWIW, it’s quite a nice galleries display for the website. add_shortcode( ‘galleria’, ‘mygalleria’ ); function mygalleria() { return ‘<script src=”//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”></script><script src=”/idogjs/galleria/galleria-1.4.2.min.js”></script> <script type=”text/javascript”> var $Galleria=jQuery.noConflict(); $Galleria(document).ready(function(){ }); </script>’ ; } add_shortcode( ‘galleria_end’, ‘mygalleria_end’ ); function mygalleria_end() { return ‘<script src=”/idogjs/galleria/galleria_end.js” type=”text/javascript”></script>’ ; } add_shortcode( ‘galleria_start’, ‘mygalleria_start’ ); function mygalleria_start() { return ‘<script src=”/idogjs/galleria/galleria_start.js” type=”text/javascript”></script>’ ; } add_shortcode( ‘galleria_div’, ‘galleriadiv’ ); function galleriadiv($atts, $content = null) { extract(shortcode_atts(array( ‘data’ => ”, ), $atts)); return ‘<div class=”galleria”>’.$content.'</div>’ ; } galleria_start.js if (Galleria) { $Gallery(“body”).text(‘Galleria works’) } galleria_end.js Galleria.loadTheme(‘/idogjs/galleria/themes/classic/galleria.classic.min.js’); Galleria.run(‘.galleria’, { lightbox: true, responsive: true, wait: 10000, showInfo: true }); .galleria{background:#000;width:800px;height:600px;}@media all and (max-width:768px){.galleria{background:#000;width:500px;height:360px;}@media screen and (max-width:380px){.galleria{background:#000;width:340px;height:290px;}@media all and (max-width:480px){.galleria{background:#000;width:340px;height:290px;} [mybs data=”4″ ...
- Increase In 404 Pages On… Google BotsI received multiple “Increase in 404 pages on ‘mywebsite'” messages from Google Search Console after I’ve created new responsive theme for my blogs. I had no idea how to fix, tired of searching the answer without any solutions. I decided to check all my style.css and sure enough, the ones I used on the reported blogs had some errors. The errors were from commenting the unused part NOT fully due to many comment tag “/*” “*/”, some canceled out each others. When I removed all the comment tags, there isn’t any more report 404. The CSS caused the website to create a link to a url with title “/<div = /%3Cdiv” or “/<li = /%3Cli” whichever the case may be.