Convert static navigation bar to dynamic - php

From the research I have done, I think it has to do something with the include() function linking to the nav.php file. What I am trying to accomplish is taking an older huge site with every element being static ones and converting it to have dynamic elements so that the updating is faster. The first step was the nav bar and I can't seem to get it to work.
The route to the nav bar is inputs/nav.php, and I'm trying to use include() to put the nav in:
<?php include("inputs/nav.php"); ?>
It works for the files at the same level as the inputs folder, but if a page is at any other level of files, it does not. Anyone got any ideas of what is going on and how to fix?
Thanks in advance!
<header>
<div id="mastHead">
<div id="fss_logo">
<a href="index.html">
<img src="images_folder/logos/35fss_logo4.png" alt="35 FSS" />
</a>
</div>
<!--End FSS logo-->
<div id="facility_title">
<div id="rotating-item-wrapper_main">
<a href="facebook_links.html" onClick="return popup(this, 'facebook')">
<img id="facebook_logo6" src="images_folder/logos/facebook_circle2.png" alt="Facebook Logo" class="rotating-item" />
</a>
<a href="http://ice.disa.mil/index.cfm?fa=site&site_id=7&dep=DoD" target="_blank">
<img id="ice_logo2" src="images_folder/logos/ice.png" alt="ICE Logo" class="rotating-item" />
</a>
</div>
<!-- END: Rotating images images -->
</div>
<!--End facility_title-->
</div>
<!--End Mast Head-->
<!--------------------------- NAV INCLUDE ----------------------------->
<?php include( "inputs/nav.php"); ?>
<!--------------------------- NAV INCLUDE ----------------------------->
<!-- /nav-wrap -->
</div>
</header>

Related

Inheriting files in specific div through php files

I've created a file called menu.php to be my universal nav/menu file. The way it was created using bootstrap though, I have a div called article at the bottom which serves as the main body of the app, since the sidebar in my menu is expandable/responsive.
I really want to have one global menu file. I'm currently including it in all of my content pages like so:
<?php include("menu.php")?>
This works but it breaks my formatting. What I'm trying to do is make all of my main pages such as index.php have the html formatted so that it will always sit inside the tag in my code below which shows card classes.
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src="" />
</div>
<div class="page-details">
</div>
<div class="settings">
<div class="menu-button profile">
<i class="far fa-user-circle fa-2x"></i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src="" />
</div>
<ul>
<li><a href="#"><i class="material-icons">home</i>
<span>Home</span></a></li>
</ul>
</nav>
<!--This following article section is the main body of the page, that I want each additional page to take up-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>
Example:
Menu.php is my global menu/nav file but it makes the page/app act as a wrapper for all the other pages (index.php, editor.php, etc.)
menu.php
<div class="app">
<nav>
Nav menu content
</nav>
<article>
This will be the main page article for index.php, editor.php,etc.
</article>
</div>
example with index.php (the start and end are just hypothetical to show the endpoints)
<body>
<?php include("menu.php");?>
<?php start('article') ?>
<!--Everything from here to the end() call would be inserted in the article tags on menu.php-->
<div class="app">
<div id="content">
<div>
<h1 style="text-align: center; color: #A9BD50; ">Content Management Editor</h1>
</div>
<form method="post">
<textarea id="mytextarea"></textarea>
</form>
<div>
<h1 style="text-align: center; color: #A9BD50; ">Preview</h1>
</div>
</div>
</div>
<?php end() ?>
</body>

Can't remove a column in my footer

I am starting a wordpress page and I am trying to remove the right column in my footer but it does not work. Can you please help me on this?
The code of my footer.php is pretty long, but I think that the issue is in the first part of the code:
<!-- footer -->
<div class="footer_container_full">
<footer class="footer" role="contentinfo">
<div class="footer_container">
<div class="footer-widget">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-footer')) ?>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- copyright -->
<div class="footer_copyright_full">
<div class="footer_copyright">
<a class="back_to_top" href="#top">
<i class="fa fa-chevron-up"></i>
</a>
<div class="copyrights">
<?php
$copy=ot_get_option('footer_copyrights');
if($copy) : echo $copy;
else : echo '© '.date("Y").' Copyright '.get_bloginfo('name').' / Logo: Andrii_M, Shutterstock.com. <br />PRIVACY: We will never disclose or sell your email address or any of your data from this site. <br /> DISCLAIMER: Blabla exists to thought provoke and learn from the community. Your decisions are yours alone and we are in no way responsible for your actions. In short, think twice before making any financial transaction!
Please read our Disclosures and Terms Of Use';
endif;
?>
<div class="clear"></div>
</div>
<!-- /copyright -->
</div>
</footer>
</div>
<!-- /footer -->
<div class="clear"></div>
</div><!--2-container-->
You need to target the element you want to hide and apply display: none in the CSS. With display: none applied, it's as though the element doesn't exist, in terms of visual media. Screen readers and other assistive technology may still pick it up because they may not look at the CSS.

