Categories
Coding

How to Create a Simple Accordion Script

Today I created a simple accordion script to collapse a lengthy bit of inline text on a page. The challenge was trying to collapse not only simple items, but also sub-items on the page. While the process of creating the accordion script was relatively straightforward (as seen below), the majority of time went into redesigning the paragraphed text to be wrapped in unordered list items!

I had to also place within this code the ability to reconfigure the height of the newly expanded page (as there was a footer underneath). All it took was the ability to get the $("ul#accordion").outerHeight() and reapply this new height to its parent container and then have jQuery modify the height of the parent container.

For the sake of brevity I’ve only included the core elements needed to see the simple multi-level accordion in action.

To see this as a working example check it out on jsfiddle.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
ul#accordion, ul#accordion ul { margin: 0; }
ul#accordion li, ul#accordion ul li { list-style: none; margin: 0; }
.heading { border-bottom: 2px solid #DDD; margin: 10px 0 3px 0; display: inline-block; width: 100%; font-weight: 400; color: #000; padding-left: 20px; }
.sub-heading { border-bottom: 2px solid #DDD; margin: 10px 0 5px 0; display: inline-block; width: 100%; font-weight: 400; font-style: italic; color: #000; padding-left: 20px; }
.item-content { display: none; }
.items { display: none; }
</style>
<script>
$(document).ready(function() {
$("a.heading").click( function() {
$(this).next().toggle();
$(this).css('outline', 'none');
return false;
});
$("a.subhead").click( function() {
$(this).next().toggle();
$(this).css('outline', 'none');
return false;
});
});
</script>
</head>
<body>
<!– the basic html structure of the page was something like this –>
<ul id="accordion">
<li>
<a href="#expand1" class="heading">Heading 1</a>
<ul id="expand1" class="items">
<li>
<a href="#subarea1A" class="subhead">Sub-Head 1A</a>
<ul id="subarea1A" class="item-content">
<li>
<p>Hello World!</p>
</li>
</ul>
</li>
<li>
<a href="#subarea1B" class="subhead">Sub-Head 1B</a>
<ul id="subarea1B" class="item-content">
<li>
<p>Hello Universe!</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#heading2" class="heading">Heading 2</a>
<ul id="heading2" class="items">
<li>
<a href="#subarea2" class="subhead">Sub-Head 2</a>
<ul id="subarea2" class="item-content">
<li>
<p>Goodbye!</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body></html>
view raw accordion.html hosted with ❤ by GitHub
Categories
Cloud Apps Software

How To Manage Multiple WordPress Sites As A Developer

There’s a few things I’ve had to learn with managing multiple WordPress sites for my clients and sadly I’ve had to learn them the hard way. I suppose if I had known some of these techniques earlier on in my WordPress front-end development it would have saved a few sleepless nights as well as some heart-ache.

Here are a few things that I would teach myself if I went back into a time machine when I just first started out:

Where is your backup?

The first MAJOR issue I encountered when I started developing and using WordPress was that I assumed that all things would be perfect and that nothing would ever go wrong with the servers or database my WordPress sites. Boy was I in for a rude shock! If there’s one thing you need to understand VERY EARLY on when developing your WordPress site – it’s that THINGS DO BREAK.

Look for solutions to house not only your written content, but also your stylesheets, your JavaScript code and your photos. There are two services that I recommend, and I only recommend these as they backup each WordPress site to my personal Dropbox account.

  1. WordPress Backup 2 Dropbox – this is a good free alternative and allowed you to back up not only specific areas within your site, but also your database! A good starting solution for your backup needs.
  2. ManageWP – primarily a paid alternative this service does pretty much everything you need in being able to manage your WordPress sites all from one central user-friendly location. You can pretty much do anything you want in this area, including: backing your sites up (both content and database), clone it, analyse SEO performance and much more. I highly recommend this solution as a great way of managing ALL aspects of your WordPress needs and the fees are very manageable.

How are you managing your stylesheets and JavaScript?

If I had a dollar for every time I accidentally pasted the wrong CSS code into the wrong WordPress installation or overwrote my JavaScript with CSS code I would be a multi-millionaire!

If there’s one thing I have learnt the hard way in managing multiple WordPress site’s it is this:

NEVER EVER EVER EVER (AS IN EVER!) EDIT YOUR STYLESHEET OR PHP FUNCTIONS OR JAVASCRIPT CODE IN WORDPRESS

Edit your code in one of your favourite text editors (I like Coda and Sublime Text some others also like Brackets) and where possible structure your folders and files appropriately to help you easily identify the WordPress site you are working on.

For example, don’t create a folder called “SITE ABC” and have within that folder the files “stylesheet.css”, “header.js”, “footer.js” and “functions.php” and then have another folder called “SITE XYZ” which has the same name for its files inside too! Have each file CLEARLY marked within your folder structure what the name of the WordPress install is, for example: “abc-style.css”, “abc-header.js”, “abc-footer.js” and “abc-functions.php”.

Even if you don’t follow the naming convention for your files at least by storing each important file within a folder structure will help you to manage these aspects more proficiently.

(I also utilise Git in these folders to help manage the reason for changes as well as creating a log of events for clients who want to know what has been done. Maybe this will be for another post!)

How are you optimising your WordPress sites?

There are several popular WordPress plugins out in the wild to help you manage the speed and delivery of your site to your users. Two of which I have either used or are still using are:

  1. WP Super Cache – a free and easy way of creating cache files of your posts and pages.
  2. W3 Total Cache – a primarily free yet also paid plugin that can help manage your site’s cached posts and pages. I use this plugin predominantly for my sites.

Anyway, three questions I would highly recommend you consider when you start a WordPress site!

Categories
Cloud Apps Coding

Create Sidebar Nav Menu Using jQuery & WordPress

One of the recent requirements I’ve had to design is a nav bar menu in the sidebar of a website running on WordPress. As the site has sub-pages as well as a sub-menu navigation structure. The designer of the site didn’t want drop-down menus on the statically fixed nav bar on the top, and I agreed: the drop-down menus looked a little strange.

Other ideas raised on whether to widen the statically fixed nav bar at the top of the page to accommodate the sub-pages, but after prototyping this it didn’t look any better.

So another option which was chosen was to incorporate the sub-pages for a parent page in the sidebar. All I did was create a widget that contained a <ul> tag and then I used some jQuery magic to grab the nav menu’s structure to populate the sidebar menu with all the links to the sub-pages.

The beauty of this technique is that should the designers wish to change their minds on the nav menu items (such as the link names) they can all do this within WordPress’ Menu area, and the site will automatically adjust accordingly.

So all I did was paste the following code into the footer area of the website:

<script>
(function($) {
"use strict";
$( function() {
// sub-menu areas into sidebar-nav-menu
if ( $("body.home").length === 0 ) {
var navTitle;
if ( $("ul.menu > li.current-menu-item").length > 0 ) {
navTitle = $("ul.menu > li.current-menu-item > a").text();
$("#sidebar h4.widget-title").first().text(navTitle + " Section");
$("ul.sidebar-nav-menu").append(
'<li><a href="' + $("li.current-menu-item > a").attr("href") + '" class="right-arrow">' +
navTitle + '</a></li>'
);
$("ul.menu > li.current-menu-item ul.sub-menu li a").each( function( i ) {
$("ul.sidebar-nav-menu").append(
'<li><a href="' + $(this).attr("href") + '" class="right-arrow">' +
$(this).text() + '</a></li>'
);
});
} else if ( $("ul.menu > li.current-page-ancestor").length > 0 ) {
navTitle = $("ul.menu > li.current-page-ancestor > a").text();
$("#sidebar h4.widget-title").first().text(navTitle + " Section");
$("ul.sidebar-nav-menu").append(
'<li><a href="' + $("li.current-page-ancestor > a").attr("href") + '" class="right-arrow">' +
$("li.current-page-ancestor > a").text() + '</a></li>'
);
$("ul.menu > li.current-page-ancestor ul.sub-menu li a").each( function( i ) {
$("ul.sidebar-nav-menu").append(
'<li><a href="' + $(this).attr("href") + '" class="right-arrow">' +
$(this).text() + '</a></li>'
);
});
}
}
// end sub-menu
});
}(jQuery));
</script>
view raw sidebarSubMenu.js hosted with ❤ by GitHub