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).
- Twenty Fourteen Theme CustomizationWordPress 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. The first thing I want to do is to add excerpts and thumbnails to the index – front page. For the thumbnails, I get the “get_the_image.php” and place it in the original Twenty Fourteen theme. Add the scripts to the function.php if (!function_exists(‘get_the_image’)) { require_once “get-the-image.php”; } function custom_excerpt_length( $length ) { return 50; } add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 ); I also need to edit the content.php of the original theme to display thumbnails size and excerpts <?php if ( is_search()||is_author()||is_tag()||is_archive()||is_home() ) : // Only display Excerpts for Search ?> <div class=”entry-summary”> <?php get_the_image( array( ‘size’ => ‘main’, ‘width’ => 200, ...
- Install XAMPP 1.8.3 And WordPress 3.9 On Mac OS X Mavericks 10.9.2On the new XAMPP 1.8.3 and WordPress 3.9, there are a few problems that need to be addressed before we can really use the 2 systems perfectly on Mac OS X, especially Mavericks 10.9.2. Xampp installer will install Xampp folder in the Application folder, this causes permission problems. To fix these problems, we need to add some scripts to the wp-config.php. ***When you copy and paste the codes, you may have to retype due to characters difference*** define(‘FTP_HOST’, ‘localhost’); define(‘FTP_USER’, ‘daemon’); define(‘FTP_PASS’, ‘xampp’); if(is_admin()) { add_filter(‘filesystem_method’, create_function(‘$a’, ‘return “direct”;’ )); define( ‘FS_CHMOD_DIR’, 0751 ); }
- Replace A String With New String For All Posts In WordPressNow 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’);
- Jquery Collapse-O-Matic Plugin01/25/2016 I no longer use the plug-in – I use bootstrap collapsible now. I really like the Jquery Collapse-O-Matic plugin. It does make the long page looks better. Since I used so many Jquery application, I have to make .noconflict for this plugin to work with Fancybox using old jquery 1.25 which doesn’t work with Collapse-O-Matic using 1.9.1. The plugin loads “js/collapse.min.js” and “dark_style.css” or “light_style.css” automatically to the header. I need to manually create modify “collapse.min.js” to ‘collapse_fix.js’ for noconflict jquery. Rename the “js” folder to ‘js1’ so the plugin doesn’t load the correct ‘collapse.min.js’. Modify ‘collapse.min.js’ for jquery noconflict. Replaced all jQuery in the script to jQuery_omatic then save it to collapse_fix.js, then apply noconflict script above the link of the “collapse_fix.js” in the footer like so. <!–Collapse-O-Matic–> <!– load jQuery 1.9.1 –> <script src=”//code.jquery.com/jquery-1.9.1.js“></script> <script type=”text/javascript”> var jQuery_omatic = $.noConflict(true); </script> <script src=”/idogjs/collapseomatic/collapse_fix.js” type=”text/javascript”></script> <!–End Collapse-O-Matic–> place these lines in the custom style section .collapseomatic { color: #F3A333; } .colomat-close { color: #5AF333; } .colomat-visited { color: #F33333; } There are many pop-ups (modals) software out there to make the page display pictures and other stuff looks beter. These are some of the ...
- Speed Up The Web PagePageSpeed 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