How to properly embed a html conditional code in php

I have a situation and I am struggling to embed 2 conditional html code sequences inside of a PHP file. I was thinking, of using include PHP function to call two separate external html files (section1.html and section2.html) in header.php like this:
<!-- Start Header -->
...
<?php
/* a conditional PHP code is required in order to load
the section1.html if the menu1** is shown on the page (?)*/
include('section1.html');
/* also here, a conditional PHP code is required in order
to load the section2.html if the menu2** is shown on the
page (?)*/
include('section2.html');
?>
...
<!-- End Header -->
Another approach using in between PHP tags:
<!-- Start Header -->
...
<?php if(condition){ ?>
<!-- HTML code of section1 here -->
/* above, a PHP (condition) that could load section1 if
the menu1** is shown on the page, should be defined (?) */
<?php } ?>
<?php if(condition){ ?>
<!-- HTML code of section2 here -->
/* above a PHP (condition) that could load section2 if
the menu2** is shown on the page, should be defined (?) */
<?php } ?>
...
<!-- End Header -->
If this helps, I can expose the html code sections, but I think that at this point it's not so important.
**the conditional PHP code should be related to the above mentioned menu1 and menu2 made in wordpress/appearance/menus section.
LE:
HTML sections are,
section1:
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Portfolio
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
About
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
</div>
</nav>
and section2:
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Fiva
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
Caterham
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Mobile
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
</div>
</nav>
Any thoughts? Thank you,
Based on the menu1 and menu2 page links you included in your most recent comment, it looks like menu1 corresponds to your leaf pages and menu2 is your front page. If that's your intention then you could use the following conditional PHP.
<?php if (is_front_page()) : ?>
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Portfolio
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
About
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
</div>
</nav>
<?php else : ?>
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Fiva
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
Caterham
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Mobile
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
</div>
</nav>
<?php endif; ?>
If you want to include the code using external files you'd have to save them as .php files instead of .html. You can use the exact same code in those .php files, but it's important to use the .php extension when you save them. Here is what the files would look like:
menu1.php
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Fiva
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
Caterham
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Mobile
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
</div>
</nav>
menu2.php
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Portfolio
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
About
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
</div>
</nav>
Then in your header.php file use this code:
<?php if (is_front_page()) : ?>
<?php include 'menu2.php'; ?>
<?php else : ?>
<?php include 'menu1.php'; ?>
<?php endif; ?>
It's important to make sure that the path to the menu1.php and menu2.php files are correct. My code above assumes that those two files are in the same directory as your header.php file.

How to add slider in the wordpress index.php file?

My javascript code for slider is as follows which is displayed in the
html format but not displayed when I integrated it into a theme.This code is in header.php.I have called all the requred js css and image files in it and that worked fine but the problem is in slider portion.
Code in header.php
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
useCSS: Modernizr.touch
});
});
</script>
Code in index.php
<div class="flexslider">
<ul class="slides">
<li>
<div class="hero-unit">
<h1>Affordable Hosting Solution</h1>
<h3>Flathost is a bootstrap based responsive minimal, flat and afforable
hosting template with easy customization and great support</h3>
<div class="slider-actions text-center"> <a href="features.html" class="btn
btn-success btn-lg">Explore Features </a> <a href="pricing.html" class="btn
btn-primary btn-lg">Plans and Pricing </a> </div>
</div>
</li>
<li>
<div class="slide2">
<p><img src="<?php echo get_template_directory_uri(); ?
>/images/server1.png" alt="server" class="img-responsive center-block"></p>
<h1>Dedicated and VIP Hosting</h1>
</div>
</li>
<li>
<div class="slide3">
<p class="pull-left"><img src="<?php echo get_template_directory_uri(); ?
>/images/server2.png" alt="server" class="img-responsive"></p>
<h1>Managed Hosting</h1>
<h3>Flathost is a bootstrap based responsive minimal, flat and afforable
hosting template with easy customization and great support </h3>
</div>
</li>
</ul>
</div>
</div>
</div>
<?php echo do_shortcode('[thethe-image-slider name="flexslider"]'); ?>

