Images not loading in my wordpress theme - wordpress

I made an html / css mockup of a website and wanted to integrate that static website into wordpress. However, the images are not appearing, and I get the path of the image as the url localhost/wordpress/logo.png.
I'm developing it on localhost so the theme in localhost/wordpress/wp-content/themes/mytheme
and the images on localhost/wordpress/wp-content/themes/mytheme/images/.
I've heard that there's some php code that must be used in each image. Can anybody please help me out?

For what you need you have to use something like this:
<?php echo get_template_directory_uri() . '/images/logo.png; ?>
;)

Related

WordPress Visual Composer accordion won't load with css

When I use the Visual Composer WordPress plugin everything works great. Except for the accordion, Pageable container and some other elements. When I add these elements they do show on my page, however is seems that the CSS is missing.
I've tried to disable all other plugins, nothing changed.
Theme code for showing the content:
$post = get_post();
$content = apply_filters( 'the_content', $post->post_content );
echo $content;
Screenshot WordPress backend:
WP Backend
Screenshot frontend & console: frontend
Please note: other elements do work perfect, animations work, grid building work and more.
Also note: there are no errors showing up in the console.
Any help will be greatly appreciated!
Same problem with the latest version (5.4.7) and a custom theme.
I've noticed the body has lost the class wpb-js-composer, required to make visual composer works correctly.
If I add this class manually everything works fine.
I'm investigating on why this class has not been applied on the body by WP Backery (Visual composer)
EDIT
After a brief search I've found I forgot to add the body_class function to my template.
Before:
<body>
After:
<body <?php body_class(); ?>>
Now Visual composer accordions, tabs, and other elements works as expected.
this is plugin, if we want to change css then go to this step plugin->editor->select visual composer->go to the css file....then whatever u want to change in your css file...
i hope it will help you...

Some wordpress php, link, language questions

I have recently start using Wordpress for the very first time and i have to say it is going well. i previously made my own theme with the bootstrap 3 framework and started to implement it into wordpress.
I came across allot of things i didn't really find a good answer for.
first of all i want my website to be multi language (Dutch & French) for that I've installed qTranslate that works very well. But on the other hand that also gave me the problem that i had to include my header and my footer into my html editor in Wordpress because the text there has to be multi language, where normally just the content is placed. Anyone els is experiencing that problem or maybe knows a walk around for this?
My website contains allot of PHP because there is a payment system that is implemented into it, so i constantly need a connection to my database (MYSQL) and also am working with sessions. I'm not so far yet, tomorrow i will but can i just implement my PHP code into the well known tags <?php ?> and place them into the html editor in Wordpress?
So like you already know i had to put my header into the html editor in Wordpress but now i am facing a problem linking to my home page. If, in my navigation menu, i want to link to home i cannot use for example : <?php echo home_url(); ?> and i f i just use <a href"home"></a> it also doesn't work...
Appreciate for the help!
I figured out how I can include different header & footer (header-fr.php, footer-fr.php). I used this code:
<?php
if(function_exists('qtrans_getLanguage')) {
$lang = qtrans_getLanguage();
switch ($lang) {
case 'fr':
get_header('fr');
break;
default:
get_header();
break;
}
} else {
get_header();
} ?>

wordpress. html/css to theme..link to images?

Im trying to create my own WP-theme from my html/css-site.
I managed to migrate the html/css but the images won´t show up.
I realise that i have to change the img src-path but do i also have to add som php?
What does the path look like?
Thanks!
Are the images intended to be part of the theme? If so, then I'd recommend making a directory called images or something similar (I've seen some people use assets) in the theme's root directory (ie, wp-content/themes/[theme]/images).
Then you should be able to access them using get_template_directory_uri(), like so:
<img src='<?php get_template_directory_uri(); ?>/images/your-image.ext'>
If you're creating a Child Theme, and want to allow overrides of the parent themes images, replace get_template_directory_uri() with get_stylesheet_directory_uri().
References
get_template_directory_uri()
get_stylesheet_directory_uri()
Child Themes

Magento - Fishpig Wordpress - Featured image sizes

