I have a Wordpress site and I want to change certain CSS values in the header.php on the index page only. I have a div which is 100% width and border bottom to add an underline to the header.php
<div class="nav">
...content to create nav-bar ...
<div class="hr"></div> <!-- remove on index.php -->
</div>
I don't want it to show, or affect anything on the index.php. (I don't want to target another header.php file for this one small thing)
Wordpress has a template tag called body_class which is used to create contextual CSS hooks.
<body <?php body_class(); ?>>
You can then use it in your CSS as follows:
.blog {}
.blog.home {}
/** if blog index is a page **/
.page.blog {}
see the documentation for the rather extensive list of possible output.
Usually, by default, in a Wordpress site, the body element has a home class for the front page.
So in your CSS you could try the following:
.home .nav .hr { display:none; }
Related
In my footer.php file, I have this bit of code towards the end of the file:
<?php wp_footer(); ?>
<div class="website-by">
<br>
Website by Gateway Web Design
</div>
</div>
</body>
As you can see, I've created a "website by" link, which links to another website when clicked on.
But I don't want this text, or the div that contains it, to appear at all on the home page of the site:
https://thehamburgercollection.com/
I've checked other stackoverflow articles that suggest doing so with JQuery, which I've added to my scripts.js file:
//hide link on the home page
document.ready(function() {
if (window.location.href.indexOf('https://thehamburgercollection.com/')) {
//Hide the element.
jQuery('.website-by').hide();
}
});
And I've also tried hiding the div on the home page with CSS that was suggested here:
.home .website-by {
display: none;
}
But unfortunately neither of these methods have worked. I've declared my class as website-by in the footer.php file, and have added the JQuery that should target that class in the scripts.js file, and have also added the suggested CSS. Any idea why either the JQuery or CSS code isn't working?
This is a WordPress website and a custom there. Any help / suggestions / education is appreciated!
I'm not a WordPress guru, but have you tried doing an if condition in the footer.php? if I got your question right, you need the .website-by to not appear elsewhere but the home page. Maybe something like
<?php wp_footer(); ?>
<?php if (!is_home()): ?>
<div class="website-by">
<br>
Website by Gateway Web Design
</div>
<?php endif; ?>
</div>
</body>
I want to create current state for my nav links in my website.
For example when I click "Contacts" the link refers me to contacts page and I want the link "contacts" in nav to change his color.
The problem is that I'm including the header from external html file in all my webpages with php. So if I edit this external header file the changes will affect all other pages not only the contacts page.
You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically.
That probably didn't make much sense, so here's an example:
<body id="index">
<div id="menu">
<ul>
<li class="index" >Index page</li>
<li class="contact" >Page 1</li>
</ul>
</div> <!-- menu -->
</body>
In your contact.html, you would set the id of the body to: id="contact".
Finally in your CSS you have something like the following:
#index #menu .index, #contact #menu .contact{
font-weight: bold;
}
You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.
It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.
I need some help to understand how to create WordPress One Page Scroll website. I did a standard website before (the one that change content after clicking on menu link), but I can't figure out how to use WP on web page with scroll to section instead of standard sub-sites.
Let me show You structure of my site:
<!DOCTYPE html>
<head>
css/bootstrap
css/main.css
etc.
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
//This navbar overlaps header and it's fixed to top//
//Has links to sections (e.g. #one, #two etc.)//
</nav>
<header class="masthead">
//This is also my "front page" displayed on page load with height:
100%, width: 100%//
</header>
<section id="one" class="bg-primary">
//first section to scroll to//
</section>
<section id="two" class="bg-primary">
//second section to scroll to//
</section>
//first section to scroll to//
<section id="three" class="bg-primary">
//third section to scroll to//
</section>
<footer id="main-footer" class="bg-primary">
//Some info about author, website, and social media links//
</footer>
js/jquery.min.js
js/bootstrap.min.js
js/script.js //my custom scripts
</body>
My problem is- how to organize this content for CMS to change every section content via dashboard?
1. Should I create different page.php for each section (e.g. page-one.php etc) and use:
<?php get_header(); ?>
<?php get_template_part('page-offer'); ?>
<?php get_template_part('page-tech'); ?>
<?php get_template_part('page-portfolio'); ?>
<?php get_template_part('page-contact'); ?>
<?php get_footer(); ?>`
on index.php
Or should I create section-one.php, section-two.php etc. and display it on "front-page.php"?
My second question is- is it possible to create different PHP file with Navbar code, and use this navbars html, and css as WordPress dashboard menu? Or should I create menu in dashboard first (every section is a single page) and then style it with custom css?
And last: How to use custom fields to edit every single paragraph, button content, link etc. via dashboard and allow it to work with POLYLANG to change content language?
Thanks for any help, and apologize for long thread. I'm realy struggling with this.
I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.
I know that if I just wanted to link it to the index I should use this:
<?php echo home_url(); ?>
But I want the link to send the user to the "About" section. Basically, I need to know how to do this:
index.php#about
but with PHP.
Thank you!
You're on the right track.
The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.
Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section "<a name="about">About</a>"' and then you'll be able to link to it using anchors like in your example-- About
If you are new to php, maybe you should use wordpress's editor ?
In your page (in the admin page), you can put any html you want.
In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.
So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !
You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.
In practice, you'll have some HTML containers that look something like this:
<!-- Your menu -->
<ul>
<li id="about-button"></li>
<li id="product-button"></li>
<li id="something-button"></li>
<li id="else-button"></li>
</ul>
<!--Your page sections-->
<main class="my-page">
<section id="about"></section>
<section id="product"></section>
<section id="something"></section>
<section id="else"></section>
</main>
Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:
$('#about-button').click(function() {
$.scrollTo($('#about'), {
duration: 800,
offset: -50
});
return false;
});
The JS is saying that once you click on the #about-button, take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.
I've already asked this, but I don't think I was specific enough!
I'm looking for a very simple way for a div to be hidden when there isn't any information in it. - It needs to be simple for the client so they don't have to worry about it.
The Div has information put into it with joomla in certain categories.
For example on my main template I might have a div below my nav on the left, I can choose which pages it displays modules in, but when it's not in-use it still displays it's borders.
I also don't want to use many different templates for the site, just have the ability to use many module positions, but when they're not in use, they're hidden.
http://msc-media.co.uk/
Have a look, under my nav on the left.
If it helps, here is the code i'd be trying to hide if joomla isn't outputting any data on that page:
<div id="lnav2">
<jdoc:include type="modules" name="left2" />
</div>
Thanks in advance
In Joomla! templates you can use countModules to determine if a module is infact set for the position. So your code could be wrapped like this:
<?php if ($this->countModules('left2')): ?>
<div id="lnav2">
<jdoc:include type="modules" name="left2" />
</div>
<?php endif; ?>
That way the <div id="lnav2"> is only rendered if there is an active module for the position.
Check out jquery :empty selector
http://api.jquery.com/empty-selector/
<script>$("div:empty").css('display', 'none');</script>
Load the latest jquery library into your
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
and place the code above <script>$("div:empty").css('display', 'none');</script> into the head or in before the closing tag of your html. This will detect all instances of empty tags. Change div accordingly depending on what you are trying to detect.
You can put a jQuery code at the page. Something like:
$(function() {
$('div').each(function() {
if($(this).html() == '') {
$(this).css('display','none');
}
}
});
you can do the following inside your tags that you do not want displayed, if empty:
<div id="rnav1a" <?php if(empty($variable)||!isset($variable)) echo 'style="display: none;"'; ?>> <jdoc:include type="modules"
name="right1" />
</div>
Simply adding a css style="display:none;" get's rid of that block.
While hiding the div on page load is good, it's cleaner to set the div to display: none by default, and show it if it does have content. Also, should still wrap this in a .ready to ensure all content has loaded.
jQuery( function( ) {
jQuery( '#divid:not(:empty)' ).css( 'display', 'block' );
});