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>
Related
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'm creating an app in Laravel 5, with a footer that's going to have alot of links with sections. The idea is that, when I click on a footer link of a section, it's going to redirect me to a template page, where on the left, are all the links in that footer, and on the right, the content of the link I clicked.
For example, on this picture, I click on Link A in the footer, and it shows all the links from Section 1(with Link A underlined) on the left, and on the right it shows the content of Link A.
Basically I want to know if there is a good way to do this without creating 50 different templates(one for each link of the footer).
You can do it by using just 3 templates:
main.blade.php:
<html>
<body>
#include('sidebar')
..
#yield('content')
..
#include('footer')
</body>
</html>
sidebar.blade.php
<div class="sidebar">
#foreach($sidebar_links as $link)
// print $link
#endforeach
</div>
footer.blade.php
<div class="footer">
Section A
Section B
</div>
Controller action:
public function getMenu($section) {
$sidebar_links = // Get sidebar links of the section which is clicked from the bottom links
return ('main', compact('sidebar_links'))
}
Note: I have not tested this, but it should give you the basic view.
You can use Request::segment() for finding the active link. For example the link of Link A = /link/a then we can say Request::segment(2) == a. You can you use that to show what is the active link.
Link A
Link B
Link C
My friend has asked me to help them move images around on their wordpress site. They have an image slideshow that runs along the bottom of the page and the image gallery that shows, depends on the page template used.
One template has the following code:
<?php
$tagu = get_post_meta($post->ID,'bototm_gallery');
?>
<div class="flt box_bottom">
<ul style="margin-left:10px !important; width:100% !important;" class="sub_photo sub_photo_gigs" class="sub_photo">
<?php echo do_shortcode($tagu['0']); ?>
</ul>`
and another page template shows this code:
<?php $tagu = get_post_meta($post->ID,'bototm_gallery'); ?>
<div class="flt box_bottom">
<div class="sv_footer_photo">
<?php echo do_shortcode($tagu['0']); ?>
</div>`
How do I add images to a specific gallery? I can't find a gallery id in the media library and/or I don't know where to find the class such as sv_footer_photo or sub_photo.
Could you please explain it to me?
Oh Wow, I've found it and sure enough it was simple.
I had to click on 'Screen Options' at the top of the page, tick the box for custom fields and then I can see the gallery image ids assigned to that page.
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; }