the css framework i worked on is able to handle all types of responsiveness but not video. so i did a bit of research and found a piece of code that does the trick.

wrap the embedded video in a container as follows:

HTML

add the following css:

CSS

wp_nav_menu() is a wordpress function to display menu defined with register_nav_menus() in functions.php.

when using foundation framework in a wordpress theme, the standard way to use wp_nav_menu() works if you have a single-level menu. ie no drop-downs. it's when it's a multi-level menu with sub-menu in the drop-down that it won't look nor work properly because foundation has define a set of classes to make it work and those classes aren't standard in wordpress.

to make it work, you need to call a walker class. luckily someone has done the hardwork and the code can be easily incorporated to a wordpress theme.

how-to

note that at the time of writing, this has been tested on wordpress V3.9.1 and foundation V5.2.3.

create a file with the menu walker class. include this file in functions.php.

in your navigation section:

HTML

sub-menu on mobile device

i was working on a website using foundation framework. it requires a slideshow on a modal window, which i made use of components that comes with foundation - reveal and orbit slider.

i've used orbit on a few projects. however problem is encountered when working on this particular project, which i believe is due to its use in conjunction with reveal. the slideshow works perfectly upon loading. but for some unknown reason it stopped working after a while - no response and images won't slide. you need to reload the page again to make it working again.

upon checking for solution, i came across announcement that orbit has been deprecated. of course i couldn't find any solutions and i had to look for alternatives since there will be no further development on this component.

based on the suggestion from the post, i tried bxslider and slick. both worked perfectly until the slideshow is added to reveal. image height is zero!

the problem

slider hieght is zero in reveal.

the solution

thankfully i found a solution, originally an orbit slider problem and can be applied to slick.

HTML

note lines 3-5: this is the magic code that makes it works!

please note that this works with slick but not with bxslider. if you know the solution to make it work with bxslider, please leave it in comments.

if you have used other jquery based carousel or slider that works with reveal, please let me know in comments too!

there are a few ways to prevent access to subdirectories of your website.

blank index

create an empty file with name index.html or index.php in that directory. visitors trying to access that directory will see a browser with nothing.

with .htaccess

create .htaccess in that subdirectory with just one line:

Code

in wordpress, instead of using relative url, absolute url is used when reference to posts, pages and images used within the site.

this becomes a problem if your development site and production sites are different. all links and images are still referencing the develoopment site even though the site is moved to production.

this problem is also applicable if you're changing domain name of your site.

besides changing url, you need to globally change all references to development / staging url to production url in all contents.

there are plugins that can do the work for you. however it's quicker if you have access to mysql. simply run the sql:

Code