I have an installation of Magento that integrates with Wordpress using the Fishpig Wordpress module.
As most WP users will know, when uploading an image Wordpress will create resized versions referencing the dimensions set in Media Settings (e.g. Thumbnail Size, Medium Size and Large Size). It also creates images for each custom thumbnail size you specify (e.g. via functions.php).
It appears as though the Fishpig Magento module only uses the Thumbnail image size.
Unfortunately I need to be able to display different sizes of the same image (i.e. the resized versions that Wordpress creates) on different pages. For example, the category page will display a small version, the post view page will display a larger version.
I was wondering if anyone has had any experience retrieving the other resized images via this module as I can't find much documentation on it (or if it's even possible with this module as I also couldn't see any code that would suggest this functionality).
Greatly appreciate the help.
I had the same issue...I wanted to create a recent posts widget and Fishpig has that well documented, but they didn't show an example of how to pull the featured image for the post.
But I found the answer in: /app/design/frontend/base/default/template/wordpress/post/list/renderer/default.phtml:
<?php if ($featuredImage = $post->getFeaturedImage()): ?>
<div class="featured-image left">
<img src="<?php echo $featuredImage->getAvailableImage() ?>" alt="<?php echo $this->escapeHtml($post->getPostTitle()) ?>"/>
</div>
<?php endif; ?>
You can change "getAvailableImage" to anyone of these to pull the different images sizes that wordpress produces:
getThumbnailImage()
getMediumImage()
getLargeImage()
getFullSizeImage()
getPostThumbnailImage()
getAvailableImage()
getImageByType($type = 'thumbnail')
Hope this helps!
Have try to do using below code. and working fine for me..
echo $featuredImage->getData('guid');

how to assign image dynamically in wordpress post

I am developing one wordpress site. I have made one post in it. Now I want to assign image in that post. For this, I have uploaded one image in media and attach that image to my post.
but how can I assign that uploaded image in my post? do I need to give path manually? or I can give dynamic path so that even if I upload this site on server or change main folder name, path gets changed automatically..
any help will be appreciated..
thank you
You should consider using Post Thumbnails (also known as Featured Images) in your posts. To do this, all you need to do is add the following to your functions.php file:
add_theme_support('post-thumbnails');
This will add a control in your Post Editor to add an image by either Uploading it or setting the URL, effectively "attaching" your image to your post in the way your looking for. To display the image in your template:
<?php
if(have_posts()) : while(have_posts()) : the_post();
if(has_post_thumbnail())
echo '<div class="post_thumb">'.get_the_post_thumbnail().'</div>';
?>
<div class="post_content"><?php the_content(); ?></div>
<?php
endwhile;endif;
?>
As for changing folder names, paths, etc. you need to be careful with that approach. Remember that you're giving a path to an asset. The server doesn't know what YOU want, only what your code is requesting. If you expect to be changing paths to your assets around quite a bit, then you can always forgo Post Thumbnails in favor of clever naming conventions. Something like this:
<?php
if(have_posts()) : while(have_posts()) : the_post();
$imgPath = get_bloginfo('stylesheet_directory').'/images/featured_'.$post->post_name.'.jpg';
?>
<div class="post_thumb"><img src="<?php echo $imgPath; ?>" /></div>
<div class="post_content"><?php the_content(); ?></div>
<?php
endwhile;endif;
?>
This looks for an image in your Theme Directory's images folder that is named featured_{post_slug}.jpg
The benefits to this approach is that Wordpress will always know where your theme folder is, regardless of URL changes. As long as you have an images folder in your theme directory, Wordpress will know where to look.
The drawback is that this code specifically doesn't first check for the EXISTENCE of the image before displaying it, which could lead to broken images if they aren't named properly or don't exist at all. This approach also requires the use of one file extension
A last option for you is to consider using Custom Fields to define paths to images. The benefit is that this does not require you to actually upload images to your server. However, this approach is still the least dynamic out of all of your options, and will likely break if paths to assets are changed.
Use whichever tool you feel is best for the job. Hope this helps!

Resources