Simple add this to your wp-config.php
|
1 2 |
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']); define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']); |
Use the MU-Domain-Mapping plugin for that.
We often have some posts that we would like to promote and keep at the first page of the blog. When you are using pagination, the sticky posts will be added to the standard posts, making the post count per page uneven.
If you want to keep your posts per page count consistent, there is a way to do that.
|
1 2 3 4 5 6 7 8 9 10 11 |
global $paged; if (!isset($paged) || !$paged){ $paged = 1; } // Set posts per page $posts_per_page = 8; // Get sticky posts $sticky = get_option( 'sticky_posts' ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// First page and has stickies if($paged == 1 && !empty($sticky)) { $args = array( 'post_type' => 'post', 'paged' => $paged, // Adjust posts per page by subtracting the amount of stickies 'posts_per_page' => $posts_per_page - count($sticky) ); }else{ $args = array( 'post_type' => 'post', 'paged' => $paged, 'posts_per_page' => $posts_per_page, // making sure the 2nd page starts with the right post 'offset' => (($paged-1)*$posts_per_page) - count($sticky) ); } // Do query query_posts($args); |
Sometimes you want to add your own avatar for a user or build your own special predefined avatar selection :)
BuddyPress stores avatars in /wp-content/uploads/avatars/ – USERID – /
BuddyPress hashes the original filename and stores full and thumbnail images in the above directory.
|
1 2 3 |
$full_filename = wp_hash( "ORIGINAL-FILENAME" . time() ) . '-bpfull.' . $FILE_EXTENSION; $thumb_filename = wp_hash( "ORIGINAL-FILENAME" . time() ) . '-bpthumb.' . $FILE_EXTENSION; |
Now go ahead and build your own integration around that ;)
When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.
I decided to work around that, to allow animations to be triggered when elements become visible or invisible to the viewport.
You could code the viewport visibility check yourself or use the “visible” jquery plugin.
“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.” jquery-visible on Github
The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.
|
1 2 3 |
$(selector).slimScroll().bind('slimscroll', function(e, pos){ console.log("Reached " + pos"); }); |
|
1 2 3 |
$(selector).slimScroll().bind('slimscrolling', function(e, pos){ console.log("Reached " + pos"); }); |
This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
var currentScrollDirection = "down"; var currentScrollPosition = 0; $("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){ // Top has been reached if(cPos == 0){ currentScrollDirection = "down"; } // Scrolling up or down? if(currentScrollPosition > pos){ currentScrollDirection = "up" }else{ currentScrollDirection = "down" } // Store current position to compare on next check currentScrollPosition = pos; // Our scroll element var element = $(this); // Using the class "reveal" for all elements to track within // Loop over elements on scroll element.find(".reveal").each(function(){ // using the visible plugin if ($(this).visible(true) ) { // add inView and direction classes $(this).addClass("inView") .removeClass("outView") .removeClass("up") .removeClass("down") .addClass(direction); }else{ // add outView class and handle other classes $(this).addClass("outView") .removeClass("up") .removeClass("down") .removeClass("inView"); } }) |
|
1 2 3 4 5 6 7 8 |
<div class="scrollArea"> <div id="elOne" class="reveal"> </div> <div id="elTwo" class="reveal"> </div> <div id="elThree" class="reveal"> </div> </div> |
Very basic idea to get some transitions working.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.inView.down{ border-left:4px solid red; opacity: 1; animation: scaleUpDown 1.5s ease both; } .inView.up{ border-left:4px solid blue; opacity: 1; } .outView{ opacity: .6; -webkit-transition:opacity 1500ms ease-out; -moz-transition:opacity 1500ms ease-out; -o-transition:opacity 1500ms ease-out; transition:opacity 1500ms ease-out; } @keyframes scaleUpDown { from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)}; to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)}; } |
Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do :)
There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll :)
I am working on an Addon for WPLMS to automate some of the manual tasks. Will extend the list, as things progress.
|
1 2 3 4 5 6 7 8 9 10 11 |
if ( (isset($_GET['action']) && $_GET['action'] != 'logout') || (isset($_POST['login_location']) && !empty($_POST['login_location'])) ) { add_filter('login_redirect', 'my_login_redirect', 10, 3); } function my_login_redirect() { $location = $_SERVER['HTTP_REFERER']; wp_safe_redirect($location); exit(); } |
|
1 2 3 4 5 6 7 8 9 10 |
add_action( 'unload_textdomain', 'my_unload_textdomain' ); function my_unload_textdomain( $domain ) { switch($domain){ case "remove_textdomain": unload_textdomain( 'remove_textdomain' ); load_plugin_textdomain( 'remove_textdomain', false, $your_location.'/languages/' ); break } } |
Sometimes you might like to store all language files in your own central location, so that translators have one easy place to access all language files.
Put the above into the functions.php and add textdomain handling for those you want to centralize.
Most current plugins should include the option to store language files to the global WordPress language folder, but that is sometimes just not enough :) Its all about options ;)
WPLMS is a Learning Management System for WordPress. Translation files in WPLMS are located in
These language files will be overwritten with new files on every update, destroying any custom translation changes.
Move your theme into a child theme and translate your theme there (/wp-content/themes/your-child-theme/languages/).
Make sure that language files are loaded from your child theme. Add the following action to your functions.php and use “vibe” as the domain, not the actual theme name.
|
1 2 3 4 5 |
add_action( 'after_setup_theme', 'my_child_theme_setup' ); function my_child_theme_setup() { load_child_theme_textdomain( 'vibe', get_stylesheet_directory() . "/languages" ); } |
Use the global language folder for the WPLMS plugin translations. The WPLMS plugin loader checks, if a global language file actually exists :)
|
1 2 3 4 5 |
if ( file_exists( $mofile_global ) ) { load_textdomain( 'vibe', $mofile_global ); } else { load_textdomain( 'vibe', $mofile_local ); } |
I suggest using Poedit, as it allows you to do the translation on the Desktop. It also offers options to update your file with an updated WPLMS language file, allowing you to add new translation strings if needed :)
A. Create the structure for the update and download new PO files from WPLMS
B. The target structure / your current language files
C. Open your current .PO file from target structure
D. Update with new and matching .PO file from A. (Catalog -> Update from POT file)
This will check for new or obsolete strings and update your language file.
E. New strings added
F. Obsolete strings removed
G. Save and upload updated .PO + .MO files from target structure to server.
Again, make sure to use the global language folder and the child theme languages folder !
Panic time after updates is over :)
TWIG allows you to use regular expressions within its templates, this makes it possible to easily check if a post is sticky in Timber for WordPress.
|
1 2 |
{% if findme matches '/^[\\d\\.]+$/' %} {% endif %} |
This is the template that is called within the loop on the index.twig to show each post.
|
1 2 3 4 5 6 |
{% extends "tease.twig" %} {% block content %} <div class="{% if post.class matches '/sticky/' %}col-md-12{% else %}col-md-6{% endif %}"> <!--Your content --> </div> {% endblock %} |
The post.class holds the full set of classes assigned to a post, which includes the class “sticky”. We do the match magic and you can use that to style your sticky posts differently ;)
“Timber helps you create fully-customized WordPress themes faster with more sustainable code. With Timber, you write your HTML using the Twig Template Engine separate from your PHP files.
This cleans-up your theme code so, for example, your php file can focus on being the data/logic, while your twig file can focus 100% on the HTML and display.”
Twig is a modern template engine for PHP
When building plugins or addons, sometimes we need to save custom files within WordPress.
These can be custom JavaScript or CSS files that a user edited and are loaded to override core functionality.
In most cases inline styles and scripts are an option, but not always the most elegant way. Everyone has to decide that for themselves. (wp_add_inline_style) Not talking about performance between inline and external files here :)
Another option is the wp_head action:
|
1 2 3 4 5 6 |
add_action('wp_head','hook_css'); function hook_css(){ $output="<style> .wp_head_example { background-color : #f1f1f1; } </style>"; echo $output; } |
Many ask where can or should I save files created within a plugin.
When dealing with file creation and uploads, security is always important. That relates to any other platform doing similar operations. A folder created within a plugin directory is not less or more secure than a folder created in the upload directory.
Its important to have the correct file and folder permissions set:
There is a detailed article about permissions over at WordPress as well.
When it comes to creating files in PHP the term cross-site-scripting often comes up. When the system creates a file it is owned by the webserver and on a shared hosting account those files could be altered by another user on the same webserver. This could allow them to inject malicious code and compromise your sever.
That is why the WP_Filesystem was created, to make things more secure and make sure that the owner of files is correct.
WordPress provides a nice clean interface to create folders and save files to the upload folder. Here a simple example from one of my current projects.
Prepare the filesystem
|
1 2 |
require_once( ABSPATH . 'wp-admin/includes/file.php' ); global $wp_filesystem; |
Get upload dir information and prepare directory to save to
|
1 2 3 |
$upload_dir = wp_upload_dir(); $dir = trailingslashit( $upload_dir['basedir'] ) . 'your folder/'; |
Check if file exists, create folder, delete similar and save.
In my case I am adding a custom key and the page id to the file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$key = md5($js); if (!is_file($dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js")) { WP_Filesystem(); // Create main folder within upload if not exist if(!$wp_filesystem->is_dir($dir) ) { $wp_filesystem->mkdir( $dir ); } // Create a subfolder in my new folder if not exist if(!$wp_filesystem->is_dir($dir."/subfolder") ) { $wp_filesystem->mkdir( $dir."/subfolder" ); } // Delete similar files, might not apply to you foreach (glob($dir . "/subfolder/yourfile_" . get_the_ID() . "_*.*") as $filename) { unlink($filename); } // Save file and set permission to 0644 $wp_filesystem->put_contents( $dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js", $js, 0644 ); } |
If the direct way is not possible, you can also use or force the FTP approach
(request_filesystem_credentials).
This will check for the ftp credentials and request them with a form if needed.
|
1 2 3 4 |
if ( ! WP_Filesystem($creds) ) { request_filesystem_credentials($url, $method, true, false, $form_fields); return true; } |
This is just a very rough outline of how to do it, but should get you started.