I am making an attempt to write my own theme for wordpress and have written a file that contains all my modals (twitter bootstrap), which are html. I added that to the theme section (created an inc folder) and named it modals.php.
I included that via php everywhere in the page where I need the modals. This works. Whenever I click on the link, the modal loads. However, when I start adding php to the modals, it breaks. My modal is being loaded, but instead of the requested post item from the wordpress database (i use that to make it dynamic content, since its multi language), it loads the footer, and breaks my website, which is confusing me really.
my modals.php contains the following
<div id="about" class="modal fade" tabindex="-1">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal"></button>
<button class="close" type="button" data-dismiss="modal">x<span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title">
My modal popup
</h4>
</div>
<div class="modal-body modal-list">
<div class="modal-content col-md-12">
<strong><?php _e(" <!--:en-->It's me<!--:--><!--:pl-->To Ja<!--:-->" ); ?> </strong>
<p>
<?php
$post = get_post(930);
$content = $post->post_content;
echo $content;
?>
</p>
</div>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Do I need to tell my file it needs to read wordpress specific, or do I need to add my file somewhere in order to make it read?
edit
As i tried just echo'ing words like test , this works, so I have a feeling it has to do with the syntax Wordpress uses. Is there a way to make wordpress known it should be read with wordpress syntax?
edit 2
At the moment, i am having multiple subpages, so I only want to load certain modals for a certain page. For gdynia, i want to load only those. I updated the code and have now this.
else if (is_page ('gdynia')) {
get_template_part('modals-gdynia.php');
}
Yet nothing happens now. It used to be,
else if (is_page ('gdynia')) {
include_once(get_template_directory_uri() .'/modals-gdynia.php');
}
If you make use of get_template_part() you shoudn't have any issues.
The way you probably included your modals.php was probably calling wp_footer() for some reason.
so if you wanna use this template you just need to call it within the respective file you want it to.
header.php
single.php
footer.php
Are such template default files.
Within one of those just call it.
<?php
get_template_part('modals.php');
// Just in case you wanna use a variable from another context into this template.
$post_id = 930;
include(locate_template('modals.php'));
?>
Other than that i don't think their should be an issue it not working.
Tell me if it fixes your issues, maybe paste the code context where the modals.php is being called and how its being called.
Related
ISSUE RESOLVED:
The issue was related to the path of script calling js. Original script:
````<script src="js/app.js" charset="utf-8"></script>````
Working script:
````<script src="/js/app.js" charset="utf-8"></script>````
The / missing at the beginning was working on initially loaded pages as you navigate deeper into the site it gets thrown off.
I am using the bootstrap accordion with cards to present data to users. When the page was first created as a static page the accordion worked. As soon as I called data to it the accordions lost functionality and can't be opened or collapsed. They stay in the position they are in. Inspecting the webpage shows all the code present but something is blocking the "collapse" function. This is also true of the aria-expanded class. Choosing "true" / "false" have no effect on the class functionality.
I have created a new file, copy and pasted the code into it without the DB calls and verified that it works so it appears the issue is related directly to the PHP calls, the first being:
{{ $department->name }}
The other interesting thing is that after deleting (tried commenting out as well) the DB calls, the page still will not function properly. However, the page where I have not done any data calls but am re-using the same HTML works.
Department.blade.php
<div class="container">
<center><h1 id="">{{ $department->name }}</h1></center>
//Second location data is being called
<center><h1 class="top-space">Mission Statement</h1></center>
<!-- Dynamically allow users with permission to change the mission statement -->
<p id="">{{ $department->mission_statement }}</div>
//Accordion HTML
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
News and Events
</button>
</h5>
</div>
<!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
</div>
</div>
</div>
Test.blade.php (File where accordion works)
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
News and Events
</button>
</h5>
</div>
<!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<ul>
<li>
:
</li>
</ul>
</div>
</div>
</div>
The desired behavior is that when the Department.blade.php file is called the first accordion with news and events is openly displaying the events. On click of the accordion, it should collapse.
Bootstrap's docs say:
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.
Try changing this:
//Accordion HTML
<div id="accordion">
To this:
//Accordion HTML
<div class="accordion">
I'm interested in solving this problem, since I can't figure out what to do. I made a fade in/out text under menu for mobile version to show some information, but since the code has to be between two HR lines I added the code to layout.php file, and now I can't put that on 3 other languages because it's on German.
<div class="">
<div class="">
<hr class="" />
<div class="" style="">
<div class="">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<hr class="" style="" />
</div>
</div>
This is the code for that fade In/Out effect and changing from one to another, I managed to do that with nth-child selector, nothing hard...
My web site has 4 languages, but every language has 2 web sites that are different. I'm not using any framework just bare code. I've tried searching for anything that would be connected to that HR line so I could add manually on every site another line and that text between them, but there is none because it uses layout.php to show that line.
<div id="" class="">
<? if ($special_fullscreen != true): ?>
<div id='' class="">
</div>
<div class="">
<div class="">
<hr class="" style="" />
<div class="" style="">
<div class="">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<hr class="" style="" />
</div>
</div>
<div class="">
<div class="">
</div>
</div>
So, I would like to hear an idea that would resolve this issue, like making a different layout.php for every language or something like that and how would that be possible. I know that this code probably doesn't have anything to do with the problem, but I'm in a hurry and just tried to copy at least something... Thanks in advance :D
I am completely not sure if I know what you mean but it may be helpful info.
If you want to include different files on the same page depended on language - you can set cookie with info about chosen language and then, based on that, load proper layout.php file for it.
You can also make all language versions in one layout.php file, include it in proper place and make if statement checking which content should get displayed (inside that layout.php file) - also based on value of COOKIE.
Instead of cookie, you can also use $_SESSION but that may not work on the way you really want (according to my understanding of your problem).
I'm trying to put together a layout of items with an Accordion layout (from Bootstrap). In order to fill the accordions, I reach into a pgsql db to gather the data, and I'm able to retrieve this data.
What I'm having issues with is getting the data to show up at all. Right now I'm getting an HTML 500. It might be a layout issue or it might be a PHP interpretation issue (maybe out of depth? or something not visible to PHP), but I'm having issues determining which is the culprit.
I say this because I have a fairly complicated arrangement I'm attempting to make.
A sample:
<?php
// db connection info goes here
// pgsql query info goes here
$i = 0;
$result = pg_fetch_all($getData);
?>
<!-- Starting the container accordion -->
<div class="panel-group" id="main-accordion">
<?php
foreach($result as $row):
$title1 = $row['title1'];
$title2 = $row['title2'];
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#main-accordion" href="#<?=$row['id']?>">
(<?=$row['category']?>) <?=$title1?> - <?=$title2?>
</a>
</h4>
</div>
<div id="<?=$row['id']?>" class="panel-collapse collapse">
<!-- The body of the accordion, contents go here. -->
<div class="panel-body">
<?php
// another pgsql query here
$newresult = pg_fetch_all($newgetData);
?>
<!-- In the accordion body, a new group of accordions. This is doable if hardcoded -->
<div class="panel-group" id="sub-accordion-<?=$i?>">
<?php
// I think this is where the issues start??
foreach($newresult as $newrow):
$subtitle = $newrow['subtitle'];
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data toggle="collapse" data-parent="#sub-accordion" href="#<?=$newrow['subid']?>">
<?=$subtitle?>
</a>
</h4>
</div>
<div id="<?=$newrow['subid']?>" class="panel-collapse panel">
<div class="panel-body">
<!-- contents go here -->
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php
$i++;
endforeach; ?>
</div>
</div>
So, now my questions for the web dev people with HTML PHP and Bootstrap exp.:
Is it possible to nest foreach loops in this fashion without falling back to echo statements to print out the HTML (because ew)? Will it actually create (repeat) the HTML for the accordion objects this way or do I need to modify something here?
What might be triggering the HTML 500?
I realize this is a tough question to answer without live working code to mess with. If anyone knows a good resource to quickly sandbox a full stack for demo purposes I would be glad to know of it so I can put up some "working" code.
EDIT 1: User Sean pointed out that the sub-accordion is in a loop. Added in an iterator that modifies this id as the goal is to have multiple sub-accordions, not with the same id.
EDIT 2: Might have solved my own questions:
1. Turns out I used the wrong method when retrieving the ajax request: used PHP's $_POST['var'] instead of $_GET['var']
2. There was one syntax error on one of my shorthand PHP tags.
Now things are showing up! But, the formatting is still wrong. I can deal with that. Thank you all for all your help!
In your PHP.ini short tags might be turned off. In that case you either turned on or if you have no access to PHP.ini, then you should not use short echo tags `, try changing it to
I have a problem with the way Wordpress creates code.
My posts should be wrapped inside a div but Wordpress creates a few extra <a> wraps and I don't know how to get rid of them.
Does anyone has an idea?
My code below.
<article #php(post_class(mainpagepost))>
<div class="entry-center">
<header class="entry-header">
<div class="entry-header-subinfo">
#php(the_category()) | #php(the_date())
</div>
<h2 class="entry-title">{{ get_the_title() }}</h2>
</header>
<div class="entry-summary">
#php(the_excerpt())
</div>
<button type="button" class="btn btn-default"><a href="{{ get_permalink() }}">READ MORE</button>
</div>
#php(the_post_thumbnail(entry-image))
</article>
It adds these lines of code over them.
</a></div><a href="//localhost:3000/Git/VoiceBooking%20Blog/wordpress/index.php/2017/12/13/welcome-to-this-blog/">
This part in the code represents a link to the complete post:
<a href="{{ get_permalink() }}">
(plus the closing </a> tag for each of these.)
So if you remove those, you can get rid of those links. However, be aware that they lead to the full post - the code you posted above only will display part of the port (the excerpt), so you need some way to get users to see the full post. The way it's done in the code in your question is really quite common and is what people are used to.
ADDITION: Actually there is a closing </a> tag missing in your code, on this line:
<button type="button" class="btn btn-default"><a href="{{ get_permalink() }}">READ MORE</button>
That should be
<button type="button" class="btn btn-default">READ MORE</button>
That probably causes some trouble in the HTML output when Wordpress or the browser tries to correct that incomplete link...
I have researched some answers that talk about php, javascript, iframes etc. but I have tried a couple and none of them work. I am new to HTML coding.. and coding in general!
<link rel="menu" href="menu.html"> does nothing
<!--#include virtual="/menu.html" --> does nothing (presumably because its a comment?)
<iframe src="page.html"></iframe>
or object... both place the menu in a silly little scroll box.
I want to run my menu on my page as if it were a function in C. Where I can just include it, and it be there, or just link it.
Thanks for the help!
Ryan
webpage file: biology.html
menu file: menu.html
<div class="container">
<img src="homeicon.jpg" width="50" alt="Home">
<div class="redhover">
<div class="dropdown">
<button class="dropbtn">GCSEs</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">A-Levels</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">University</button>
<div class="dropdown-content">
Telecommunications
Electronic Engineering
</div>
</div>
<div class="dropdown">
<button class="dropbtn">More</button>
<div class="dropdown-content">
About me
Youtube
</div>
</div>
</div>
</div>
You can use php to include files on other pages. Here is some example code to get you started:
<?php
require_once('menu.php');
?>
You can put this in your HTML page appropriately, however you must make sure that php can be processed on your server and the file containing php code must end in the .php extension.
There are also other methods of including files via php, see here:
http://php.net/manual/en/function.include.php
and
http://php.net/manual/en/function.require.php
Edit - I'm not a big fan of this approach, but it will work on Github pages.
Create a file called nav.js with your menu defined as a js variable, then use javascript to insert it into an empty div created on each page. This way to update your nav you only have to ever edit nav.js Not pretty but it works
nav.js
var navigation = "<nav>";
navigation += "<ul>";
navigation += "<li>Home</li>";
navigation += "<li>About</li>";
navigation += "</ul>";
navigation += "</nav>";
document.getElementById("navigation").innerHTML = navigation;
Other pages
<div id="navigation"></div>
<!--rest of page goes here.-->
<script src="nav.js"></script>
Fiddle: https://jsfiddle.net/ze3hLxx8/1/
There are multiple ways to include a file into another depending on the backend technology you wish / want / need to use.
PHP
The most common way to do it in php is by using the include or require statement inside a php file.
In your specific case your biology.html file must be converted to a biology.php file and then you can add the relative code to include the file:
<?php include('menu.php');?>
This simple statement will add the content in your menu.php file to the current page. This will not work if php is not present on the server and obviously will not work locally without a local development environment
The differences between require and include can be found on the official documentation:
include: http://php.net/manual/en/function.include.php
require: http://php.net/manual/en/function.require.php
SSI
Another method is to use Server Side Includes. To use the SSI it must be supported and enabled on the webserver. To use SSI you need to change the extension from biology.html to biology.shtml and then add the following statement:
<!--#include file="menu.html" -->
More information on server side includes can be found on wikipedia: https://en.wikipedia.org/wiki/Server_Side_Includes