Add Shortcodes To Sidebar

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).

  • Create Responsive Theme For WordPress With Twenty Ten In 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 ...
  • How To Remove Scripts On Mobile Devices I 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.             
  • Centilium WordPress Theme I 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      
  • Author Avatar Picture In WordPress 3.9.X My aunt asked me to show her picture on her WP blog for author instead of these self generated avatar. After searching on the internet, here is how I did it for her. The code needed in the functions.php of the theme. The code needed in the loop (main) and loop-single (post). <?php echo get_avatar( get_the_author_email(), ’60’ ); ?> 60 is the size of the image in pixels. loop <span class=”comments-link”><?php comments_popup_link( __( ‘Leave a comment’, ‘twentyten’ ), __( ‘1 Comment’, ‘twentyten’ ), __( ‘% Comments’, ‘twentyten’ ) ); ?></span> <?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”meta-sep”>|</span> <span class=”edit-link”>’, ‘</span>’ ); ?> <?php echo get_avatar( get_the_author_email(), ’60’ ); ?> loop-single <div class=”entry-meta”> <?php twentyten_posted_on(); ?>&nbsp;-&nbsp;<?php twentyten_posted_in(); ?>&nbsp;<?php the_views(); ?>&nbsp;<small><span class=”st_sharethis_hcount”></span></small><div class=”fb-like” data-href=”” data-send=”false” data-layout=”button_count” data-width=”450″ data-show-faces=”true” data-font=”lucida grande” data-colorscheme=”dark”></div> <?php echo get_avatar( get_the_author_email(), ’60’ ); ?> We do need avatar picture loaded, I use Author Image plug-in, it’s easy to use.
  • Twenty Fourteen Theme Customization WordPress 3.9 came out and theme Twenty Fourteen came with it. The theme is great, but it does kill many of the mootools and older jqueries scripts that I’ve been using like Mediabox Advance and FancyBox 1.3.4. Anyhow, this is how I modified a Twenty Fourteen Theme. My goal is to have 3 colors on the page gradually lightened – I called my twenty fourteen – black because I like dark themes. I read many fixes and posts on the websites and I try to give credit to the original writers, but some I really forgot where I got my information from, I’m really sorry.
  • Replace A String With New String For All Posts In WordPress Now WordPress is at version 3.9 and the new theme “Twenty Fourteen” is supposed to be the best free theme ever, but the theme does kill 2 of my plug-ins Mediabox Advanced and FancyBox 1.3.4. So, if I want to use Twenty Fourteen after I’m done modifying it, I have to replace the class strings of FancyBox with stings of FancyBox 2 and Mediabox Advanced with Slimbox 2.0.5 or ShadowBox. FancyBox 1.3.4 I used ‘class=”ib”‘ for iFrames and FancyBox 2 ‘class=”ib2 fancybox.iframe” – To replace all posts that are using ‘class=”ib”‘ I need to edit the function.php of the “twenty fourteen” theme and add a function like this. This function will replace all posts with ‘class=”ib”‘ with ‘class=”ib2 fancybox.iframe”‘. function replace_fancybox_to_fancybox2($content) {        return str_replace(‘class=”ib”‘, ‘class=”ib2 fancybox.iframe”‘, $content);     } add_filter(‘the_content’, ‘replace_fancybox_to_fancybox2’); One more way function replace_ib($content) { $content = str_replace(‘class=”ib”‘, ‘class=”ib2 fancybox.iframe”‘,$content); return $content; } add_filter(‘the_content’,’replace_ib’);
  • Speed Up The Web Page PageSpeed Insights .htaccess (public)/wp Set time to expire at least 30 days. # BEGIN Expire headers <ifModule mod_expires.c> ExpiresActive On ExpiresDefault “access plus 5 seconds” ExpiresByType image/x-icon “access plus 2592000 seconds” ExpiresByType image/jpeg “access plus 2592000 seconds” ExpiresByType image/png “access plus 2592000 seconds” ExpiresByType image/gif “access plus 2592000 seconds” ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds” ExpiresByType text/css “access plus 604800 seconds” ExpiresByType text/javascript “access plus 2592000 seconds” ExpiresByType application/javascript “access plus 2592000 seconds” ExpiresByType application/x-javascript “access plus 2592000 seconds” ExpiresByType text/html “access plus 600 seconds” ExpiresByType application/xhtml+xml “access plus 600 seconds” </ifModule> # END Expire headers # BEGIN Cache-Control Headers <ifModule mod_headers.c> <FilesMatch “(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$”> ExpiresActive On ExpiresDefault A2592000 </FilesMatch> <filesMatch “\.(x?html?|php)$”> Header set Cache-Control “private, must-revalidate” </filesMatch> </ifModule> # END Cache-Control Headers Besides desktop page speed, we need to optimize the mobile pages also.       Minify the css and js. Place small css on the header instead of using css file.       For desktop optimization  
  • Working With Z-Index In CSS In CSS, z-index is the order of appearance of one layer over the other, the higher the z-index the higher priority of the layer above the lower z-index displays. For example, on my theme, I made header to be fixed with z-index:9999 and my shadowbox overlay z-index:999 . So, on a small display like 1024×768, there’s not enough room for both header and the shadowbox overlay, the shadowbox display will be UNDER the header because the z-index is lower.                   Always test all the overlay modals over any fixed css or youtube.

Leave a Reply

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