I'm absolutely new to WordPress theming but I decided to learn on the job and I really want the site to go live within the next week or so. I've stuck to a simple index.php (no templates or template-parts). I'm able to receive the contents in the proper format which they were published (with inline images, line breaks, etc.) but the css styling is absent. What could I be doing wrong?
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="entry-content">
<?php
$content = wpautop(get_the_content());
echo $content;
?>
</div>
</article>
I realize there is a difference between the singular view and the list view (the loop). The list view doesn't actually style the content by default. Could that be where my problem lies, and if so, what's the best way to get around this problem?
EDIT
Essentially, I want the singular view (singular.php) within the index.php. When you visit the site you're greeted by an entire article, not previews and listings. So I don't actually need the loop for now. I simply retrieve the post and display the contents on the index page.
That is literally the only thing keeping my site from going online right now. I just need that article to be styled as it's supposed to be. There are only two files in my theme: index.php and style.css. I've already tried the_content(), I've also tried apply_filters('the_content', get_the_content()), to no avail. wpautop(get_the_content()) was the closest thing to styled I could get. I am retrieving the post using the_post() for now, could that be the issue, and if so, which is the best way to retrieve a post?
I have tried retrieving the post in various ways and it's still unstyled, so I decided to inspect the elements in the browser and found that WordPress is indeed attaching a class to the elements but just where on earth is that class? I read somewhere about a css reset being the possible cause -- how does one bypass any css reset issues?
It turns out it was just a header issue. Solved by adding:
<head>
<?php do_action('wp_head'); ?>
</head>
Related
Here are the facts:
Wordpress Theme Parent: Pytheas (I'm using a child theme)
Site: http://longgame.org
I am a beginner. I'm still learning the basics of CSS.
My Problem:
On the front page, there is a group of five "Highlights" where I will inserting text. Note the following image (which depicts the leftmost two):
That yellow-highlighting denotes an area that I can't seem to remove. I've done the following:
Checked HTML element to confirm there's no accidental carriage return.
Deleted the thing, whereby the next item - the "About" blurb, 'slid over' and exhibited the same behavior.
Searched through my child theme in order to determine if I goofed up (undoubtedly the problem, but I can't find it).
I don't know when this started happening, but it's within the past few days that I've been trying my luck at all this Wordpressy stuff.
As I mentioned, I'm a beginner. Please let me know if I can provide further data to improve the odds of correcting this.
Thank you, in advance, for any recommendations you can offer.
EDIT: I was unsure what code, in particular was the culprit, especially since I wouldn't even know how to edit anything php-ish. I've simply never tried. :)
Anyway, perhaps this bit from the parent theme? It's from home-highlights.php - so let me know if I'm way off.
<div class="grid-container clearfix">
<?php
$count=0; //set counter var
foreach($hp_highlight_posts as $post) : setup_postdata($post); //start loop
$count++; //increase counter var with each post in loop
//meta
$hp_highlights_url = get_post_meta($post->ID, 'wpex_hp_highlights_url', TRUE);
$hp_highlights_icon = get_post_meta($post->ID, 'wpex_hp_highlights_icon', TRUE);
?>
<div class="hp-highlight grid-5 <?php echo $post->ID; ?>">
<h3>
<?php
//display icon if option not set to default
if($hp_highlights_icon !='Select') { ?>
<span class="wpex-icon-<?php echo $hp_highlights_icon; ?>"></span>
<?php } //highlight meta option set to "Select" ?>
<?php
//show the highlight title as a link
if(!empty($hp_highlights_url)) { ?><?php the_title(); ?>
<?php }
//show plain title because link option is blank
else { the_title(); } ?>
</h3>
<?php
//show the post content
the_content(); ?>
Thank you for the etiquette feedback. I will do better next time. :)
FURTHER RESEARCH:
Is this related? : Why is appearing in my HTML?
You have some extra white spaces in between h3 tag and p tag ..try to remove those white spaces before this text <p>This the digital notebook of Matt Warren. Thanks for stopping by.</p>
Try to use Firebug
Your current HTML containing white spaces -
<div class="hp-highlight grid-5 13699">
<h3><span class="wpex-icon-home"></span>
Welcome
</h3>
<p>This the digital notebook of Matt Warren. Thanks for stopping by.</p>
</div>
In the above code you have that is the Unicode Character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF).
I believe you copied the content from a different file/location which silently include those white spaces.
It seems the problem is in the content part. Try replacing "the_content()" with "trim(the_content())" in the very last line of your php.
If that fails the problem is in your php file rather than in your content. Try completely retyping the last three or so lines of the php snippet you quoted to eliminate accidental weird characters.
I tried trim() -iming like crazy. No dice. Forunately, someone in the G+ Wordpress community provided a user-friendly comment that pointed the way to an answer:
Hi +Matt Warren , this looks to me like the extra space is somewhere in your widget code.
I'm assuming you have created the various blocks in the header using custom text widgets? Look for spaces or line breaks there -> I'm sure you will find an unsuspecting space in front of the opening tag.
The index.htm files you are referring to are to keep would-be nosey-noseys from snooping around your files on your web server; they are meant to be that way.
While it was not a widget, it was my homepage: my empty homepage. Because it's not actually used. It's just a 'stand in' for the rest of the stuff that's actually at the homepage.
I deleted the homepage. Then I recreated it, went to the Reading Settings and re- set it as my homepage. Problem solved.
I am currently building a new theme for my site and am kind of stuck not knowing the proper way to link pages together. What is the proper way to direct visitor to another page if I were to write the link straight into footer.php?
Let's consider the following inside footer.php:
?>
A Link
<?php
That would work well up until I were to change my permalink structure to something else.
What is the proper way to do it(without using WP built in menus or anything similar)?
You can use get_permalink assuming your pages are in Wordpress.
See this link: http://codex.wordpress.org/Function_Reference/get_permalink
The above answer is 100% correct, but to save people some time when they stumble upon this question, I took the liberty of writing it out.
<?php echo get_the_title(12); ?>
This covers everything from hover text to dynamic page title, so if you decide to change "Contact" to "Contact Us," you won't have to remember to update the footer.php file.
I am trying to create a Wordpress site. The design is Here
I have created most of the outline of the site, barring the 3 regions "Follow Us", "Self Employment" & "Into Work Consortium".
The client has told me he would like to make those 3 regions editable.
My template contains an Index file, Header & Footer File as well as the obvious CSS files.
I am using the "Multi Edit Plugin" Multi Edit Plugin but that guide, does it so that you create a CustomPage. I guess I could do that but what I want is my index.php file to be added to the admin side of the site and then point the template there or similar.
As it's getting a little frustrating working with multiple WP plugins that just don't seem to do the job correctly.
There are many ways to go about this: one being what was mentioned by Pekka and the other using Custom Page templates.
The above mentioned methods are, in theory, quite similar with subtle differences in terms of execution and inclusion.
Perhaps to better answer your question, I will provide a very brief sample outline below on Custom Post Templates. You may probably need to do a little more digging at Wordpress' Codex if you choose to further enhance anything else:
Custom Post Template Method
Referring to the wireframe provided in your image link, I propose that you use category filters to filter the associated posts to the right columns. So first up, you will need to create 4 categories for the method that I'm suggesting, namely: WELCOME, FOLLOW, SELF-EMPLOYMENT and CONSORTIUM.
After doing so, your index.php should look something like this:
INDEX.PHP
<?php get_header();?>
<!--container-->
<div id="container">
<?php query_posts('category_name=welcome&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<!--top-content-->
<div class="top-content">
<h2><?php the_title();?></h2>
<p><?php the_content();?></p>
</div>
<!--top-content-->
<?php endwhile;?>
<!--bottom-content-->
<div class="bottom-content">
<!--follow-->
<div class="follow">
<?php include(TEMPLATEPATH . '/follow.php');?>
</div>
<!--follow-->
<!--self-employment-->
<div class="self-employment">
<?php include(TEMPLATEPATH . '/self-employment.php');?>
</div>
<!--self-employment-->
<!--consortium-->
<div class="consortium">
<?php include(TEMPLATEPATH . '/consortium.php');?>
</div>
<!--consortium-->
</div>
<!--bottom-content-->
</div>
<!--container-->
<?php get_footer();?>
What is happening here is that I'm doing a post query for posts tagged to the category "WELCOME" and filter the posts into the top-content DIV. Note that my loop starts right before of the top-content DIV and ends immediately after it. This will means that the loop will only affect that particular DIV. I have also set the post limit to "1", thereby restricting the display of posts to just the latest post.
Following on from there, you will notice that in the bottom-content DIV, I have included 3 different files for each column. These 3 files will be your custom post templates that you will need to create and have a post query to filter in the right post. An example of the custom post template will look something like this below:
FOLLOW.PHP
<?php query_posts('category_name=follow&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title();?></h2>
<?php the_post_thumbnail('bottom-content-thumb');?> <!--you will have to enable featured image thumbs in your functions.php file before you can do this-->
<span class="read-more">Continue Reading</span> <!--there are other ways to do the read more link, but I'm just giving an example now so yeah-->
<?php endwhile;?>
The rest of the custom post templates for the bottom 3 columns should look something like the above. If there is any variation of style and all, you will probably have to shift things around and play around with the CSS.
I want to stress that this is not the one and only way to do what you hope to achieve, but rather, that it is one of the many. What I've suggested is only an example that hopes to provide some insights on how you can utilize Custom Post templates for developing Wordpress based sites.
My advice at the end of the day is to delve deeper into Codex and find out more about Custom Post/Page templates because eventually, they will come in very handy if you choose to make custom Wordpress templates.
Hope my post had made things a little clearer for you =)
i am new to wordpress , i was given a task to convert a web site into wordpress. Following is what i have done.
i changed the header of twentyten theme and added lot of javascript lib which were included on the original page.
i changed the index.php page and added the tables and divs so that site can have look and feel what it had before.
After reading bit of codex. i added the following at the bottom of the page to show wordpress comments.
<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
</div><!-- #content -->
</div><!-- #container -->
Till here every thing works fine and wordpress is show comments on this page as well. Now in the menu there is another page called next_level.php so i thought to display the commenting functionality of wordpress at the bottom of that page as well. so what i did as follows.
i included the same get_header() in the next_level.php page so that header source remains the same.
i had few database queries running to display this page contents and for that i imported few tables from the previous site into the wordpress database. working fine.
The only problem i have is to show a commenting machenism of wordpress at the bottom of this page. Please guide,correct,suggest and help how to achieve this. Sorry for the long post.
Hey, I couldn't really understand the process you did or the result required, but I think this is the only line you need to display the comments at the bottom:
<?php comments_template( '', true ); ?>
My example is here
I am customizing the default template, but something isn't placed right. Can't figure it out.
By the way, I am asking this here and not at WordPress because frankly, their forums are horrible as far as response times go. Stackoverflow has always done me good :)
Without seeing the php code it'll be hard to know why. Do you have a seprate template for single post ie singlepost.php? If so, make sure you're include sidebar.php into that.
Looks like single.php in the default theme doesn't pull in the sidebar by default. You'll need to add <?php get_sidebar(); ?> right before <?php get_footer(); ?> in single.php or just delete the single.php and wordpress will use index.php instead which has the sidebar.