Web development – Simon Griffiths Blog

jQuery to Add Content to a Column with Header Copy

I have recently had to use jQuery to add some copy to a column in a table. The problem I had was identifying which column. In my case the each column had it’s own class eg: –

<thead>
<tr>
<th class=”column-1″>Model Number</th>
<th class=”column-2″>Height</th>
<th class=”column-3″>Width</th>
<th class=”column-4″>Enquiry</th>
</tr>
</thead>

What I wanted to do was add some html (including a variable that represented the enquiry form) to the Enquiry column, in this case it would be column-4.

This all looks pretty simple if you have the same number of columns for each table, but I didn’t, so I needed to look for the enquiry column, then mark it to add the code to. The workflow is therefore: –

Find the column class where the column header (th) has the text Enquiry
Mark that column class by adding an extra new class, in this case enqcol
Add the additional code to the column with the enqcol class

Our code is as follows: –

var classname = $( “th:contains(‘Enquiry’)” ).attr( ‘class’ )
$(‘table tr td.’+ classname).addClass(‘enqcol’);
$(‘td.enqcol’).html(‘<a href=\”‘ + enquiryform + ‘\”><img src=\”http://simongriffiths.name/images/enquriy-icon.png\” alt=\”Quick Quote\” width=\”15\” border=\”0\”></a>’);

The first line defines a variable called classname. This is set as the name of the class of the table header (th) that contains “Enquiry”. The result in the example above would be that classname=”column-4″.

The second line uses the variable above. It adds the class enqcol to any table cell (td) with the classname=”column-4″. Therefore at this point our code would be modified by jQuery to become: –

<thead>
<tr>
<th class=”column-1″>Model Number</th>
<th class=”column-2″>Height</th>
<th class=”column-3″>Width</th>
<th class=”column-4 enqol”>Enquiry</th>
</tr>
</thead>

The last line essentially looks for a table cell with the class enqcol (td.enqcol) and adds the html shown. In this case we are adding: –

Note that the \ allows the ” to show as part of the text to be added rather than being part of the code.

In this case you can substitute the html above with anything you like, but I am a variable “enquiryform” which is the URL of a page I have set elsewhere as a link and I am adding an icon rather than copy to link from.

It should be noted that this relies on each column being marked with a class. If this isn’t the case, you can probably add classes with jQuery before you run this step. You may even be able to modify this code to use the child number rather than looking for a class.

Retrieve REST Posts for Specific Pages

Update 18/10/2018

This is really not well documented, but I have a way that may suit your workflow better. Finding page ID’s can be a bit painful as different sites have different page ID’s. A better way might be to use the page slug. That is typically the page title in smalls, with the spaces swapped for dashes. For example, this page slug would be: –

retrieve-rest-posts-for-specific-pages

Well, you can now use this in your url, so you might have something like: –

http://www.mysite.com/wp-json/wp/v2/pages/?slug=field,monarch

Where your page slugs are field and monarch and your page titles are Field and Monarch.

Where this is useful is if you are say recreating an archive (category/tag) page. Assuming your pages are titled the same as the pages on the site serving the REST (JSON) content, you can look for slugs of pages in the categories/tag in question on your site, then list them in this URL. This will give you a feed of all content from these pages so you can reconstruct an archive page from the feed.

After a lot of research I have finally found a way to retrieve specific pages from a WordPress REST site using it’s JSON feed. I should note that this is not complicated at all, just frustratingly badly documented!

http://www.mysite.com/wp-json/wp/v2/pages?include=8,528

In this case the link would go to mysite.com and retrieve the pages with ID’s of 8 and 528 only. Very useful for doing something like related pages.

As I said it’s not rocket science, but it’s taken me a really long time to find this!

Analytics Content Grouping Using WordPress Categories and Not using Googles Tag Manager

Analytics Content Grouping can be very useful to see how a range of products is doing in the market in a quick and intuitive way and also allows for some interesting insights that are hard to get to in any other ways.

In the past I have relied on manual tagging of pages, but over time as new pages are added, this manual tagging drifts and the ‘not set’ category increases. As a way to automatically group pages a great way would be to use WordPress categories and group based on category names.

Before I go any further I should add that most of the pages I want to group are product pages and all of them are in multiple categories. For example a product might be in a categories for products, industrial, steel and more. This method is based on picking out a few of those categories only as groups. In this case Industrial is the group I want to add this to. If you have pages with 1 category only, there are other methods that are even more automated (see below).

I should add that this method is loosely based on the article of https://www.highposition.com/blog/how-to-send-author-content-groups-wordpress-google-analytics/ and I will follow the same steps that they take you through: –

Step 1 – Configuring Content Groups

Log into your analytics account and click on the Admin link in the top menu bar. Select the account and property you want and in the View section on the left, you should see Content Grouping: –

We then need to create a new Content Group

Click the “Create New Content Grouping” button at the top.

Add in the title of your Group, in our case “Categories”.. but you can call it anything you wish.

Just below the title is where you select the tracking method you wish to use, we will be tracking via the GA javascript code, so click the first option, “Group By Tracking Code”, you don’t need to change anything on this screen, just press “Done” at the bottom.

Now do the same process again for any others you want to add to a maximum of 5, but when clicking the tracking code implementation option, make sure you change the “Index Number” option, so they are unique.

Step 2 – Modifying the Analytics Tracking Code

This article assumes that you are using the universal analytics code that Google has been pushing for some time. The code you have running on your site should therefore look something like this: –

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

We want to change it to add an extra line as shown below (in this case to add the category name, which is industrial to contentGroup4, which is the one I set up in the step above: –

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘set’, ‘contentGroup4’, ‘Industrial’);
ga(‘send’, ‘pageview’);

</script>

Find this code in your site. In theory it should be in the head section, but I load mine in the footer just in case Google is slow (which is quite often). You will often find this code in either the theme settings, a wordpress plugin or in the footer.php or header.php of the theme you are using. The code should look exactly as the top example above, so, after backing up, make a space between the ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’); and ga(‘send’, ‘pageview’); lines to type in your new code to add the content groups.