Strange Pagination issues adding /index/ between links - Expression Engine

I seem to be having an issue with the pagination on the news section appending an /index/ when using the {pagination_links} tag.
My news page has a template path of news/index and the posts template is news/post.
I am using structure with the news/post as a listing attached to the news/index page, to add|edit posts.
If you have a look at the website in question: http://www.wilbyltd.co.uk/news scroll to the bottom you will see the pagination, if you click either 1|2|3 or next page or last page you will get the page requested, the url looks like /news/P6, however now on this next page if you go to the pagination again and click any of them you will notice it has gone back to page 1 and the url has /news/index it seems to be appending or inserting between links /index/.
I have tried to the paginate_base="" in the channel entry but adding a base stops the categories from having a working pagination, categories also add /index/ between the links?
I have thought of hacking the core but seems the wrong approach just in case it ever gets updated.
I have tried .htaccess to remove the index, which didn't work.
RewriteRule ^/news/index/(.+)$ /news/$1 [L]
I have looked at the config for index.php which has been taken off and .htaccess has been used.
I have looked at the channel settings.
I have tried dynamic="off"|dynamic="on"
I understand that news/index it the correct path for the page to view, but if this is the case why doesn't it pick up the pagination?
If anyone could shed some light in to this I would be really grateful, here is the code containing the pagination.
{exp:channel:entries channel="posts" limit="6" dynamic="on" paginate="bottom" orderby="entry_date" sort="desc"}
<div class="news-snippet span9">
<a href="{url_title_path=">
<div class="date-published textalign-center">
<span class="day">{entry_date format="%d"}</span><span class="day-suffix">{entry_date format="%S"}</span>
<span class="month">{entry_date format="%F"}</span>
</div>
</a>
<div class="news-snippet-body pull-right">
<div class="news-snippet-top-shadow">
<div class="news-snippet-bottom-shadow">
<a href="{url_title_path=">
<div class="news-snippet-content clearfix">
<div class="title">
<h3>{title}</h3>
</div>
{if news_feature_image}
<div class="clearfix image">
<img src="{news_feature_image}" />
</div>
{/if}
<p>{news_short_description}</p>
</div><!-- end content -->
</a>
<div class="news-snippet-options clearfix">
<div class="news-tags pull-left">
<i class="icon-tags"></i>
{exp:tagger:tags entry_id="{entry_id}" }
<span class="label label-inverse tags">{tagger:tag_name}</span>
{/exp:tagger:tags}
</div>
<div class="social-share pull-right textalign-center">
<i class="icon-random"></i>
<a class="addthis_button"url="{url_title_path="title="{title}" href="http://www.addthis.com/bookmark.php?v=300&pubid=ra-5141a60a37fa6e4e">Share</a>
</div>
</div>
</div><!-- end bottom-shadow -->
</div><!-- end top-shadow -->
</div><!-- end snippet-body -->
</div><!-- end news-snippet -->
{paginate}
<div class="clearfix paginate">
{pagination_links}
<div class="total-pages pull-left">
<p>Page {current_page} of {total_pages} pages</p>
</div>
<div class="pagination pagination-mini pull-right">
<ul>
{first_page}
<li>First Page</li>
{/first_page}
{previous_page}
<li>Previous Page</li>
{/previous_page}
{page}
<li>{pagination_page_number}</li>
{/page}
{next_page}
<li>Next Page</li>
{/next_page}
{last_page}
<li>Last Page</li>
{/last_page}
</ul>
</div>
{/pagination_links}
</div><!-- end clearfix -->
{/paginate}
{/exp:channel:entries}
I have also had this on Ellis Labs forum for a couple of weeks: http://ellislab.com/forums/viewthread/237601/
Try to override the {paginate_base} parameter in your channel entries tag
{exp:channel:entries channel="posts" paginate_base="news/" ...}
http://ellislab.com/expressionengine/user-guide/modules/channel/channel_entries.html#paginate-base

Categories