WordPress Archives | Page 8 of 11 | portalZINE NMN

18. March 2015

Allow SVG files in WordPress Upload

function cc_mime_types( $mimes ){
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function cc_mime_types( $mimes ){

$mimes['svg'] = 'image/svg+xml';

return $mimes;

}

add_filter( 'upload_mimes', 'cc_mime_types' );

Just add that to your themes functions.php.

14. March 2015

Handle WP child-theme functions.php after parent theme

Normally the functions.php in your CHILD theme is called before the PARENT functions.php. In some cases, you might like to alter functionality loaded through the PARENT theme in your CHILD theme, which is not possible without some changes.

From the WordPress Codex :”Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)”

For our new setup, I am using a base class in our PARENT theme to define all our defaults. Some of the CHILD themes need to overwrite or adjust functionality. This allows to have a pure foundation, than alter and extend as needed.

PARENT functions.php
is extending the TimberSite class in my case, as I am using Timber (TWIG for WordPress) for my themes

class cubicFusionBase extends TimberSite {
function __construct(){
 parent::__construct();
}

}
// If no CHILD theme is loading init the parent class

if(CHILD_THEME_LOADED != 1){
 new cubicFusionBase();
}

class cubicFusionBase extends TimberSite {

function __construct(){

parent::__construct();

}

// If no CHILD theme is loading init the parent class

if(CHILD_THEME_LOADED != 1){

new cubicFusionBase();

}

CHILD functions.php

// Do not init the parent class
define("CHILD_THEME_LOADED", 1);

// Wait for theme setup to be finished
add_action( 'after_setup_theme', function() {
 
// Extend parent theme class
 class cubicFusionChild extends cubicFusionBase {
    function __construct() { 
     // Call parent class constructor 
     parent::__construct(); 
  }
  /*
    Add or extend any other functionality here
  */

}
// Init Child class
new cubicFusionChild();
}, 42 );

// Do not init the parent class

define("CHILD_THEME_LOADED", 1);

// Wait for theme setup to be finished

add_action( 'after_setup_theme', function() {

// Extend parent theme class

class cubicFusionChild extends cubicFusionBase {

function __construct() {

// Call parent class constructor

parent::__construct();

}

Add or extend any other functionality here

}

// Init Child class

new cubicFusionChild();

}, 42 );

Cheers
Alex

11. March 2015

Fullpage.js / iScroller Visual Composer Addon for WordPress

I have been working on a full integration of fullpage.js into Visual Composer for WordPress. This allows to easily build fullpage layouts, with different pages and full slide capabilities. Also added iScroller functionality, to allow overflow content to work nicely on certain pages. All of this is working with simple drag & drop :) and can be used by any unexperienced user.

I am currently cleaning up the addon, but I am not sure yet if I will offer it as a commercial addon or keep it for my internal projects only :)

Will post a video later this week.

Cheers
Alex

Visual Composer for WordPress
fullpage.js
iScroller

7. November 2014

Extending the Visual Composer Row element with a new property

Visual Composer for WordPress provides many ways to extend its functionality. There are already many add-ons available for this dynamic page builder, but its easy to do the extending yourself, by following the hints in the documentation ;)

In this small tutorial we are adding a “type” field to allow a special css class to be added to each of our row containers.

New Visual Composer element properties can be easily added by using the vc_add_param function. See documentation for more information. In our case we are adding a property to the vc_row element.
Continue reading Extending the Visual Composer Row element with a new property

31. October 2014

Using Web RTC in your web application

web_rtc

IN A PERFECT WORLD

In a perfect world all current browsers would allow the usage of WebRTC natively, but that is as always not the case ;)

WHAT IS WEBRTC ?

“WebRTC (Web Real-Time Communication) is an API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing without the need of either internal or external plugins.” – Wikipedia

Continue reading Using Web RTC in your web application

30. October 2014

WordPress, WPLMS, Visual Composer and full width content

wplms

I am working on a new website for a customer and we are using the WPLMS (WordPress Learning Management System) as a foundation. The packaged theme is based on Bootstrap.

The theme provides its own page-builder, but we prefer to use Visual Composer, as we built some custom VC-Addons to ease future page updates for our customer and custom content integration. Visual Composer provides some nice full-width addons, which are not working with the current theme layout. I decided to use a custom page template to allow Visual Composer to take over, where needed :) Continue reading WordPress, WPLMS, Visual Composer and full width content

10. May 2014

Make WordPress Contact Form 7 messages multilingual

The Contact Form 7 for WordPress is a nice simple plugin to build contact forms fast. But when it comes to making it completely multilingual it lacks a bit.

I am currently creating a website with 13 different languages, that would mean to create the same contact form 13 times, not really practical :)

I am translating the form labels on the fly with some javascript magic, but for the messages I had to go a bit deeper.

Open wp-content/plugins/contact-form-7/classes.php
Go to line 800 function message

Change this

