How can I add text to my website?

Question

I am just getting familiar with the CSS language, which has helped me modify text, etc. I am confused, however, how to actually add text. What code do I need to do this, and where do I place it? My website is run off of Wordpress and I am not sure if I need to place code in an HTML file, or PHP file, or something else. My website is hintdrop.com in case this helps.

I tried adding the following code to my index.php file:

<p class="contact"><?php echo "Contact Us";?></p>

This code did not show text saying "Contact Us" however, so I'm not sure if this code itself is incorrect, or if I added the code to the wrong place within the HTML code. Below is the index.php file, which at line 32 I added the above code.

<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package understrap
*/

get_header(); ?>

<?php if (is_front_page()) { ?>

<div id="header-featured" class="wrapper header-featured">

<div class="container">

    <div class="jumbotron">

        <h1><?php echo get_theme_mod( 'launch_header_title', __('Launch Wordpress Theme','launch') ); ?></h1>

        <p class="lead margin-bottom-30"><?php echo get_theme_mod( 'launch_header_tagline', __('Launch is a responsive e-commerce WordPress theme perfect to market your products and services.','launch') ); ?></p>

        <?php if ( get_theme_mod( 'launch_header_button_toggle' ) == '' ) { ?>
            <p><a class="btn btn-lg btn-primary" href="<?php echo esc_url( get_theme_mod( 'launch_header_button_url', '#' ) ); ?>" role="button"><?php echo get_theme_mod( 'launch_header_button_text', __('Get Started','launch') ); ?></a></p>
        <?php } ?>

        <p class="contact"><?php echo "Contact Us";?></p>

        <?php if ( has_header_image() ) { ?>
            <div clas="center-block">

                <img class="img-responsive featured-image" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" />

            </div>
        <?php } ?>

    </div>

</div>

</div>

<?php if ( is_active_sidebar( 'front-featured' ) ) { ?>

<div id="widgets-featured" class="wrapper widgets-featured">

<div class="container">

    <div class="row multi-columns-row">

        <?php dynamic_sidebar( 'front-featured' ); ?>

    </div>

</div>

</div>

<?php } ?>

<?php } ?>

<div class="wrapper" id="wrapper-index">

<div id="content" class="container">

    <div class="row">

       <div id="primary" class="<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>col-md-7<?php else : ?>col-md-12<?php endif; ?> content-area">

             <main id="main" class="site-main" role="main">

            <?php if ( have_posts() ) : ?>

                <?php /* Start the Loop */ ?>

                <?php while ( have_posts() ) : the_post(); ?>

                        <?php
                            /* Include the Post-Format-specific template for the content.
                             * If you want to override this in a child theme, then include a file
                             * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                             */
                            get_template_part( 'loop-templates/content', get_post_format() );
                        ?>

                <?php endwhile; ?>

                <?php launch_paging_nav(); ?>

            <?php else : ?>

                <?php get_template_part( 'loop-templates/content', 'none' ); ?>

            <?php endif; ?>

            </main><!-- #main -->

       </div><!-- #primary -->

    <?php get_sidebar(); ?>

    </div><!-- .row -->

</div><!-- Container end -->

</div><!-- Wrapper end -->

<?php get_footer(); ?>

Answer 1

First, you have too much php and I suggest staying away from php since it is starting to die and often leads to complex, hard to read spaghetti code. Everyone is moving away from it because large scale projects become impossible to maintain and it's too flexible, which can be horrible to work with.

Also, CSS is cascading STYLE sheets. CSS is for styling your view, not writing it. PHP is server side, meant to be used for control structures and objects. Basically, php is for logic. Java script is also for logic, but less powerful than php. HTML should be the bulk of your website and is the front facing view for people.

Basically. if the user needs to see it, it should be HTML. If something needs a different look, CSS. If something needs logic, JavaScript (or PHP or .net).

If you do want to stay with php, you don't have to php tag EVERYTHING. For example:

<?php if ( have_posts() ) : 
    /* Start the Loop */
    while ( have_posts() ) : the_post();
        get_template_part( 'loop-templates/content', get_post_format() );?>

Also, you were close with your text solution:

<p class="contact">Contact Us</p>

If you are using that tag remember to make sure it's outside PHP, you need to close and open php around it

<?php open php
    more php code
    close php ?>

<p>Contact Us</p>

<?php continue php code

I suggest you do some html tutorials. PHP is nice and has some really cool capabilities, but it's not the best thing to use. You may want to look into an asp.net application or angular 5 for your needs. These are much better and much more useful for real world work.

Answer 2

1st of all index.php in WordPress does not mean it represents the FrontPage or HomePage only. ( FrontPage & HomePage also different in some cases )

2nd thing, CSS has nothing to do with HTML or any PHP code.

So from your side you need to find out where exactly you want to display your text, either give us some information or troubleshoot yourself.

And regarding the text you want to display it will be as simple as follows,

<p class="contact">Contact Us</p>

There is absolutely no use of PHP unless you are using multiple language, in that case code will look as follows,

<p class="contact"><?php echo __( 'Contact Us', 'your-text-domain' ); ?></p>

Hope this helps you.