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.
Related
When someone visits a specific page in my WordPress website, I want to show a full screen iframe of another website over it. It has to cover my webpage fully, so it looks almost as if the user is on another website now (url will still be of mine).
How can I do that? Is there maybe a plugin for that?
P. S. I know how to code, but I've never developed anything on WordPress. Please be specific :)
EDIT:
Trying to put iframe on header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package staymore
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
// When user visits http://my-website.com/privacy-policy
if(is_page('privacy-policy'))
{?>
<iframe src="http://google.com" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
<?}
?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'staymore' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="wrap">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</header><!-- #masthead -->
<div class="site-banner">
<!-- #Header-image -->
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
</a>
<?php endif; // End header image check. ?>
</div>
<div id="content" class="site-content">
<div class="wrap">
It is quite easy, first please check the page by placing one of the conditional tag in your header.php file:
<?php
// When Page 42 (ID) is being displayed.
if (is_page( 42 ))
{ ?>
<iframe src="https://www.w3schools.com/html/html_iframe.asp" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
<?php } ?>
You can also use page name or slug in this conditional tag:
if (is_page('Contact')) {iframe code here}
or
if(is_page('about-us'))
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 have searched for a while and cannot find anything specific to my issue.
I have a WordPress site that I added a new menu item, it does not display on some pages and others it does.
here is the site:
http://www.allproplumbers.com/
the 4th menu item under Plumbing should be Water Heater Brands as it is on the Plumbing page.
I don't get it, its the same menu or should be on ALL pages.
Even inspecting the element doesnt show it.
Sorry if this post doesn't contain enough information, i just don't know what else to post in it.
I don't have any cache plugins, I use the Swell Template (and yes, I checked there) but everything is about making it show the menu on certain pages, I need ALL menu items on ALL pages.
If there is something else I can post to clear this issue, I will post it.
as requested, header and footer code:
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php wp_title(' » ', true); ?></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="<?php echo_theme_dir('parent') ?>/favicon.png" />
<meta name="google-site-verification" content="sdUWtQY93zlQ0vEZ-gkNKX9ZAMRop4uUuMiR5v3ar6Y" />
<?php
wp_register_style( 'slbase', get_theme_dir('parent') . "/css/base.css" );
wp_enqueue_style( 'slbase' );
?>
<?php
wp_register_style( 'sldefault', get_theme_dir('parent') . "/css/default.css" );
wp_enqueue_style( 'sldefault' );
?>
<?php
wp_register_style( 'style', get_theme_dir('parent') . "/style.css" );
wp_enqueue_style( 'style' );
?>
<?php
wp_register_style( 'cstyle', get_theme_dir('parent') . "/custom.css" );
wp_enqueue_style( 'cstyle' );
?>
<?php wp_head(); ?>
<?php load_google_font('Asap:400,700'); ?>
<?php load_google_font('Droid+Sans'); ?>
<?php include_once(get_template_directory().'/inc/options.php'); ?>
</head>
<body <?php body_class(); ?>>
<header id="header" class="row">
<div class="container">
<div class="logo left">
<?php if($swell_opt['logo'] == null): ?>
<div id="logo"><?php bloginfo('name'); ?></div>
<h3 id="tagline" class="alt"><?php bloginfo('description'); ?></h3>
<?php else: ?>
<a title="<?php bloginfo('name'); ?>" href="<?php echo (site_url()); ?>"><img src="<?php echo $swell_opt['logo']; ?>" alt=""/></a>
<?php endif; ?>
</div>
<?php if($swell_opt['call_us_banner'] !== ''): ?>
<?php echo $swell_opt['call_us_banner']; ?>
<?php endif; ?>
</div>
</header>
<nav id="nav" class="row">
<div class="container">
<?php get_template_part('parts/mobile-menu'); ?>
<?php get_template_part('parts/top-bar'); ?>
<img src="<?php echo get_theme_dir('parent'); ?>/images/request-callback.png" alt=""/>
</div>
</nav>
<?php if(is_page('home')):?>
<div class="slider-container">
<?php echo do_shortcode('[rev_slider home-slider]'); ?>
</div>
<?php endif; ?>
<div class="clearfix"></div>
footer.php
<?php global $swell_opt; ?>
<footer id="footer" class="footer-container">
<div class="row footer-top">
<div class="container common">
<div class="col-3-12">
<?php wp_nav_menu( array('menu' => 'Footer', 'menu-class' => '') ); ?>
</div>
<div class="col-3-12">
<?php wp_nav_menu( array('menu' => 'Footer Right', 'menu-class' => '') ); ?>
</div>
<div class="col-6-12" id="contact-us">
<?php echo do_shortcode('[contact-form-7 id="64" title="Footer Form"]'); ?>
</div>
</div>
</div>
<div class="row footer-bottom">
<div class="container common copyright">
<div class="credit">
<img src="<?php echo get_theme_dir('parent'); ?>/images/bbb.png" alt=""/>
</div>
<ul class="social-media">
<?php if($swell_opt['facebook'] !== ''): ?>
<li></li>
<?php endif; ?>
<?php if($swell_opt['twitter'] !== ''): ?>
<li></li>
<?php endif; ?>
<?php if($swell_opt['google_plus'] !== ''): ?>
<li></li>
<?php endif; ?>
</ul>
<p>All Pro Plumbing Services 5075 E Airport Drive Ontario CA 91761</p>
<br>
<?php echo $swell_opt['copyright']; ?>
</div>
</div>
</footer>
<div id="requestcallback-hide" class="white-popup mfp-hide">
<?php echo do_shortcode('[contact-form-7 id="410" title="Request a Callback"]'); ?>
</div>
<div id="requestqoute-hide" class="white-popup mfp-hide">
<?php echo do_shortcode('[contact-form-7 id="411" title="Request a Quote"]'); ?>
</div>
<div id="schedule-service-form" class="white-popup-large mfp-hide">
<h2 class="center">Schedule a Service</h2>
<iframe src="http://www.allproplumbers.com/request-free-estimate.htm" width="100%" height="1250" frameborder="0"></iframe>
<!--<script type="text/javascript" src="http://form.jotform.us/jsform/xxxxxxxxxxxx"></script>-->
</div>
<?php
// load scripts
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, false, true);
?>
<?php wp_enqueue_script( 'slcommon', get_theme_dir('parent') . '/js/common.js', array('jquery'), false, true ); ?>
<?php wp_footer(); ?>
<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-xxxxxxxx-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Google Code for Website Form Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = xxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "wUWSCNvBvF4Q1eDr4AM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=wUWSCNvBvF4Q1eDr4AM&guid=ON&script=0"/>
</div>
</noscript>
</body>
I am editing once again because the site asked me not to comment too much but turn it into chat, but i dont have privs to chat.
So i had a friend in another state load the site, it showed up where it was supposed to, however, he refreshed the page, now its gone.
Which immediately made me think of cookies, but like i said before, there are no cache plugins on the site, could there be a cookie plugin or something that i cant see? #ham-sandwich if you refresh the home page now that it is in your cache, does it still show?
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.
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.