I'm developing a WordPress theme powered by Foundation 5. Everything seems work well, but something is wrong when I switch to smartphone.
As you can see in the image below, when resizing the browser window on desktop, foundation topbar collapses to small screen mode.
Unfortunately, if I access the page from my mobile browser, the the text in the topbar becomes smaller and the menu does not collapse.
here is header.php code:
<body <?php body_class(); ?>>
<header class="site-header" role="banner">
<div class="row">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</header>
<div class="contain-to-grid">
<nav id="nav" role="navigation" class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><?php bloginfo( 'name' ); ?></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'right', 'walker' => new Foundation_Walker()) ); ?>
</section>
</nav>
</div>
<div id="container" class="row">
The image below shows what appears in my desktop browser:
As you can see, the menu collapse regularly.
The second image shows what happens in google chrome on android:
Same problem on iPad: the text is small and the menu does not collapse.
Hope somebody could help me.
Here is a live example: http://htmlintro.altervista.org/wordpress/
Solved!
I did not include the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Now it works fine.
Related
I am trying to add some animation to the mobile navigation to drop down slowly rather than have the page jumping. I am using the foundationpress theme. I can't seem to make it work with data-animate. This is my code snippet:
<div class="title-bar" data-responsive-toggle="site-navigation">
<button class="menu-icon" data-toggle="panel" type="button" data-toggle="mobile-menu"></button>
<div class="title-bar-title">
<div class="mini-logo">
<img class="mini-logo-img" src="/wp-content/uploads/2016/11/coc-logo.png" alt="Mountain View" style="width:4rem;height:auto;">
</div>
<!--<?php bloginfo( 'name' ); ?>-->
</div>
</div>
<!--<nav id="site-navigation" class="main-navigation nav-area" role="navigation" style="width:100%" >-->
<div class="top-bar-left">
<ul class="menu">
<li class="co-logo-top"></li>
<!--<li class="home"><?php bloginfo( 'name' ); ?></li>-->
</ul>
</div>
<div class="top-bar-right" >
<?php foundationpress_top_bar_r(); ?>
<?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) === 'topbar' ) : ?>
<?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
<?php endif; ?>
</div>
</nav>
I'm not seeing the actual '#mobile-menu' component in your code snippet, so not 100% sure what's happening here, but the thing to be aware of is that you need to have the data-animate attribute on the same element as you have your data-toggler attribute (which in this case is the thing being toggled, or '#mobile-menu'). See the example here: http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation
have you tried triggering it with jquery/js? see this thread: https://github.com/olefredrik/FoundationPress/issues/772.
also check that you have added the data-toggler attribute to the element
I am setting featured images to posts, and displaying a default image if one isn't set. My code is here...
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array( 'class' => 'img-responsive' ) );
} else { ?>
<img src="default-image.jpg" class="img-responsive" />
<?php } ?>
Problem is simple. All of the images are different heights. I want them all to be uniform height so my bootstrap grid lines up evenly.
Any thoughts? Lots of examples online but none work with featured image AND default image.
Please Paste below code in your functions.php file
add_image_size('image_size', 510, '520', true);//510 is width and 520 in height
Now when ever you upload any image in wordpress post it automatically resize into 510*520 (but bee care full image size must be bigger than what ratio you want)
How to call please check Below
the_post_thumbnail( 'image_size', array( 'class' => 'img-responsive' ) );// image size is the parameter you pass in functions.php file you can add as many size as you want
In your code, add the "unim" class like so:
the_post_thumbnail( 'full', array( 'class' => 'unim' ) );
To achieve uniform images on site, you can use the open source library bootstrap-spacer via NPM
npm install uniformimages
or you can visit the github page:
https://github.com/chigozieorunta/uniformimages
Here's an example of how this works using the "unim" class (you'd require jQuery for this):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="uniformimages.css" rel="stylesheet" type="text/css"/>
<script src="uniformimages.js" type="text/javascript"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<a href="product1.html">
<img src="image1.jpg" class="unim"/>
</a>
</div>
<div class="col-sm-4">
<a href="product2.html">
<img src="image2.jpg" class="unim"/>
</a>
</div>
<div class="col-sm-4">
<a href="product3.html">
<img src="image3.jpg" class="unim"/>
</a>
</div>
</div>
</div>
</section>
</body>
I have in my header.php the following code. What I want to do is to position the logo with the text so that it stays there when it is viewed on a smaller device aswell. I am using the foundationpress theme on wordpress to do this. The title seems to dissappear when I insert the logo before it but if I insert the logo after the title its viewed fine :
<div class="top-bar-container contain-to-grid show-for-medium-up" role="navigation">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<?php bloginfo('name'); ?>
<img src="http://localhost/rabbit/wp-content/themes/FoundationPress-master/images/flogo.svg" width="80" height="80">
</li>
</ul>
<section class="top-bar-section">
<?php foundationPress_top_bar_l(); ?>
<?php foundationPress_top_bar_r(); ?>
</section>
</nav>
</div>
I got tasked with fixing problems on my company's Wordpress instance. Since I'm novice when it comes to Wordpress and PHP I am sure that I am missing something trivial; problem I am having is that pages look different in preview and when viewed directly. For example, here is what part of HTML that gets rendered in live preview (for site header):
<header role="banner" class="clearfix" id="site-header">
<div class="container">
<!-- #logo -->
<div id="logo">
<h1>
My Site
</h1>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav class="clearfix" role="navigation" id="primary-nav">
</nav>
<!-- #primary-nav -->
</div>
</header>
However, when I visit site directly (go to http://example.com), I get following HTML in that part:
<div class="container">
<div id="logo">
<h1>
My Site
</h1>
</div>
</div>
I'm getting similar behavior when trying different themes. Thus, I'm suspecting something may be wrong with installation of Wordpress... however, I can't just re-install everything - I've inherited this Wordpress instance and must stick with it.
I have no problem with modifying php files and HTML - would just appreciate if someone more experienced with Wordpress would tell me where I should start looking. php files? CDN plugins?
EDIT:
Here is header.php from theme:
<!-- #header -->
<header id="site-header" class="clearfix" role="banner">
<div class="container">
<!-- #logo -->
<div id="logo">
<?php if (is_front_page()) { ?><h1><?php } ?>
<a title="<?php bloginfo( 'name' ); ?>" href="<?php echo home_url(); ?>">
<?php if (of_get_option('st_logo')) { ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo of_get_option('st_logo'); ?>">
<?php } else { ?>
<?php bloginfo( 'name' ); ?>
<?php } ?>
</a>
<?php if (is_front_page()) { ?></h1><?php } ?>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav id="primary-nav" role="navigation" class="clearfix">
<?php if ( has_nav_menu( 'primary-nav' ) ) { ?>
<?php wp_nav_menu( array('theme_location' => 'primary-nav', 'container' => false, 'menu_class' => 'nav sf-menu clearfix' )); ?>
<?php } ?>
</nav>
<!-- #primary-nav -->
</div>
</header>
<!-- /#header -->
I had this issue and I resolved it by changing the settings that were not displaying properly to something else (such as un-checking a checked box), publishing it, and then changing it back and publishing again. I'm guessing there was some mis-match somewhere between something cache and something database and this was a quick way to force them to match up again.
Just had a similar issue but rather I had the desired result in the customize preview but not in the actual site. I tried a variety of things in the themes code but sadly I think it just came down to a hard refresh of my customizer and page tabs (ctrl+F5 in chrome) then tweaking the slider and publishing.
Im trying to make a custom wordpresss theme. I want to install a Jquery plugin (slideshow). I so far have a theme installed that I created but don't know how to make the plugin interface with my theme. Do I need to declare a space in a div or place some php code in the theme so that the plugin knows where to go?
You can directly write the jquery code for the sliders. For example, applying accordion slider in my template page:
header.php file, save it in your custom theme folder
<!DOCTYPE html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-
1.7.1.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style/main.css"
type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"
type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.kwicks-
1.5.1.pack.js"></script>
<!--Accordion -->
<script type="text/javascript">
$(document).ready(function() {
$('.kwicks').kwicks({
max : 800,
spacing : 5
});
});
</script>
<!--end Accordion-->
</head>
<body>
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<div class="line"></div>
<!-- logo -->
<h1 class="logo"><a href="#">xcvdfgdf - Career Development
Centre</a></h1>
<!-- main nav -->
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</header>
<?php wp_head(); ?>
Then, create slider.php, where you want your slider to appear
<?php
/**
* Template Name: accordion
*
* Selectable from a dropdown menu on the edit page screen.
*/
?>
<?php get_header(); ?>
<body>
<!-- main -->
<div id="main">
<!-- gallery -->
<section class="intro gallery">
<div class="gallery-holder">
<div class="slider_list_accordion">
<ul class="kwicks horizontal" >
<li id="kwick_1"><img src="<?php
bloginfo('template_url'); ?>/images/slider-1.png" alt=""
/></li>
<li id="kwick_2"><img src="<?php
bloginfo('template_url'); ?>/images/slider-2.png" alt=""
/></li>
<li id="kwick_3"><img src="<?php
bloginfo('template_url'); ?>/images/slider-3.png" alt=""
/></li>
</ul>
</div>
</div>
</section>
<?php get_footer(); ?>
Then, footer.php
<footer id="footer">
<div class="footer-holder">
<div class="container">
<div class="case">
<!-- contact -->
<div class="contact">
<section class="contact-holder">
<h4>Get in Touch</h4>
<dl>
<dt>Telephone:</dt>
<dd>+1 800 603 6035</dd>
<dt>Fax:</dt>
<dd>+1 800 889 9898</dd>
<dt>E-mail:</dt>
<dd>contact#vycdc.com</dd>
</dl>
<address>9870St Vincent Place, <br >Glasgow, DC 45 Fr
45.</address>
</section>
<div class="add">
<div class="case">
<strong class="copyright">©
Copyright 2012 sdfr Development Centre. All rights reserved.</strong>
<nav class="add-nav">
<ul>
<li>Sitemap</li>
<li>Terms of use</li>
<li>Privacy policy</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
Then, in Wordpress, go to Pages->Add new. In title enter Home and in the right side you will see Templates. Click the dropdown and select accordion and click the publish button.
Now, click on the top left corner on the website or blog name to check for the slides.