Designing in wordpress

Hi just started learning wp. I have not seen many backends in Wordpress and therefor not sure how to make things. I know html/css good, that is not the problem.

Please take a look at the image, how should i build something like this ? It needs to be easy for everybody to edit text and image via backend.

I thought about using custom fields for images and text. I would then create a pagetemplate.

Is there a better way ? What is the most userfriendly thing to do ?

Thanks Ingenting

You’ll want to look into theme development: http://codex.wordpress.org/Theme_Development

Also, take a look at the 2012 default theme. You’ll be able to see some of the code that makes a wordpress theme work.

For the example you provided, the pieces of information you would be pulling using PHP are the post title and featured image (or featured image thumbnail). The rest is HTML/CSS.

I have looked at the link, and a lot of other “theme development” resources. But still cant figure it out how to do this specific design. Is is not a blog page it is a corporate site, the image with the text above should link to “about page”. Is it then still right to use “post title” and “featured image”.

Why not create a new page-template with custom fields. Then the user can edit the all on the page including the above design via custom fields.

Okay lets say i have this design(see image). I have the html and css. I want to place this on my “about” page. What should i do ?

If someone could give some easy step by step that would be great.
I just cant find any tutorial that shows this.

Where did you get the screenshot from? I’d suggest looking at the website’s code to get an idea on how to approach the problem.

Also, I’ve gone ahead and move this to the “getting started with web design” forum, as your question involves getting started with HTML and CSS, rather than actual PHP code for Wordpress.

No no. i know html/css very good sir. i just dont know how to make it dynamic the right way. it should be user friendly.

meta boxes ? custom fields ? HOW!!

You need to use “the loop” (possibly a secondary loop with a query to select the posts you want) and pull the title, permalink, and featured image. You do not need any custom fields for this.

http://codex.wordpress.org/The_Loop

http://codex.wordpress.org/Function_Reference/get_permalink

http://codex.wordpress.org/Function_Reference/get_the_title

http://codex.wordpress.org/Function_Reference/the_post_thumbnail

Okay, you are saying that the three images are post with a featured image , title and permalink. Is this still right when it should link to “about page”. I still cant see how this is the right way :frowning: Also it does not make sense that the user should edit in post instead of the page name, not very user friendly ?

You might want to take a look at the difference between posts and pages:
[URL=“http://codex.wordpress.org/Post_Types”]
http://codex.wordpress.org/Post_Types
http://codex.wordpress.org/Pages

Beyond that, I’m not quite sure what you’re asking.

I am trying to find out how to setup those elements you see on the picture in wp.

When you click on the image you are going to a about us page.

i have the css/html.

Go ahead and post what you have.

Html/css does not matter. Where will you place the html ? Thanks for trying.

www.lynda.com has tutorials on Wordpress.

If I am understanding your post correctly, you have 3 images on a page. You want to click on the image and be redirected to a page.

Select the image and then click on the “link” icon. A screen will appear that allows you to link to another page or link to a URL.

You forget the text and css styling. I know how to place a image :slight_smile: How would you do this ?

i only know how to hardcode it into the editor or into the page template file.!! This is not very user friendly, or what ?

I understand your frustration with learning WordPress, but don’t despair, it is a great product once you get your feet wet.

I use this plugin for my images
http://www.mihaivalentin.com/image-pro-wordpress-image-management/

with this plugin you can resize, and align on the fly… It creates all the styling for you.

This is not what i am looking for and still does not answer my question at all. But thanks for showing me how you do.

You are just showing me a plugin that can resize images and align them right or left and so on. I want to make my own styling and apply classes and id’s to my images, titles.

Post your code, and we’ll start there. It’s just easiest to build upon or revise what you’ve already done.

Asking folks to build something from scratch for you can be a little much to ask.

The other reason is that you haven’t offered any details about exactly the problem is, and I’m still not entirely sure if your core issue is actually with HTML/CSS code or implementing wordpress PHP code. Without seeing what you’ve done so far, that’s impossible to determine. It doesn’t make sense for another forum member to put in some effort for you if it ends up not being what you’re actually having trouble with.

Five content blocks which contain an icon(font-face) and two lines of text. Each block is a link.


 <ul class="ca-menu">
                    <li>
                        <a href="#">
                            <span class="ca-icon">A</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Exceptional Service</h2>
                                <h3 class="ca-sub">Personalized to your needs</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">I</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Creative Storytelling</h2>
                                <h3 class="ca-sub">Advanced use of technology</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">C</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Infographical Education</h2>
                                <h3 class="ca-sub">Understanding visually</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">S</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Sophisticated Team</h2>
                                <h3 class="ca-sub">Professionals in action</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">d</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Unconditional Support</h2>
                                <h3 class="ca-sub">24/7 for you needs</h3>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 1020px;
}
.ca-menu li{
    width: 200px;
    height: 300px;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 60px;
    color: #333;
    text-shadow: 0px 0px 1px #333;
    line-height: 150px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0px;
    top: 0px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 50%;
}
.ca-main{
    font-size: 30px;
    opacity: 0.8;
    text-align: center;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-sub{
    text-align:center;
    font-size: 14px;
    color: #666;
    line-height: 40px;
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    width: 100%; 
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-menu li:hover{
    background-color: #000;
}
.ca-menu li:hover .ca-icon{
    color: #ff2020;
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
    color: #ff2020;
    -webkit-animation: smallToBig 300ms ease;
    -moz-animation: smallToBig 300ms ease;
    -ms-animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #000;
    background-color: #ff2020;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes smallToBig{
    from {
        -webkit-transform: scale(0.1);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes smallToBig{
    from {
        -moz-transform: scale(0.1);
    }
    to {
        -moz-transform: scale(1);
    }
}
@-ms-keyframes smallToBig{
    from {
        -ms-transform: scale(0.1);
    }
    to {
        -ms-transform: scale(1);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}