Hi I have a small website im doing for a customer and I have used a html/css-site and transferred it to wordpress by using blank theme. So far so good, have a look at energyshop.se if u want and in startpage the top two images are shown, but not udner the rest of the tabs - why? I add the images in the header.php so it should find them on all tabs...?
//header.php
<body <?php body_class(); ?>>
<div id="container">
<div id="header" onclick="location.href='http://www.energyshop.se/';" style="cursor: pointer;">
<h1><?php bloginfo('name'); ?></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<div id="main_menu">
<?php wp_nav_menu(); ?>
</div>
This is because you're using relative paths. When creating a WordPress theme and you want to load resources from your theme, you should use absolute paths. There are two template tags that make this easy for you: get_bloginfo() and bloginfo(). The first one returns the value, and the second one echoes the value(that you request via the first argument passed to the function).
So in order to display an image, you should have:
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon_en_global.png" alt="English.png">
This will always result in this(for your site):
<img src="http://energyshop.se/wp-content/themes/blank/images/icon_en_global.png" alt="English.png">
So simply replace all wp-content/themes/blank with <?php bloginfo('stylesheet_directory'); ?>.
Related
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
So I am currently using the following script (effect 3):
http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
I am trying to make these boxes show on my blog content listings, which currently uses the content feature. I have included the call for the CSS and JS of the demo file for this effect;
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
I have added this to the index.php file rather than the header, as I only need it on this page. Currently, I have this so only the featured image/embed shows for the blog listing. I removed any wordpress title and excerpt tags as I wanted to focus on getting this to work before adding in the content. So, currently, it's just a copy of the code used in the demo combined with the code for the blog listing itself. Shown here is the image post.
<ul class="grid cs-style-3">
<li>
<figure>
<?php
}
if ($format === 'image') { ?>
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >
<?php the_post_thumbnail(); ?>
</a>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
This is where I am getting a little bit lost and maybe this is down to too many scripts on the same page, as the blog listing itself uses webkit coding to display. But I have copied all the code exactly as it was in the demo, minus the image section which is my blog code instead. But no matter what I try it just shows without the effect and under the image. I am completely lost as to what to do here and out of ideas.
I have tried searching, but nothing has helped. So I am thinking this is more down to the coding I already have for the theme not playing nicely with this code. I have managed to add additional sections in the same way, but not get extra code to work with the themes functions itself.
You can see the page I am referring to and where it has gone wrong here, under any of the images:
http://outside.hobhob.uk/test/blog/
Happy to provide anything else extra.
Full code: http://hostcode.sourceforge.net/view/6152
The code you posted has some problems, try replacing it with this. I just removed the brachet I was talking about in the comment, and added the endif;s at the end of the block. I still have no idea if the $format variable is correctly populated elsewhere in your code, so there may be other issues.
<figure>
<?php if ($format === 'image') : ?>
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >
<?php the_post_thumbnail(); ?>
</a>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
<?php endif; ?>
<?php endif; ?>
</figure>
I am running a Wordpress site and created a custom theme.
Now I'm stuck with optimizing it for Google PageSpeed. It shows the following for the Mobile page:
Consider Fixing: Only about 63% of the final above-the-fold content could be rendered with the full HTML response
This appears since I've included the Featured Image above my posts on the index.php with the code:
<p>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</p>
How can I fix the issue? It doesn't seems to me that I'm loading something like a sidebar before the featured image, apart from the logo of the site. For a deeper comprehension, here the complete code of my index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<p>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</p>
<h1>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
<p>
<?php the_content(__(' <br /> <br /> Weiterlesen →')); ?>
</p>
<hr>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>
<?php if (show_posts_nav()) : ?>
<div class="pagination">
<?php echo paginate_links(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
Can someone help me with this issue? What am I doing wrong?
As someone who holds a 100/100 pagespeed score, I can tell you that over-optimizing for speed is probably not worth the frustrations you're going to run into fixing the problems. Case in point, run a Pagespeed test on Wikipedia or YouTube. These are top sites and YouTube only has a score of 50, for example. The real reason you'd want to improve these numbers is to provide a better experience to users because they don't have to wait for the page to load.
Your above the fold content is simply what is allowed to be displayed while waiting on additional resources to load:
Your page has 4 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
/…-includes/js/jquery/jquery.js?ver=1.11.3
/…s/jquery/jquery-migrate.min.js?ver=1.2.1
/…ghtbox/jquery.touchwipe.min.js?ver=1.4.6
/…ightbox/jquery.lightbox.min.js?ver=1.4.6
Optimize CSS Delivery of the following:
/wp-content/themes/1000PB/style.css
/…ghtbox/styles/lightbox.min.css?ver=1.4.6
Your efforts are best spent optimizing the delivery of these, (using async or defer for scripts and stylesheets) since those will lower your overall pagespeed score and hurt your search engine rankings.
To answer your question, though, you can inspect elements that are towards the top of your page, generally anything that can be seen without scrolling down, to see their css. Example:
img.attachment-post-thumbnail {
border: 1px solid #e6e6e6;
padding: 3px;
}
So that stuff is best included in an inline <style> element in the header, as then the browser won't have to wait for style.css to load before it can show the page to users.
If you need help with hacking your Wordpress theme to do certain things to make it faster, such as minifying scripts, making scripts asynchronous, using defer, disabling emoji, and so on, just ask in comments or submit another question and we will be glad to help.
I recommend testing on other sites to get a better idea of what's going on. I recommend Webpagetest.org and using a Waterfall chart will tell you which resources are taking the longest:
You can also use tools to help with this:
CSS Tricks: Authoring Critical Above-the-Fold CSS
Critical-path (Above-the-fold) CSS Tools
I haven't been able to find this specific question on here yet so I thought I might post about it on here and see if I could get some supportive feedback/help.
I need this blog to be responsive and only show so many posts and a specific screen size. I assume I need to do this within the php code. I would like to have the blog I have looping on the front page to display 3 blogs from 800PX and up (screen width), 2 blogs display 450px-800px, and 1 blog display at 300px. Roughly.
I find this easy to do with just plain html and css but I am new to this loop coding/php coding with wordpress and find this sort of confusing. I assume I need to ad some sort of "if this is this, then do this" in the php code?
In my plain demo html page I did it fine, but this is a whole new ball game.
Here is my demo site. Scroll down toward the bottom and resize your screen to see what I mean.
Here is the actual Div site. Right now I have it responsive as it will resize, but it gets too sloppy as it gets smaller and would visually loop better to display only 2 as the screen gets smaller, and then 1 for mobile.
Here is the PHP and the loop code. Can one of you awesome individuals that truly know what your doing point me in the right direction? Then, can you give me advice on a book or something I can read to get better at this stuff so I don't come here bothering you all the time.
<!-- BEGIN BLOG CALL-OUT SECTION -->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<div class="post-wrapping-div">
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
<span class="home_text_title"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
<?php the_excerpt(); ?>
Read More</li>
</div>
</div>
<img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">
<?php endwhile; ?> </div>
<? endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION-->
Open your blog post page in Google Chrome or Firefox. Right click on one of the blog posts and click "Inspect Element" (might be slightly different in Firefox but same idea). This will show you the CSS rules that are being applied to that particular element.
Ensure you have the entire post selected in the inspector. You can do this by finding the element with the class "post" in the HTML displayed in the inspecor window. On the right hand side (using Chrome, and if the inspector window is on the bottom, not the side), you should see all the CSS rules applied to that element. One of them will be the class "post". These are the CSS rules that you want to start modifying first.
Let's say you want 3 posts to be displayed side-by-side, per line, when viewed on a desktop screen of 1024px. You might set the following rules under .post {:
.post {
display: inline-block;
width: 300px;
}
Note that you can make these changes directly in Chrome or Firefox's inspector window. They will not actually modify your site and everything will be reset when you refresh the page, but this will help you test different CSS rules before making the "permanent" changes in your CSS file(s).
Now, since 3 x 300px is less than 1024px, you should see three posts displayed side by side on a desktop size screen, then three on the next line, etc. If you resize your browser window to make it smaller, you should notice that at around 900px wide, the third post will drop down to the second line. If you resize it further to around 600px wide, you'll see the second post drop down to the second line.
Once you have that basic concept down, then you can start doing more sophisticated stuff, but that's the basic idea. The example I gave doesn't even require using media queries, just basic CSS. You can also use things like "max-width" and pixels/percentages to accomplish a lot of "responsiveness" without the need for media queries.
Also important to note is that, by doing what I mentioned in step 2, you should be able to easily determine which CSS file you need to modify, as the name of the file should be on the right next to the CSS selector. So look for something like "style.css" -- whatever ".css" file is listed next to that element is what you need to be modifying.
Here was the final working code (minus the obvious CSS I need to add to make it work).
<!-- BEGIN BLOG CALL-OUT SECTION -->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php $rp_query = new WP_Query( 'showposts=3' ); ?>
<?php $post_counter = 0; //Set an initial counter to 0 before the loop ?>
<?php if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<?php $post_counter++; ?>
<div class="post-wrapping-div <?php echo 'post-'.$post_counter; ?>">
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
<span class="home_text_title"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
<?php the_excerpt(); ?>
Read More</li>
</div>
</div>
<img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">
<?php endwhile; ?> </div>
<? endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION-->
I am pretty new in WordPress and I have the following doubt about how to insert in my homepage an immage that is in a subfolder into my theme directory.
So I have the following situation: Into my custom theme directory I have the following folder that contains a jpg immage: /assets/img/flexslider/flex-1.jpg
Now in my header.php file I have something like this:
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
Obviously, when I load the page, the immage flex-1.jpg is not loaded because there is not the right path (infact using FireBug I obtain that it try to load the assets/img/flexslider/flex-1.jpg immage) so I think that I could use the absolute path but this is pretty orrible !!!
So I am thinking to use the get_template_directory_uri() function provided from WP to do this and I have try to change the previous code in this way:
<li>
<img src=<?php get_template_directory_uri().'/assets/img/flexslider/flex-1.jpg' ?>>
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
But don't work and using FireBug I can see that load nothing, infact in my brower source code I have:
<img src="">
Why don't work? What am I missing?
Tnx
Andrea
I hope it will work:
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/flexslider/flex-1.jpg" />
If your assets folder inside theme.
please try :
<img src="<?php print(get_template_directory_uri()); ?>/assets/img/flexslider/flex-1.jpg" />
just check for slash, if double before "assests", remove static one.
You can also use:
<img src="<?php bloginfo('template_url'); ?>/images/yourimage.jpg">