Concrete5: Display the page title of the top parent menu item on sub pages

Here is the block of code I use to display the page title of the top parent menu item on a sub (or child) page of that menu item.

Copy this code:

<?php
$title = $c->getCollectionName();
$parentPageId = $c->getCollectionParentID();
if ($parentPageId > 1) {
    $parentPage = Page::getById($parentPageId);
    $title = $parentPage->getCollectionName();
}
?>
<h1><?php echo $title; ?></h1>
And paste it into the template where you want the parent item page title to appear.
Using this code, the page title of the top-level menu item relative to the page the viewer is on will always be displayed. For example, if this were your site map:
Home
About
      History
      Mission
Contact
      Directions
      Contact Us
Using the code above, you could display the page title About when you are on the History page or the Mission page, and the page title Contact when you are on Directions or Contact Us.

WordPress Tricks: Get the titles of recent blog posts from a certain category using wp_query

Here is a simple block of code that you can use to get the most recent post titles and permalinks to a certain number of the most recent posts in a certain category:

 

<ul>
<?php
    global $cat;
    $recentPosts = new WP_Query();
    $recentPosts->query('showposts=5&cat=389');
?>
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?></ul>

Simply change the number of posts and the category id in the code above to get the number of posts and the category of posts that you want.

 

You can also check out my post on how to display a list of the titles of your most recent blog posts from several categories if you are looking for a way to get the most recent posts from several different categories.

A simple PHP script to find your web root directory

Here is a simple line of code you can use to find the web root and path of your website.

Copy and paste this code into a text file:

<?php
print ($_SERVER&#91;'DOCUMENT_ROOT'&#93;);
?>

Save the file as findwebroot.php or whatever name you want, as long as it has a php extension.

Upload the file to your server, navigate to the file in a browser, and voilà – you will see the full path to that file!

Concrete5: How to add a unique body class to individual pages

Here is the easiest way I have found to add a unique body class to individual pages in a Concrete5 site.

First, in your dashboard go to “Pages and Themes,”then “Attributes,” and add a custom attribute (text field) called bodyclass.

Next, open your theme’s header.php file and add:

class="<?php echo $c->getCollectionAttributeValue('bodyclass')?>"

to your < body > tag, so it reads like this:

<body class="<?php echo $c->getCollectionAttributeValue('bodyclass')?>">

For any page that you want to apply a custom class to, simply add the Body Class custom attribute and type whatever class name you want into the Body Class Custom Attribute text field. When you save your changes, your opening < body > tag will now look like:

<body class="red">

How to add a unique class to each li item in Concrete5 autonav menu

First, copy and paste this code into a blank text file:

<?php
   defined('C5_EXECUTE') or die("Access Denied.");
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   echo("<ul class=\"nav\">");

   $nh = Loader::helper('navigation');

   $isFirst = true;
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {

         $target = $ni->getTarget();
         if ($target != '') {
            $target = 'target="' . $target . '"';
         }

         if ($ni->isActive($c) || strpos($c->getCollectionPath(), $_c->getCollectionPath()) === 0) {
            $navSelected='nav-selected';
         } else {
            $navSelected = '';
         }

         $pageLink = false;

         if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
            $subPage = $_c->getFirstChild();
            if ($subPage instanceof Page) {
               $pageLink = $nh->getLinkToCollection($subPage);
            }
         }

         if (!$pageLink) {
            $pageLink = $ni->getURL();
         }

         if ($isFirst) $isFirstClass = 'first';
         else $isFirstClass = '';

         echo '<li id="'.$navSelected.'" class="item'.$_c->getCollectionID().' '.$isFirstClass.'">';

         if ($c->getCollectionID() == $_c->getCollectionID()) {
            echo('<a class="nav-selected" href="' . $pageLink . '"  ' . $target . '>' . $ni->getName() . '</a>');
         } else {
            echo('<a href="' . $pageLink . '"  ' . $target . '>' . $ni->getName() . '</a>');
         }   

         echo('</li>');
         $isFirst = false;
      }
   }

   echo('</ul>');

Save this file as new-nav.php or whatever you want it to be called. Upload this template to your concrete/blocks/autonav/templates.

Now, in your template file, use this block of code to call the new menu:

<?php
$nav = BlockType::getByHandle('<wbr>autonav');
$nav->controller->displayPages = 'top';
$nav->controller->orderBy = 'display_asc';
$nav->controller-><wbr>displaySubPages = 'all';  
<strong> $nav->render('templates/<span style="color: #ff0000;">new_</span><span style="color: #ff0000;">nav</span>');                 </strong>

Note: make sure that you use the correct name of your new template in the code above.

Or, if you are adding or editing an autonav block from the front end of the site, simply select the “New nav” custom template and apply it to the block.

Let me know if you run into any questions or have any issues with this.

Combine the values of two fields in a form into one variable to be inserted into MySQL database table

