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.
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 have installed WordPress 4.5.3 and have built my custom theme. Everything works pretty well except for the fact that some pages don't show any content at all. I have tried to search on how to fix this but I can't find any solution, because my own problem has pages that don't even enter 'the loop'. I have tried to echo things within the loop to make sure that it enters but to no avail. My theme is still offline so i could not provide a link to it. Please any idea why it is not entering the loop.
<?php get_header(); ?>
<style type="text/css">
.submit input {
height: 50px;
width: 200px;
background: #f88b0c;
}
</style>
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-12 ">
<h2 class="title ">
<center>
<?the_title()?>
<hr>
</center>
</h2>
</div>
<div class="col-md-12">
<?php if(has_post_thumbnail())?>
<?php the_post_thumbnail(); ?>
</div>
<div class="col-md-12">
<p>
<?php the_content(); ?>
</p>
</div>
<?php endwhile;?>
</div>
<?php get_footer(); ?>
I want to remove the green search box from the header but I don't know which file and lines in the Editor I must remove.
Regards.
You should not be editing default themes!
Create a child theme http://codex.wordpress.org/Child_Themes
The example actually shows using TwentyFourteen
Then copy the header.php to your child themes folder and edit it.
This way updates for TwentyFourteen will not over-write your changes.
When updates do come, compare the TwentyFourteen header.php with your header.php and make the updates to it.
OR better yet,
Create the child theme and add this to your style.css after the parent themes import
.search-toggle, #search-container {display: none;}
Then you do not need to modify or copy the header.php file at all.
You need to edit the header.php file of your WordPress theme that can be found at [your_WP_folder]/wp-content/themes/twentyfourteen/header.php.
Look for the <header> section and copy and paste the code below instead of the original.
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<!-- Hide Search button
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
-->
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
<!-- Hide Search Form (optional)
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
-->
</header><!-- #masthead -->
Goto your_project/wp-content/themes/twentyfourteen/header.php file and open it.
Search for the word search-toggle and search-container (This one is optional).
.search-toggle
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
#search-container
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
Remove both html block of codes or you can wrap them in a comment for later use like this:
<!--
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
-->
Topdown is correct. Creating a child theme is very important.
But an easier way to remove search bar in twenty fourteen theme is to put .search-toggle { display: none; } in your child css file.
Here's a bit more information on customizing twenty fourteen theme in WordPress and how to create child theme for twenty fourteen theme.
I was reading Wordpress's coding standards
The only confusing part for me is the vertical spacing between HTML code for instance:
Default Wordpress Theme 3.03:
sidebar.php:
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>
<li id="archives" class="widget-container">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
(Here's space between the two <li> tags)
header.php
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
(Here, there's no space between div tags)
header.php (line 79...):
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><?php _e( 'Skip to content', 'twentyten' ); ?></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
(Here, there's is space between those 3 <div> tags
What's the coding standard of vertical spacing (I don't think it is random)?
Not sure i really follow you, but some examples..
Well formatted HTML
Indentation used, no excessive whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Poorly formatted HTML - Example 1
No indentation
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Example 2
Useless whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
This isn't really specific to WordPress, any good teacher or tutorial will encourage well formatted coding, and there's little excuse when you're using a good editor(i mean seriously, which do you find most readable and easier to understand?).
More..
Well formatted PHP
Indentation used appropriately
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Poorly formatted
No indentation, harder to read
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Formatting your code makes it easier to read, understand, or update/maintain(it's not something that will make a whole lot of sense until you start dealing with code on a regular basis). Then again, i'm not the best at explaining these things, so i'd suggest refering to information already available for the "why".. (i know my reasons)..
Mixed PHP and HTML example
Mock template loop, only for illustration
<div class="wrapper">
<div class="header">
<h1>My Website Heading</h1>
</div>
<div class="content">
<?php if( have_posts() ) : ?>
<div class="wrapsallposts">
<?php while( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="postcontent"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
I deactivated "Allow commments in my page. But I still can see a "Leave a comment" link, how do I remove that text just for this contact page?
my template:
contact.php:
<?php
/*
Template Name: Contact
*/
$body ="blog";
get_header();
?>
<div id="content">
<div class="container">
<div id="content-top">
<div id="picture">
<ul>
<img src="<?php bloginfo('template_directory'); ?>/images/featured2.png"/>
</ul>
</div><!-- #slider -->
<div id="tagline">
<h2>Welcome to our BLOG!</h2>
<p>以線上處理為原則,全省 或 全球 客戶接案客戶包括網頁設計公司需要代工亦可承接初期以我們可以製作的項目來經營以線上處理為原則</p>
參觀我們的作品
</div>
</div><!-- header-bottom -->
<div id="content-bottom">
<div id="blog-content">
<?php get_template_part( 'loop', 'index' ); ?>
</div>
<?php get_sidebar(); ?>
</div><!-- #mainbar -->
</div><!-- .container -->
</div><!-- #main-content -->
</div><!-- #wrapper -->
<?php get_footer(); ?>
To remove the commenting section entirely, just edit the single.php in your theme folder and remove the following line of code:
<?php comments_template(); ?>
This is also good if you want to use another service for comments such as Disqus (which is a great tool). But, I think there is also a Wordpress plugin for Disqus should you choose that route later on.