Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am new to Wordpress. I am used to make websites from scratch.
I am currently working on a wordpress template (Astra).
I need to make a custom page using HTML,CSS,JS,Php from scratch and add it to my wordpress pages.. How can I do it?
I've google it and saw many approaches but didn't get anyone of it.. Some suggested to make a Parent/Child related pages but I don't know ..
Can I just put a .php file in the directory and make a link between it and wordpress pages?
How can I link css/js pages with them also ?
Simply Create a .php file with all the html css JS and php code. on Top add comment inside your file
<?php
/* Template Name: Custom Page HTML */
and then create a new page and Select new created Template and publish that page.
you can create this file inside your theme folder.
I would suggest creating a normal page in wordpress then in the back end editor you can edit the html raw. I usually use my JavaScript inside my html. As for the css you can edit that by going to the page you created when logged in, then clicking customize. There should be a additional css option where you can edit the styling.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 months ago.
Improve this question
A web application is already built with CSS,HTML,raw javascript, jquery, ajax, and .net core MVC. The problem with that is there is a _Layout page where there is a renderBody() in which every page gets rendered. For this, whenever I click to visit another page/nav option, the whole website reloads the page comes. As with React, there is react-router by using which the reloading can be prevented. But to implement the same feature with raw JavaScript/ Jquery?Is there any? TIA
You can read this article https://medium.com/#fro_g/routing-in-javascript-d552ff4d2921
Or this article https://www.section.io/engineering-education/how-to-build-a-simple-router-in-javascript/
Or You can do the same job of react router be doing this steps
Create page and put layout in it and in the center of this layout add div with id main
and then create all other page in different file and create function that on document ready read the page url and then load in the element main the file for this link
And for navigation create function that replace the existing element with other element from file respective for the nav item clicked
It is long process but in the end you will get the same effect as react router
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to create a web site using bootsrap and mvc4 but unfortunatly not only bootstrap files but any js file or css file i include in the layout file doesnt act properly. I dont know whats going on can some on suggest me what to do?
i have created a bundle
bundles.Add(new ScriptBundle("~/bundles/new").Include("~/Content/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css1").Include("~/Content/bootstrap.css"));
and i have added them to the lay out
#Scripts.Render("~/bundles/new")
#Styles.Render("~/Content/css1")
I,m trying to add navigation bar and and a carousel there are not working properly
There is not much to go on, so here are a few tips for working with bundles:
Bundles names:
Make sure the bundle name does not match an actual folder or file in the project as IIS will return the actual folder/file in preference to the bundle.
To avoid this I use bundles names like these (as I have no styles or bundles folders/files):
#Styles.Render("~/styles/MainLayout")
#Scripts.Render("~/bundles/MainLayout")
File placement:
Usually your script files would be under a scripts folder in the project and not content. Content is typically for images and styles.
e.g make sure your files are in these locations in your project:
/Scripts/bootstrap.js
/Content/bootstrap.css
The matching bundles (keeping a little of your naming) would look like:
bundles.Add(new ScriptBundle("~/bundles/new").Include("~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/styles/css1").Include("~/Content/bootstrap.css"));
and rendered with:
#Scripts.Render("~/bundles/new")
#Styles.Render("~/styles/css1")
Other scripts?
Scripts are often dependent on other scripts, so make sure you include those before the ones that use them.
e.g. jQuery needs to go in earlier than most scripts if used:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/new")
#Styles.Render("~/styles/css1")
Note: Now if none of this helps you need to help us help you, by providing your entire layout file, your entire BundleConfig.cs and even a screenshot of your project explorer window in visual studio. :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
What I mean is that when creating multiple pages currently I always have to copy paste the header, navigation and footer boilerplate. And while it isn't all too hard to do(can basically copy-paste an emmet line and have it handle everything). I was wondering if there is a way where I wouldn't have to do that be it server side or as a plugin/addon for sublime text.
The current idea I have is to perhaps create a server side js which I could then possibly import on every page, though I know almost no js to pull that off.
Any suggestions?
In Html5 you can use the object tag to include a file.
Basically you create a single file containing your header and the common code that goes on each page.
Then on every page of your site you add
<object name="includedfile" type="text/html" data="page.inc"/>
where you need the content to appear.
Edit:
Check also jquery if you prefer to use javascript. There are easy functions to achieve the same result like:
$.get('test.html')
.success(function(data) {
$('div.content').html(data);
});
Where test.html is the page that you want to load and div.content is the place where you want to put the loaded code.
The only answer which works pre HTML5 is to learn PHP and/or install a system which allows you to use page templates. Most web servers have PHP installed.
Your page would then look something like this:
<?php
include "header.php";
?>
<!-- your html page code here -->
<?php
include "footer.php";
?>
At this point I would recommend you move into a more robust web language. Here are some options.
Ruby on Rails (yay!)
PHP
ASP.NET (yech)
You will definitely want more of the powerful features once you begin working on more complex websites.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have built a simple page on my localhost and then I have uploaded it on the net. When the page is viewed from local machine, all jQuery interactions works well without any problem. But when I view the hosted page, nothing happens. It seems a plugin + jQuery are not loaded properly, though I see them loaded (using firefox view source code, I check the scripts address and see their source without 404 error).
I appreciate any help. Here is the address:
http://tarjom.ir/demo/niazer/
The jQuery interaction is that when the user clicks on the search bar, a box slides down which contains many search-categories.
And also the thumbnails at the bottom of the red line moves when mouse hovers it. Now, you probably wouldn't see any of these stories.
The page is written using codeigniter.
EDIT EDIT
the scripts and CSS are loaded automatically using a library written for codeigniter. But the generated HTML markup for browser is as follows:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/mtSlideElement.js"></script>
prettyCheckable is a jQuery plugin, you need to include it after you call jquery, change the order you are including the scripts so it looks like this:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
2-prettyCheckable.js has a semicolon as its first character and there is no method called prettyCheckable in it. Did a few lines get cut out of this script by accident?
Your pages has two 'html', 'head' tags, you might want to remove them. And put all those javascript into a single.js file and call include it just before tag.
There is are definition for prettyCheckable();
You have loaded two jQuery, at first jQuery v1.10.2 and then prettyCheckable.js and then again jQuery v1.10.1, this is the problem because, once prettyCheckable extended the core jQuery and then you loaded again another jQuery and it's completely new. This the order
http://tarjom.ir/demo/niazer/js/blue/1-jquery.js // loaded
http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js // jQuery.fn extended
http://code.jquery.com/jquery-1.10.1.min.js // old jQuery replaced
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Are their any disadvantages \ advantages of loading CSS files with Javascript?
This is the reason I ask,
I have a div that mimicks a physical A4 Portait Page. And the CSS loads perfect, no problems. But suppose I wanted to make a company letter head class, so it would basically look exactly the same as an A4 Page, but with an added company logo at the top of the page, I know I can't do this with css, its purely styling, but if i were to load the css links with javascript then customize the page depending on its class name i know i can achieve this....
so my question:load and customizes all the necessary stuff
2. in that defaultstyles.js file, i want to automatically add the image tag with the company logo in at the top of the necessary page.
Are there any disadvantages\advantages of loading css with javascript?
Thanks in Advance
EDIT:
Just to add more detail to my dillema, this is what I have
CURRENT:
a page with a div who's className is 'A4Portrait'
a defaults.css linked to that page that customizes the 'A4Portrait' class.
an image tag with the company logo at the top to mimic a letterhead
PROPOSED
load all styles with a javascript file (let's say defaultstyles.js) that runs on page load and customizes all the necessary stuff
in that defaultstyles.js file, i want to automatically add the image tag with the company logo in the respective div.
NOTE
I'm not asking how to do it, I know already, just the advantages and disadvantages of doing it the PROPOSED way
I recommend putting the css for letterhead in the same file that has all the rest of the styling.
The disadvantage of loading the css with js is that you'll create unnecessary http connections. And it will be much slower because you'd have to wait for page to load to run js.
Edit: I guess it would be fair to mention the advantage:
On the other hand, it depends. If your css for the letterhead is huge (I doubt it) and the letterhead style is only used rarely (only when printing etc.), then using js to load the extra css might be useful. But you'd only gain a bit of bandwidth and the css will probably be in cache anyway since it's intranet site so it's probably not worth the effort.
Another edit since I read the updated question:
All of the above applies if you add the image tag with js except that won't cause more http connections.