Here is the simple code that I use to combine the values of two fields in a form into one variable and insert that variable into a database table.

One example of how I used this trick was when I built an SMS-subscriber widget for a website. I needed people to enter their phone numbers into one field, select their phone carrier from another field, and then combine those two fields with an “@” symbol in between to create an email address that was then inserted into the database. These SMS subscribers could then receive the same notice as email subscribers.

Here is the code you use:

<script>
$('#insert').bind('submit', function(){
                        var phone = $('[name=phone]').val();
                        var email = $('[name=email]').val();
                        $('[name=subscriber]').val(phone+'@'+email);
                      });
</script>

Note: #insert in the code above needs to be changed to the id of your form. 

Insert the jQuery code above directly after the beginning of your form, which would look something like this:

<form action="insert.php" method="POST" id="insert">

Next, create a hidden field which will contain the combined values of the two fields:

<input type="hidden" name="subscriber"/>

And finally, create the two fields whose values you want to combine:

Phone #: <input type="text" size=25 name="phone">
Carrier: <select>
  <option name="email" value="vtext.com">Verizon</option>
  <option name="email" value="txt.att.net">AT&T</option>
</select>

In the php file that you use to process the form, you will only need to post the data from the hidden field (which contains the values of the two fields). For instance, using the example above, I would only insert the ‘subscriber’ data into the database:

$v_subscriber=$_POST['subscriber'];
... 
$query="insert into table_name(email) values('$v_subscriber')";

This would insert the value of the subscriber field (which is “phone@email” according to the jQuery above. For example: 1234567890@att.txt.net) into the email column of the table you specified.

Please let me know if you have questions or run into any issues at all.

WordPress Tricks: How to exclude a certain category of posts from the loop

Use this line of code to control which categories of posts do and don’t show up in the loop for particular pages on your WordPress site:

<?php
if (is_page('recipes')) {
 $catID=4;
}
elseif (is_home()) {
 $catID=-4;
}
if ($catID) {
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 query_posts("cat=$catID&paged=$paged");
} ?>

Copy and paste that code into your index.php or page.php template file, just before the loop is called.

This line of code will display all posts in category 4 on the recipe page, and not on the main blogroll page.

Simply change the page IDs (or slugs, either one will work) and the category IDs to control which pages show which category of posts.

To exclude a category of posts from the loop on a certain page, simply put a negative sign ( – ) in front of the category ID you want to exclude from that page, and the page will show posts from all categories except for that one.

If you want to specify which page each category of posts show up on, you would use this:

<?php
$catID = 0;
if (is_page('Books')) {
 $catID=1;
}
elseif (is_page('Videos')) {
 $catID=4;
}
elseif (is_page('CDs')) {
 $catID=5;
}
if ($catID) {
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 query_posts("cat=$catID&paged=$paged");
} ?>

 

Let me know if you have any questions, need more help,  or run into any problems.

Developing a custom store locator map for your website using Google maps, Javascript, XML, and PHP

Here is a comprehensive series of posts which takes you through the entire process of developing a custom store locator map for your website using Google maps, Javascript, XML, and PHP.

Here are the basic steps to developing your store locator map:

Create a spreadsheet of your store locations

Create and populate the MySQL table

 Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location

Developing a custom store locator map: Using your own custom markers instead of Google’s default markers

Here is a simple way to use your own custom-designed markers on your store locator map in place of Google’s default markers.

Add this line of code:

 var icon = new GIcon();
      icon.image = "<a title="Link added by AutoLink filter: Plain text link" href="http://yourwebsite.com/logo.png">http://yourwebsite.com/logo.png</a>";
      icon.shadow = "<a title="Link added by AutoLink filter: Plain text link" href="http://youwebsite.com/shadow.png">http://youwebsite.com/shadow.png</a>";
      icon.iconSize = new GSize(50, 28);
      icon.shadowSize = new GSize(68, 28);
      icon.iconAnchor = new GPoint(37, 59);
      icon.infoWindowAnchor = new GPoint(31, 8);

Just before this line in the html page containing your store locator map:

var map;
var geocoder;

Adjust the GSize for both iconSize and shadowSize if necessary. The first number in parentheses defines the width of your marker and the second number defines the height (both in pixels).

Now, add this line of code:

 var marker = new GMarker(point, icon);

Just after this line:

function createMarker(point, name, address, city, state, zipcode, website, phone, email, group)

Save your work and view the locator map in a browser. Your map should now display your custom icons as the marker on each location.

Let me know if you have any problems or questions.

 

Here are links to all of the posts in this series on how to create your own store locator map:

 

Create a spreadsheet of your store locations

Create and populate the MySQL table

 Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location

Developing a custom store locator map: Embed your map into an HTML page

This is the fifth post in my series on creating your own store locator map for your website. In this post, we will create the HTML page which will tie together all of the pieces we have created so far.

