I have a custom WordPress theme installed and my images are referenced as such:
index.php:
<img src="images/newlogo.png" height="110px" width="400px"/>
My images folder is relative to my index.php from which I have included the above code.
My images are not showing when I render the webpage in a browser, it is showing the default image not found thumb instead.
Image filepath:
wp-content/themes/my-theme/images/newlogo.png
Homepage (index.php) filepath:
wp-content/themes/my-theme/index.php
Your index.php is a template that will be loaded by WordPress's main entry point (at /index.php) and the code behind it; as such its URL won't be ...wp-content/themes/my-theme/index.php. You should use the WordPress method get_stylesheet_directory_uri() to find your theme's directory from any of your theme template files.
For example:
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/newlogo.png" height="110px" width="400px"/>
Basically, any relative paths to images from a web page are considered as relative to that web page's URL. However, with WordPress templates, you can't know for sure what the actual URL will be -- your index.php template might (probably will) be used for many different pages on your site, at many different URLs. It could be used at the top level for a page at /about, and also for an entry at /blog/2014/01/05/typical-blog-post, for example.
WordPress handles both building the URLs and loading your template file into them appropriately. But this means that you can't depend on the URL of the template you're writing being a constant. Instead, WordPress provides a series of functions, like get_stylesheet_directory_uri(), to let you grab and output the correct URI to your stylesheet files as necessary.
Related
I am trying to import a page I made in bootstrap into Wordpress and I can't seem to figure it out.
I would like someone to give me some hands-on support if they have the time. I get different results with different attempts.
I changed my index.html to home.php and suddenly the entire site goes down. Restored it again and did something else and then the site showed up without its CSS. i understood i had to create a functions.php file where i call the stylesheets but im not getting any further.
What do i need to do to succesfully import a bootstrap page as theme in wordpress?
You need to create a WP theme, or just a WP page template (in case of just one page.)
https://developer.wordpress.org/themes/template-files-section/page-template-files/
In your current theme, if you have page.php , duplicate it by saying e.g. page-custom.php
In the template header section name the template:
<?php /* Template Name: Example Template */ ?>
Below it add your bootstrap page's code, you may need to fix paths to css/js files but I am sure you will figure that out by googling.
Once you have that page as WP template. Now create a page in WordPress to which you want to apply that bootstrap template.. and in the page edit sidebar, there is section you can select that custom template you created.
see this photo:
https://developer.wordpress.org/files/2014/10/basics-page-templates-03.png
Now if you will visit the page on the front-end , that page will have bootstrap design applied from your custom template.
Is it possible to include an images folder that is then accessible via the admin section. I am creating a theme and want some background images available for the user, since I can not include them in the uploads folder is there another way?
Include your backgrounds into the images folder of your theme.
Create an options page that lets the user select a background and return the URL of the image.
<?php echo get_template_directory_uri().'/images/backgrounds/BACKGROUNDFILENAME.jpg'; ?>
You could try to in your functions.php create or register new "Attatchment" based posts using the URLS of your theme images or try using this...
https://wordpress.org/plugins/media-library-plus/
I'm facing a very common problem with Wordpress, I don't see the list of my templates in the post edit page. There are tons of posts about this here but I haven't found the solution to my problem in any of them.
I basically have this in my theme directory: index.php, page.php, header.php, functions.php, sidebar.php, style.css
in page.php and index.php, I have:
/*
Template Name: HOME
*/
and
/*
Template Name: PAGE
*/
What I've already tried:
- switched back to the original Wordpress theme and back to mine
- made sure permission 755 was attributed to folder
- copied a working file from another theme and inserted my code into it
- completely logged out and came back
but nothing worked, I still don't see the list of templates for my theme while for official themes, I do see the list of page templates.
Any suggestions?
Thanks
Laurent
You cannot use index.php or page.php as a Page Template, because those files are reserved for other templates of a theme.
As the Page Template reference states:
Name your template file so you can easily identify its Template Name, e.g., filename my-custom-page.php for template name "My Custom Page". Some coders group their templates with a filename prefix, such as page_my-custom-page.php (Don't use page- prefix as WordPress will interpret the file as a specialized page template.)
For information on Theme file-naming conventions and filenames you cannot use, see reserved Theme filenames.
I have just followed a tutorial about creating custom WordPress theme, each and everything went just fine from static to dynamic conversion but when I activate that theme and I come up with a plain HTML document with blue hyperlinks which mean the site is not picking up the css file of style.css
Am I doing something wrong? Please help me.
Check your source HTML and see that the path to your CSS is correct.
You can use bloginfo() to find the correct path by using:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css">
If your style.css resides in the root folder of your template.
Where did you add the link to the file? - View the source of the page to see if the link is there and try navigating to it to see if it returns a 404 (Not Found) or other error.
My preferred way to include theme stylesheets is adding something like this to my functions.php.
add_action('wp_enqueue_scripts','enqueue_my_styles_scripts');
function enqueue_my_styles_scripts() {
wp_enqueue_style('my-styles',get_stylesheet_directory_uri().'/style.css');
}
Check out wp_enqueue_style and make sure you have a wp_head() call in your header file
I have a WordPress plugin with settings page. On this settings page, the form to be submitted is loaded in an iframe. I wish to utilize the WordPress TinyMCE for a textarea in this form.
How do I achieve this? I can't really do it the way it is stated here (http://keighl.com/post/tinymce-in-wordpress-plugins/) since the form is present in an HTML file.
WORDPRESS 3.5 UPDATE BELOW
If you're using Wordpress version<3.0, you can use the post you referenced to, it's great.
If your wordpress version is above 3.0 (aka newer versions) you can't use the wp_tiny_mce function for the tiny_mce, because it's deprecated. You need the newer function, wp_editor, which you can read all about it in here:
http://codex.wordpress.org/Function_Reference/wp_editor
For you to use of the wp_editor function and other WP elements your iframe (the for now containing only html and not linked into wp), you need to make your the iframe html file a php file, and add a require function of wp-load.php file.
For example, if your iframe file is in your server's root folder with your wordpress install, all you need to do is to place the following in the top of your file:
<?php
require('./wp-load.php');
?>
//iframe html/php code here
After you do that you can use any wordpress function in your iframe, including the tiny_mce.
---- UPDATE ----
If you are using wordpress 3.5 or higher, the implement method has slightly changed. more information is right in this short tutorial