• Date
  • Title
  • Votes
  • Views
  • Desc
  • Asc

GeneratePress Integration

GeneratePress is an amazing theme that is really flexible but there is a few things that need to be changed so existing styles do not override the plugins and extraneous widgets are removed so Pixelmenu can work at full capacity.

How to integrate Pixelmenu with GeneratePress

It’s bad practice to edit the core files of any theme or plugin that you download. Everytime you update, your changes will be erased and you will have to start again. To get around this, WordPress uses child themes. GeneratePress has kindly provided a child theme for users to implement.

1. Download Generate Press Child Theme, Install and Activate

http://generatepress.com/api/themes/generatepress_child.zip

2. Override GeneratePress Navigation Bar

Go to the child themes functions.php file and place the following code at the bottom:


/* Overide the theme's menu with Pixelmenu */
function generate_navigation_position(){
wp_nav_menu( array( 'theme_location' => 'primary' ) );
}

/* Stop the theme from changing the menu output */
add_action( 'wp_head' , 'pb_halt_generatepress_menu_filter' );
function pb_halt_generatepress_menu_filter(){
remove_filter( 'walker_nav_menu_start_el', 'generate_nav_dropdown', 10, 4 );
}

The above code will stop GeneratePress overwriting the navigation output and allow Pixelmenu to work freely, there is just one more step that needs to be completed.

3.Make Pixelmenu Obey the Site Width

After you have completed step two, the menu will be full width, to make it obey the themes existing container width you need to make one adjustment.

Go to: WP-admin > customize > Pixelmenu > Primary > Navbar > General

You will see an option field called Container Class. You will need to enter the following text in the box and hit save: grid-container

Pixelmenu will now be fully integrated and working with GeneratePress.

0 People Found This Helpful.

Viewed 324 times.

Extend PixelMenu with New Link Animations

Below is a snippet utilizing the custom developer api filter: pixelmenu_filter_default_link_animations

function prefix_extend_pixelmenu_link_animations($animations){
$animations['Animation Name'] = 'prefix-animation-class';
return $animations;
}
add_filter('pixelmenu_filter_default_link_animations', 'prefix_extend_pixelmenu_link_animations');
0 People Found This Helpful.

Viewed 251 times.

Add a New PixelMenu Option

We included an advanced API for developers who wish to extend the default available options. If you add an option we recommend adding any classes to the body element allowing you to target the navigation menu still.

Practical Example

function prefix_add_menu_option(){
    
    pixel_add_menu_option(
        array(
            'type'  => 'dropdown',
            'desc'  => 'Should dropdowns open on hover or click by default? You can override this option on a per item basis',
            'id'    => 'default_dropdown_trigger',
            'label' => 'Dropdown Trigger',
            'default' => 'click',
            'category' => 'General',
            'sub_category' => '',
            'source' => array(
                __('Hover', 'pixel-menu' ) => 'hover',
                __('Click', 'pixel-menu' ) => 'click',
            ),
      
        )
    );

}
add_action('pixel_add_new_menu_option', 'prefix_add_menu_option');
1 People Found This Helpful.

Viewed 229 times.

Extend PixelMenu with New Icons

We made it reasonably easy to extend icons in PixelMenu for WordPress there are just a few things you need to have:

1. The frontend ‘pretty name’
2. A name for the array
3. The css file location
4. The icon prefix inside the file
5. A prefix class used for output

Our function will read the file you input and gather up all of the icons in the files based on the other input variables.

Practical Example

The following example would load the font css file from http://www.yourdomain.com/wp-content/themes/theme-namem/assets/fonts/font-awesome/css/font-awesome.css with a ui display name of Test Icons. In the frontend it would use the $tag: fa

function prefix_map_new_icons(){

    $pretty_name = 'Test Icons';
    $array_name = 'test_icons';
    $file_location = 'http://www.yourdomain.com/wp-content/themes/theme-namem/assets/fonts/font-awesome/css/font-awesome.css';
    $icon_prefix = 'fa-';
    $css_prefix = 'fa';
    $tag = 'font-awesome'; // used to load front end assets

    // automatically map the new file
    pixel_map_icons($pretty_name, $array_name, $file_location, $icon_prefix, $css_prefix, $tag);
    
}
add_action('pixel_extend_icons', 'prefix_map_new_icons');
0 People Found This Helpful.