Copy and paste this code into the section of your web page:

<!--
Copyright 2008 Google Inc.
Licensed under the Apache License, Version 2.0:
http://www.apache.org/licenses/LICENSE-2.0
-->
<script src="http://maps.google.com/maps?file=api&v=2&z=17&key=<span style="color: #ff0000;">YOUR-OWN-KEY</span>"
type="text/javascript"></script>
<script type="text/javascript">
//<!&#91;CDATA&#91;
 var icon = new GIcon();
      icon.image = "http://yourwebsite.com/logo.png";
      icon.shadow = "http://youwebsite.com/shadow.png";
      icon.iconSize = new GSize(50, 28);
      icon.shadowSize = new GSize(68, 28);
      icon.iconAnchor = new GPoint(37, 59);
      icon.infoWindowAnchor = new GPoint(31, 8);
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40, -100), 4);
}
}
function searchLocations() {
var address = document.getElementById('addressInput').value;
geocoder.getLatLng(address, function(latlng) {
if (!latlng) {
alert(address + ' not found');
} else {
searchLocationsNear(latlng);
}
});
}
function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'getoutput.php?latitude=' + center.lat() + '&longitude=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var Sheet1 = xml.documentElement.getElementsByTagName('Sheet1');
map.clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (Sheet1.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(40, -100), 4);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < Sheet1.length; i++) {
var name = Sheet1&#91;i&#93;.getAttribute('name');
var address = Sheet1&#91;i&#93;.getAttribute('address');
var city = Sheet1&#91;i&#93;.getAttribute('city');
var state = Sheet1&#91;i&#93;.getAttribute('state');
var zipcode = Sheet1&#91;i&#93;.getAttribute('zipcode');
var country = Sheet1&#91;i&#93;.getAttribute('country');
var distance = parseFloat(Sheet1&#91;i&#93;.getAttribute('distance'));
var phone = Sheet1&#91;i&#93;.getAttribute('phone');
var email = Sheet1&#91;i&#93;.getAttribute('email');
var group = Sheet1&#91;i&#93;.getAttribute('group');
var point = new GLatLng(parseFloat(Sheet1&#91;i&#93;.getAttribute('latitude')),
parseFloat(Sheet1&#91;i&#93;.getAttribute('longitude')));
var website = Sheet1&#91;i&#93;.getAttribute('website');
var marker = createMarker(point, name, address, city, state, zipcode, website, phone, email, group);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address, city, state, zipcode, distance, website, phone, email,
group);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
 var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
          zoomOverride = 15;
        }
        map.setZoom(zoomOverride);
});
}
function createMarker(point, name, address, city, state, zipcode, website, phone, email, group) {
 var marker = new GMarker(point, icon);
var html = '<b>' + group + '</b> <br/>' + address + '<br/>' + city + ', ' + state + ' ' + zipcode + '<br/>' +
"<br /><a href=" + website + " target=_blank ;'>" + website + "</a>" + '<br/>' + phone + '<br/>' + email +
'<br/><br/>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address, city, state, zipcode, distance, website, phone, email, group) {
var div = document.createElement('div');
var html = '<b>' + group + '</b> (' + distance.toFixed(1) + ' miles)<br/>' + address + '<br/>' + city + ', ' + state
+ ' ' + zipcode + "<br /><a href=" + website + " target=_blank ;'>" + website + "</a>" + '<br/>' + phone + "<br />" +
email + '<br/><br/>';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//&#93;&#93;>
</script>

And copy and paste this code into the of your web page where you want the map to display:

<h2 style="font-family:calibri;">Find a location near you</h2>
Address: <input type="text" id="addressInput"/>
Radius: <select id="radiusSelect">
<option value="25" selected>25</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="button" onclick="searchLocations()" value="Search Locations"/>
<div style="width:900px; font-family:Calibri, sans-serif; font-size:15px; border:1px solid gray">
<table>
<tbody>
<tr>
<td width="300" valign="top"><div id="sidebar" style="overflow: auto; height: 500px; font-size: 15px; color: #000">
</div>
</td>
<td><div id="map" style="overflow: hidden; width:600px; height:600px; border: 1px solid #ccc;"></div> </td>
</tr>
</tbody>
</table>
</div>

Now, add this to your tag:

onload="load()" onunload="GUnload()"

You will obviously want to change the names of columns and fields in the above code to the correct columns and fields that you created for your own store locator.

You will also need to use your own Google maps API key (you can get one at http://code.google.com/apis/maps/signup.html) and make sure that the path to the images you want to use for your markers is correct if you plan to use your own custom markers rather than the default Google map markers.

Let me know if you have trouble getting this to work and I would be happy to help you figure it out.

Here are links to all of the posts in this series on how to create your own store locator map:

 

Create a spreadsheet of your store locations

Create and populate the MySQL table

Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location