The code I am using assumes that you know the groups you want to track, you have a page in multiple categories (see below if you have 1 category) and you don’t have many groups (as each one needs a line of code).

<?php
if(in_category(’19’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;}
elseif(in_category(’16’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial2’);\n”;}
elseif(in_category(’18’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial3’);\n”;}
elseif(in_category(’11’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial4’);\n”;}
?>

So this is very simple, each line checks to see if the page is in a particular category and if it is adds the analytics code to tag to page. In more detail:

if(in_category(‘19‘)) – Checks to see if the page is in category 19. You can get the category number easily by going to the category page in WordPress (under Posts), finding the particular category you want, then hovering your mouse over the top. In most browsers you will see the url of the link you would go to if you clicked. In that url you will see “tag_ID=19” in this case, but the number is the number you need to enter here.

{echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;} – This bit is just the code from analytics, but I have manually written in the category name. In this case Industrial. You could do this in code, but if I am setting the category ID for an individual line, you might as well just add it in manually. \n gives you the line break.

If you add that in to your analytics code it should look like the below: –

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
<?php
if(in_category(’19’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;}
elseif(in_category(’16’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial2’);\n”;}
elseif(in_category(’18’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial3’);\n”;}
elseif(in_category(’11’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial4’);\n”;}
?>
ga(‘send’, ‘pageview’);

</script>

Once you load up a page this should then be tagged appropriately with the categories you have set.

Step 3 – Viewing Your Data

Once this new data has begun flowing in to your GA account, head over to your All Pages Report…. Behaviour -> Site Content -> All Pages

analytics-content-groups-setup2 You will see a new option appear at the top of the report asking which content group you would like to see your pages grouped by. You should now see your groups in there. Select the group you want and it will show you pages together with useful on-site behavioural metrics. This can be very useful to see how certain sections or product ranges are performing against site stats over time.

Another interesting way to display this information is in a Dashboard. I particularly like to use the map view on the dashboard so I can see how particular groups are performing in different parts of the country or the world: –

If you have Single Category for Each Page

If each of your pages only has a single category, and you have a much larger range of categories. You may want to use this code instead as it automatically fetches the 1st category the post is in. Note that this is for Universal Analytics and also creates a group for the first tag. If you don’t want the tag group, just delete that section: –

<?php if (is_single()){
while(have_posts() ) : the_post();

$category = get_the_category();
if ($category && !empty($category[0]->cat_name)){
echo “ga(‘set’, ‘contentGroup4’, ‘”.$category[0]->cat_name.”‘);\n”;
}

$tag = get_the_tag();
if ($tag && !empty($tag[0]->tag_name)){
echo “ga(‘set’, ‘contentGroup5’, ‘”.$tag[0]->tag_name.”‘);\n”;
}

endwhile; // end of the loop.
}
?>

Explanation

<?php if (is_single()){
while(have_posts() ) : the_post();

………..

endwhile; // end of the loop.
}
?>

This section just makes sure that the page includes a single post only.

$category = get_the_category();

This section creates a group (array) of categories.

if ($category && !empty($category[0]->cat_name)){

This makes sure there is a category assigned and if there is applies the category name rather than the ID number or slug.

echo “ga(‘set’, ‘contentGroup4’, ‘”.$category[0]->cat_name.”‘);\n”;

This is the section that actually writes the line into the page html (echo). In this case the start of that is all just text from Google analytics. Change contentGroup5 to whatever content group you have set in the Analytics admin panel. The options are basically contentGroup1 to contentGroup5. The next bit ‘”.$category[0]->cat_name.”‘ is really the crucial bit that pulls in the category name. This will be the first category on the list you see in the pages, All pages list in WordPress.

Slidedeck: How to Add Individual Slidedecks to page headers

If you are like me, you love Slidedeck (http://www.slidedeck.com) for the ease of use for me and my clients when I have handed over the site.

Typically I use Slidedeck for what is known as a hero slides how on the home page and very occasionally on the page itself and Slidedecks combination of methods of site integration makes this really easy.

However, what if you have a site that needs to have product slideshows in the header area? Again, it’s easy if you can have a layout for each page, but the problem comes in where you need a single say ‘products’ layout to cover a large range of products/pages. There is just no way to change the slideshows on a per page basis, if the slideshows is to be in the header.

The solution is actually much easier than you would probably think. Using a combination of Slidedeck with another plugin (Advanced Custom Fields), and a small piece of php code inserted into your theme. Using this method you should be able to:-

Provide a visual way to enter a Slidedeck code into an individual page
Allow product (or similar) pages to show slideshows in the header rather than on the page. Even if they use the same theme template

This will take the form of step by step instructions. It’s worth noting that I am no php coder, so any additional help with the code beyond what I did to ‘make it work’ would be appreciated.

In your copy of WordPress, install Slidedeck and create a slideshow as an example we can use.
Install the plugin “Advanced Custom Fields”. This is what will allow you to create both the visual interface and the field of information the post needs to know which slideshow it needs to display
Once you have advanced custom field installed, you will see Custom Fields at the bottom of the left side menu bar in WordPress.
I created a custom field called Page Sliders, and gave it the settings as follows: –

You can see from the above that I have a home page template where I don’t want to show this as an option, as it will use a standard template and slideshow with a slightly different layout. Selecting “Standard Metabox” ensures that there will be a box for the WordPress page editor.
My description is probably a bit over wordy btw, but I have done this assuming it won’t be changed for a while and the user will more than likely have forgotten what to do when they need to make changes.
All the above should give you is something like the below. This gives you an area in your page to add the Slidedeck shortcode, so that it will be stored with the page. At the moment, that is all that this does as we have not yet integrated the code we need into the theme.
Now here comes the hard bit unfortunately! We need to edit our theme. It’s actually easier than it sounds, but I would advise you to back up the theme code before you start to edit it. You can either FTP the theme to your local machine, or even copy all the code and paste it in a text file. You do all this in <Appearance><Editor> from the WordPress sidebar.
Typically when you open the editor you will see your themes CSS file. If you have set up various page templates, you will also see those listed, otherwise you will just see the one template, the header template, footer template etc.
Which one of these you want to edit depend on your theme. I would start by looking at the header, where you will probably see, the head section of the document, then the header of the site, then the navigation, then the top of the main content area. In my case I want the slideshow under the navigation and in the main content area, so instead of the header.php I can put the code in the page template.
Opening up the page template, you will see some code to get the get the header <?php get_header(); ?>, so the code is to go under that in my case (just above the main content). The code you need is: –
<link rel=’stylesheet’ id=’slidedeck-css’ href=’http://www.webxopt.com/wp-content/plugins/slidedeck-lenses/half-moon-1a/lens.css?v=1.0′ type=’text/css’ media=’screen’ />
<div id=”slider-custom” style=”position:relative;left:-20px;top:-24px;”>
<?php
$sliderdeck = get_field(‘slidedeck_shortcode’);
?>
<?php echo do_shortcode($sliderdeck); ?>
</div> <!– slider-custom –>This links to the slidedeck css files (in my case I used the half moon slidedeck style, so linked to that), creates a new div (the styles included were required for my theme, but you may need to change the numbers), then get the slidedeck shortcode from the custom field in the page, then add it into template.
Hopefully that should now all be done. The only thing left to do is set up the page.
You can go and get a shortcode directly from slidedecks interface, but for me the easiest way is to copy the code in the explanation, then change the number according to the slidedeck you want.

The above shows the interface on the post page and the below in slidedeck. Note that you have to mouse over the deck you want to get the ID number.
Your end result should look something like “[SlideDeck2 id=2641]”. When you preview the page, you should now see your custom slidedeck up in the head of your page.

Hopefully, this will help anyone who has been battling with this problem as I have. If you have any comments, please leave them below. PHP code suggestions would be particularly helpful!

Sociable Widget in WordPress

I use the Sociable plugin on a couple of the blogs I look after and was surprised to see that there is no sidebar widget. That means that if you want to add social icons to your home page and that features a few different posts, essentially you can’t.

After looking at this a few different ways I managed to pick out the code from the plugin and adapt it to be used in a text Widget. The code is as follows with the things to change shown in blue: –

[code]

<div class=’sociable’ style=’float:none’>
<ul class=’clearfix’>
<li id=”Facebook_Counter”>
<iframe src=”http://www.facebook.com/plugins/like.php?href=http://www.yoursite.com/yourpageifany/&send=false&layout=button_count&show_faces=false
&action=like&colorscheme=light&font” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden;height:32px;width:100px” allowTransparency=”true”></iframe>
</li>
<li id=”Twitter_Counter”>
<a href=”https://twitter.com/share” data-text=”Your Site/Page – http://www.yoursite.com/yourpageifany/” data-url=”http://www.yoursite.com/yourpageifany/” class=”twitter-share-button” data-count=”horizontal”>Tweet</a><script type=”text/javascript” src=”//platform.twitter.com/widgets.js”></script></li>
</ul>
<ul>
<li id=”LinkedIn_Counter”><script src=”http://platform.linkedin.com/in.js” type=”text/javascript”></script><script type=”IN/Share” data-url=”http://www.yoursite.com/yourpageifany/” data-counter=”right”></script></li>
<li id=”Google_p”><g:plusone annotation=”bubble” href=”http://www.yoursite.com/yourpageifany/” size=”medium”></g:plusone></li>
</ul>
&nbsp
</div><!– End Sociable –>

[/code]

The green highlight was because the row of icons can’t display across the sidebar so tends to go all over. You can modify this by closing one unordered list (ul) and opening another.If you include a lot of icons just repeat this.

I should add at this point that this is for the big 4! Facebook, Google, LinkedIn and Google+. If you include more you will need to view the code of a page with the Social plugin on it, search for sociable then copy the code and change the page details.

Once you have your code sorted out, just go to your WordPress Widgets area, add a text widget and paste your code in. With any luck it should all flow in and include the correct number of likes etc for the page.

WordPress on Crazydomains

Installing WordPress on Crazydomains hosting drives me nuts!!!

I always forget how to install it, as to say that it’s not the most obvious installation method is probably the understatement of the century! For anyone struggling (and for me the next time I do this) this may help: –

Fantastico installation from Crazydomains hosting DOES NOT WORK. I have tried this on different accounts using different methods and it never works. Don’t even bother wasting your time trying.
Download WordPress and follow the instructions on http://codex.wordpress.org/Installing_WordPress.
When you come to configuring the wp-config.php file you will need to add in the database, user, password and hostname. This bit always completely throws me as these are not what you expect at all ie they are not what you set up in phpMyAdmin! The following is what you need: –
1. DB_NAME – Here you need to include your account (not database username). If you are using phpMyAdmin you will see this on the left hand of the interface, but you need to include the first and second level bullet which shows ‘account-name’ and ‘database name’. Eg if your account name in Crazydomains is ‘account-name’ and the database you set up is ‘wordpress’, you will need to use ‘account-name_wordpress’.
2. DB_USER – Follows the same format. You will need to include your account name despite the fact this is not shown anywhere. You will also see in phpMyAdmin a username like username@localhost. You need the first part of this before the @ sign. You need to then include the Crazy domain account name too. Add in ‘account-name_username’.
3. DB_PASSWORD – Just the password. Finally something simple.
4. DB_HOST – Just ‘localhost’.

Hopefully this will get you set up. After that just run the install script and you should connect ok!

Good luck!

Spry Collapsible Panels to jQuery

Moving Spry Collapsible Panels over to jQuery is actually a lot easier than I thought it would be.

Just to give you a bit of background, Spry is a javascript library that comes with Dreamweaver. They really pushed it to start with, but haven’t updated it since 2006, so to say that it’s a bit long in the tooth is an understatement in web terms. JQuery on the other hand is the javascript library of choice and in the latest version of Dreamweaver, also seems to be pushed over Spry.

However if you have already included Spry on your page, you may just want to keep the existing html markup exactly the same and swap over to a jQuery system. I did this with an admitted simple single panel system (used for dropping down a form), as below: –

1. Add jQuery into your page. I’ve used an old version and am pulling this off Google servers as follows

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>

2. Remove Spry javascript code from your page.

3.Create a new javascript file and add the following code

$(document).ready(function() {
$(‘.CollapsiblePanelContent’).hide();
$(‘.CollapsiblePanelTab’).click(function() {
$(‘.CollapsiblePanelContent’).slideToggle(‘medium’);
if ($(‘.CollapsiblePanelContent’).is(‘:visible’)) {
$(this).val(‘Hide’);
} else {
$(this).val(‘Show’);
}
});
});

4. Link to this new file in your document (and below where you add in the jQuery file).

Flash Cookies, A Privacy Issue & How to Delete Them

Over the past year or so there has been a growing trend among internet users to regularly clear the cookies that websites put on their systems. This has meant that the web site owners can be frustrated either in their legitimate desire to save state in the users browser or the more dodgy track people round the internet.

Site owners have responded with the increased use of flash cookies, which do similar things, but are not so easy to delete or manage.

This video shows how to manage and delete flash cookies in your browser of choice.

Thanks to http://www.brdatasystems.com.au, a local server rack manufacturer for letting me use their site, which I know doesn’t add cookies, to show how to manage and delete them.

Flash Cookies, A Privacy Issue & How To delete Them from Simon Griffiths on Vimeo.

Web Designer customer Cheat Sheet

These are some questions I normally ask clients when I am looking to develop a website.

I will expand on this post later to add in more details.

1. What is the website for?
Brochure, E-commerce, Business card, reinforcement
[Why: to see what the site need to include and what technologies should be involved]

2. Who are the customers?
Male, Female
Age range
What do they do
What is their job title
[Why: to try to profile the customer so that site design and content can be created to suit the audience]

2a. Who is the competition?
[Why: so we can look at their sites and see what we can learn about keywords, expected layout etc]

3. How would you expect the customer to find the site?
Search, word of mouth, literature/business card
[Why: to see how much emphasis needs to be placed on SEO/SEM]

4. If search, what would they be looking for to find the site?
[Why: so that keywords can be checked to see if there are more available]

5. What sort of device would they use to access the site?
PC, netbook, phone
[Why: to see what technologies need to be involved/avoided, to look at creating specific content for a device]

6. Where would they typically access the site from?
Office, home, out and about (using public wifi or mobile connection)
[Why: to see how much bandwidth the site can take without inconveniencing the user]

7. Are you geographically based?
What are the limitations you want to put on area.
[Why: to make sure content is written to make this clear, make sure Google is aware of this and to see what type of hosting is required]

8. What type of site are you thinking about?
Examples of sites that you like.
What do you like about these sites?
[Why: to get an idea of what you expect from the site]

9. What tone do you want to set with the site?
Professional (typically more subdued), light hearted, fun
[Why: to make sure that the tone of writing matches that of other literature or the image the company is portraying]

10. Do you have other literature/business cards?
[Why: so we can make sure the site matches the style and creates a total company image]

11. Would you want to be able to edit the site content?
All content, a blog, social media
[Why: to see what technologies we need to use and what you expect from updates]

12. What timeframe and budget is the site required in?
[Why: Timeframe will set what is there is time to do in terms of design and interaction, also whether the designer can actually do it or not. Budget will set again set what is possible to do].
[Note: Budget is always tricky as the client will not want the designer to design to a budget. Possibly ask for a range, or look at requested features and say roughly what each will cost].

Web Page Structure for Great SEO

I have just put up a post on the Webxopt site showing how to structure 2 and 3 column layouts to makes sure that your main content is always at the top of the HTML page, where search engines like it.

I’m never sure where to post these things these days, but just in case the link is

http://webxopt.com/wordpress/2009/08/web-page-structure-for-great-seo/