Viewed 253 times.

Extend PixelMenu with New Dropdown Animations

Below is a snippet utilizing the custom developer api filter: pixelmenu_filter_default_dropdown_animations

function prefix_extend_pixelmenu_animations($animations){
$animations['A Custom Animation Name'] = 'custom-animation-class';
return $animations;
}
add_filter('pixelmenu_filter_default_dropdown_animations', 'prefix_extend_pixelmenu_animations');
0 People Found This Helpful.

Viewed 244 times.

How to Extend Colors, Styles and Button Variations

Using the extensive developer API baked into the core of our plugin its really easy to add new colours, sizes, variations and even styles to our custom button widget.

function function_name(){
}
add_filter('pixelmenu_filter_default_buttons', 'function_name');

Extending the default styles available

The following snippet adds a new style called ‘test’ that outputs the button class ‘pm-test-button’.

function prefix_extend_pixelmenu_buttons($buttons){  
	$style_name = 'test';
	$button_class = 'pm-test';

	// add the new style
	$buttons['styles'][ $style_name ] = $button_class;

	// return buttons
	return $buttons;

}
add_filter('pixelmenu_filter_default_buttons', 'prefix_extend_pixelmenu_buttons');

Don’t forget! You will need to add the new css styles for the button to work.

0 People Found This Helpful.

Viewed 147 times.

What Shortcode Parameter Types are Available?

Below is a list of available parameter types and all their accepted arguments.

Colorpicker
Dropdown
Dynamic Dropdown
Image Upload
Radio
Sidebar
Textarea
Textfield
Toggle
WYSIWYG

We don’t currently have a way to extend shortcode parameter types but, rest assured we have it planned for a future release.

0 People Found This Helpful.

Viewed 109 times.

How to Map a New Shortcode to PixelMenu

Our aim when we created PixelMenu was to create a developer friendly ecosystem that not only was easy to use but well documented.

There are a few steps that need to be completed in order to extend the mega menu builder.

  1. Create the shortcode for WordPress
  2. Map the shortcode and its options using our API

How to map a new shortcode to Pixel MegaMenu

The following guide assumes you have already created a new WordPress shortcode.

A Basic Example

<?php 
   $args = array();
   pixel_map_shortcode( $args ); 
?>

An Advanced Example

<?php 
$args = array(
	'shortcode_name' 	=> 'pb_test_shortcode',  // the shortcodes name
	'title'      		=> 'Shortcode Title', // Shortcode title used in the UI
	'description'     	=> 'A Description about the shortcode', // Short description
	'icon_class' 		=> '',       
	'category'       	=> 'Content', // the parent category of this shortcode, it could be anything you want
	'params'	=> array( // params start
		'General' => array( // General Category
			array( // a parameter
		        'ID'  => 'enable_carousel',
		        'title' => 'Enable Carousel?',
		        'desc'  => 'How many posts would you like to display per row?',
		        'type'        => 'toggle',
		        'default'     => 'true',
			),
		), // General Category end
		'Layout' => array( // Layout Category
			// Parameters go here
		), // Layout Category End
	) // params end
);
pixel_map_shortcode($args);
?>

Related to this article

We also recommend reading the following.

0 People Found This Helpful.

Viewed 105 times.

Include Social Links in Navigation

Adding a selection of social icons and links to to your Pixel Mega Menu for WordPress is really simple, we made our plugin for WordPress simple and easy to use.

Navigate to Admin -> Appearance -> Menus

Once you are on the WordPress navigation editor page, from the same place you would add a new link, towards the bottom select extras dropdown, and drag and drop the social widget into the menu at any desired position.

Assign your social account urls

Once you have added the social icons to the menu bar, you will need to open the dropdown and set your social media URLs

1 People Found This Helpful.

Viewed 147 times.
Go Back