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.
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 have a class called event-manager in a wordpress php file in the plugins folder. They are using this class to style the elements, and I am using a custom css to over-write this. The problem is I cannot overwrite their css so I had to remove this class all-together.
I need to remove this class dynamically, removing manually every-time is pointless, because every-time the plugin gets updated the class comes back.
And here the html structure. The class appears on two different pages and on both pages the image alignment is different.
<!-- Home page -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-image"> <!-- this image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
<!-- Blog single -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-img"> <!-- and image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
To acheive this I used jquery .removeClass method.
$(function(){
$(".featured-img > div, .featured-image > div").removeClass("event-manager");
});
I also tried this
$(function(){
$(".featured-img > div").removeClass("event-image");
$(".featured-image > div").removeClass("event-image");
});
And this
var featuredimg = ['.featured-img > div','.featured-image > div'];
$(featuredimg.join()).removeClass('event-image');
On all these methods, the class seems to be removed, because its on two different pages, when I load the homepage.php for the first time, the class is removed but when I go to single.php, it did not remove automatically and when I refresh the page, the class removes. I am not sure why.
Can anyone help me.
Thanks.
In my opinions it is related with caching. Do you have any? If yes disable it to test if works without it. If no you can check on developer console if do you have any errors. Issue can be also with place the script like this (prefer at the end of the page).
I just try to bulid control panel using MVC (codeigniter), I just need way to how make a side menu in home page and when I click in the link in menu the page open in the right side, and the menu stay in the left side.
I need coorect way to do this using MVC.
I use this simple way to make Views to make exactly what your asking.
<?php
//This is mainpage.php
$data['page_id'] = $_GET['page_id'];
?>
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<div>
<!-- HERE Comes Side Bar -->
<?php $this->load->view('sidebar'); ?>
</div>
<div>
<!-- HERE Comes Main Content -->
<?php $this->load->view('maincontent',$data) ?>
</div>
</body>
</html>
Mainpage.php is a master page who holds code for both, side menu as well as the content page
This code if for side bar sidebar.php in view folder
<div>
<ul>
<li>Dashboard</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
sidebar.php page only holds different links, but all links have GET variable named "page_id" which decides which page is to be displayed in the content page.
Now, in mainpage.php you can notice that maincontent.php is loaded as view with passing $data which has page_id as variable, which is drived from sidebar. this will help to display the content in content side.
This code is for maincontent.php in view folder
<?php
if(file_exists(APPPATH.'views/'.$page_id.'.php')){
$this->load->view($page_id);
}else{
show_404();
}
this has always worked for me in non ajax page displays...so will work for you to.
Thanks...
To try to map up all the pages, I've made a couple of maps called products and similar naming.
However when I go through a link with, for example, product/xxx.php and press the same link within the menu at that page I've entered, I get an adding of products/products/xxx.php, which break the link.
How do you avoid or correct these sort of linkages?
so for example I have my main menu inside a php file called menu.php which I include in the index.php by php include
a snip of the main menu php is
<div class="menuBar">
<ul id="menu">
<li>xxx
<div class="dropdown_unit">
<!-- Header -->
<div class="unitSizer">
<h4>xxx</h4>
</div> <!-- END Header -->
and it is placed within a div at the index.php
like this:
<div class="menuBar">
<?php include 'menu.php'; ?>
</div> <!-- END menuBarDental -->
this is just 1 part of the menu but it looks the same overall inside the menu.php
the problem here is that it seems by include this php file into the index.php and generating
the links inside the menu it keeps adding instances of the links.
I have a multi-page form which works on the principle of loading all of the pages inside the DOM under different DIV id's and as you progress through the form, it simply ads a style="display:none" to the Div's which should not be displayed.
I have a problem where two pages need to have the same content, however as i am using javacript and jquery, i am getting conflicts (as technically, both pages are loaded and the scripts are conflicting).
Can i get a php if Function to say - IF Div id gform_page_2_2 has style="display:none" load (block of html a), and IF Div id gform_page_2_3 has style="display:none" load (block of html b), otherwise load nothing.
How would i go bout doing this?
I'm not quite sure what exactly you are asking but since you have a way to determine when to apply style="display:none" you can use a boolean value display_none=true and use that in your if.
This is a sample code. Here, I have made use of jQuery here. I have included each page's content inside separate DIVs in my index page. Then displayed the content of the page upon clicking the menu in my navbar. I hope this will give you an idea. :)
JScript:
<script type="text/javascript">
$('.nav_button').click(function (){
var page = $(this).text().toLowerCase();
$('#content').html($('#'+page+'_page').html()); //display content of div(that holds the content of the respective page) in the "conetent" div
$('html, body').animate({scrollTop: $("#navbar").offset().top}, 'slow'); //scroll back to the top
return false;
});
</script>
HTML:
<!-- Navigation menu -->
<div id="navbar">
<a class="nav_button" href="#">Home</a>
<a class="nav_button" href="#">About</a>
<a class="nav_button" href="#">Contact</a>
</div>
<div id="content">
<!-- Here page content will be displayed -->
</div>
<!-- This div holds the contents of each page -->
<div style="display:none;">
<!-- Contact Page -->
<div id="contact_page">
You can contact me through this email....
</div>
<!-- About Page -->
<div id="about_page">
About me? I love coding...
</div>
<!-- Home Page -->
<div id="home_page">
Yo! You are at my home page. Check out my whole site and enjoy :)
</div>
</div>
I hope this will help :)
If you want to see it in action, goto: www.magcojennus.co.cc (it's a site that I have created for my college day :) )