public function message( $status ) {
		$messages = $this->messages;
		$message = isset( $messages[$status] ) ? $messages[$status] : '';

		$message = $this->replace_mail_tags( $message, true );

		return apply_filters( 'wpcf7_display_message', $message, $status);
	}

public function message( $status ) {

$messages = $this->messages;

$message = isset( $messages[$status] ) ? $messages[$status] : '';

$message = $this->replace_mail_tags( $message, true );

return apply_filters( 'wpcf7_display_message', $message, $status);

}

to this

public function message( $status ) {
		$messages = $this->messages;
		$message = isset( $messages[$status] ) ? $messages[$status] : '';

		$message = $this->replace_mail_tags( $message, true );

		return __(apply_filters( 'wpcf7_display_message', $message, $status ),'textdomain');
	}

public function message( $status ) {

$messages = $this->messages;

$message = isset( $messages[$status] ) ? $messages[$status] : '';

$message = $this->replace_mail_tags( $message, true );

return __(apply_filters( 'wpcf7_display_message', $message, $status ),'textdomain');

}

See how I wrapped the gettext function for the return, that does all the magic.

Next we have to make sure that the messages are being found by localization helpers like Codestyling Localization
In your theme functions.php add a translation for each of the Contact 7 Form messages

The first message in the Contact 7 Form admin says: Your message was sent successfully. Thanks.

$contact_form_msgs = array(
'msg_1' => __('Your message was sent successfully. Thanks.','textdomain'),
'msg_2' => __('Failed to send your message. Please try later or contact the administrator by another method.','textdomain'),
'msg_3' => __('Validation errors occurred. Please confirm the fields and submit it again.','textdomain'),
);

$contact_form_msgs = array(

'msg_1' => __('Your message was sent successfully. Thanks.','textdomain'),

'msg_2' => __('Failed to send your message. Please try later or contact the administrator by another method.','textdomain'),

'msg_3' => __('Validation errors occurred. Please confirm the fields and submit it again.','textdomain'),

);

Do not change these messages in the Contact 7 Form admin anymore or the setup will break. These updates will have to be repeated with each plugin update, unless the author does something similar.
Happy translating.

Cheers
Alex

20. April 2014

WordPress WPML: Custom SELECT to get any translated content by language code

WPML for WordPress is a powerful plugin to build a multi-language setup. But it still comes short in some areas, especially when it comes to a custom integration into plugins or when using custom post-types.

Normally this function should return the id of the linked translated content, but has not worked for me in some cases (especially when AJAX is involved).

icl_object_id( $id, 'custom_post_type', false, $translation_lang );

1	icl_object_id( $id, 'custom_post_type', false, $translation_lang );

A simple SELECT helps to get that id yourself :)

// original_id - main post id
// $translation_lang - translated language code ... de, nl ...

global $wpdb;

$translation = $wpdb->get_results("SELECT * from wp_icl_translations where trid = (SELECT trid from wp_icl_translations where element_id = '".$original_id."' and element_type='post_page') and language_code='".$translation_lang."'");

$post = get_post($translation[0]->element_id, ARRAY_A);

// original_id - main post id

// $translation_lang - translated language code ... de, nl ...

global $wpdb;

$translation = $wpdb->get_results("SELECT * from wp_icl_translations where trid = (SELECT trid from wp_icl_translations where element_id = '".$original_id."' and element_type='post_page') and language_code='".$translation_lang."'");

$post = get_post($translation[0]->element_id, ARRAY_A);

10. April 2014

WordPress Admin + Plugin Development + Less + Bootstrap = Awesome

Bootstrap can not be added directly to the admin of a plugin, but you can wrap your plugin in a container and compile the Bootstrap CSS to use it as a wrapper.

I do my compiling using SimpLess

In the past you could do this using SimpLess directly (my-own-bootstrap.less).

.bootstrap-wrapper {
	@import (less) url( 'bootstrap.css' );
}

.bootstrap-wrapper {

@import (less) url( 'bootstrap.css' );

}

This fails with the latest version of Bootstrap. But you can just paste the Bootstrap CSS into the LESS file and compile it that way.

.bootstrap-wrapper {
	// Paste Bootstrap CSS here
}

.bootstrap-wrapper {

// Paste Bootstrap CSS here

}

Run it through SimpLess and after that the new CSS can be enqueued in WordPress ! This also works nicely with themes from Bootswatch.

wp_enqueue_style( $this->plugin_slug .'-my-bootstrapstyle', plugins_url( 'css/my-bootstrapstyle.css', __FILE__ ), array(), $this->version );

1	wp_enqueue_style( $this->plugin_slug .'-my-bootstrapstyle', plugins_url( 'css/my-bootstrapstyle.css', __FILE__ ), array(), $this->version );

Enjoy!

26. November 2013

WordPress OpenGraph integration

NGFB Open Graph+ Pro is currently the best plugin around, when it comes to well integrated OpenGraph integration into WordPress.

“NGFB Open Graph+ adds Open Graph, Pinterest Rich Pins, Twitter Cards, and Search Engine Optimization HTML tags to the head section of webpages.”

NGFB