Tagged: child theme, Customisation, google maps, php
-
AuthorPosts
-
September 22, 2014 at 2:50 pm #323027
Hi,
I use the Enfold theme and the within delivered Google Maps Plugin.
But I’ve customised the gMaps behaviour to serve my own needs.
My Question: How to move those customisation into a child theme?Background:
Within the “/wp-content/themes/enfold/framework/php/class-framework-widgets.php” at line ~1200 I customised some JS values to have a own color styling for gMaps. This is done within the PHP variable “$avia_maps_config” within the PHP function “avia_printmap”. And at the end, as you know, all things will be written to “$output” and than in the JS-Setup which gets written to HTML of the page. Works all well.But what do I need to do, if I want this customised thin into child theme?
(So I could update your theme easy on a regular basis.)Example:
$avia_maps_config = " var directionsDisplay; directionsDisplay = new google.maps.DirectionsRenderer; var directionsService = new google.maps.DirectionsService; var map; var latlng = new google.maps.LatLng(".$lat.", ".$lng."); var directionsto = '".$directionsto."'; var customGMapStyle = [ { 'featureType': 'landscape', 'stylers': [ {'hue': '#A4FF00' }, {'saturation': -8.5 }, {'lightness': 5.4 }, {'gamma': 1 } ] }, { 'featureType': 'road.highway', 'stylers': [ {'hue': '#A8FF00'}, {'saturation': -79.3}, {'lightness': 28.3}, {'gamma': 1} ] }, { 'featureType': 'road.arterial', 'stylers': [ {'hue': '#A8FF00'}, {'saturation': -79.3}, {'lightness': 19.5}, {'gamma': 1} ] }, { 'featureType': 'road.local', 'stylers': [ {'hue': '#A8FF00'}, {'saturation': -79.3}, {'lightness': 19.0}, {'gamma': 1} ] }, { 'featureType': 'water', 'stylers': [ {'hue': '#007FFF'}, {'saturation': 2.0}, {'lightness': 21.5}, {'gamma': 1} ] }, { 'featureType': 'poi', 'stylers': [ {'hue': '#A1FF00'}, {'saturation': -15.0}, {'lightness': 6.2}, {'gamma': 1} ] } ]; var myOptions = { zoom: ".$zoom.", /* Zoom stat value by Widget */ maxZoom: 14, /* Max Zoom in (15) */ minZoom: 5, /* Max Zoom out (0) */ zoomControl: true, /* Zoom UI on */ zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL}, navigationControl: true, navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}, scrollwheel: false, /* Mouseweel support on */ keyboardShortcuts: false, /* Shortcuts on */ panControl: false, /* Move UI on */ scaleControl: false, /* Zoom UI on */ streetViewControl: true, /* Streetview on */ mapTypeId: google.maps.MapTypeId.".$type.", mapTypeControl: false, /* MapType UI on */ mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}, center: new google.maps.LatLng(".($lat - 0.03).", ".$lng."), /* Fake center by (~70px) to custom css setup */ styles: customGMapStyle }; var map = new google.maps.Map(document.getElementById('avia_google_maps_$unique'), myOptions); if(directionsto.length > 5) { directionsDisplay.setMap(map); var request = { origin:directionsto, destination:latlng, travelMode:google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if(status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response) } }) } else { var contentString = '".$content."'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map, icon: '".$icon."', title: '' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); }";
Hope you could help me out.
As all my trying failed. Thanks.Greez Jens
September 22, 2014 at 11:26 pm #323343No one?
Or is this simply impossible?September 23, 2014 at 5:47 am #323490Hey!
Thank you for using Enfold.
You can copy the whole avia_printmap function on the child theme’s functions.php file.
Cheers!
IsmaelSeptember 23, 2014 at 10:20 am #323567Hi,
thanks for the reply.
So no into: “/wp-content/themes/enfold-child/framework/php/class-framework-widgets.php”
But into: “/wp-content/themes/enfold-child/functions.php”.Right?
Greez Jens
September 24, 2014 at 6:13 am #324053Hi Jens!
Correct, the theme checks if the avia_printmap exists in the child theme functions.php, if it does it will load that instead.
Regards,
JosueMay 13, 2016 at 4:48 pm #632151Hi Jens,
I’m not sure if you figured it out, but I also need to style my map and want to use enfold-child/functions.php. Can you post your solution here if you solved it?Thanks!
Regards,
RogerMay 14, 2016 at 9:37 am #632307Hi Roger,
If you want to modify an Enfold Widget simply paste the widget code into functions.php, for example for the Maps:
class avia_google_maps extends WP_Widget { .... }
Best regards,
Josue -
AuthorPosts
- You must be logged in to reply to this topic.